umwd-components 0.1.642 → 0.1.643
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.
- package/dist/node_modules/base64-js/index.js +1 -1
- package/dist/node_modules/ieee754/index.js +1 -1
- package/dist/src/components/e-commerce/invoice/InvoicePDF.js +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/e-commerce/invoice/InvoicePDF.tsx +476 -2
package/package.json
CHANGED
|
@@ -107,11 +107,247 @@ function InvoicePDF({ props }: { props: { invoice: Invoice } }) {
|
|
|
107
107
|
{seller_business_credentials?.company_name}
|
|
108
108
|
</Text>
|
|
109
109
|
</View>
|
|
110
|
-
|
|
110
|
+
|
|
111
|
+
{/* Credit Note */}
|
|
112
|
+
<View style={styles.section}>
|
|
113
|
+
<Text style={styles.h2}>CREDIT NOTE</Text>
|
|
114
|
+
</View>
|
|
115
|
+
|
|
116
|
+
{/* Customer Details*/}
|
|
117
|
+
<View style={styles.section}>
|
|
118
|
+
<View style={styles.row}>
|
|
119
|
+
<View style={styles.rowSection}>
|
|
120
|
+
<Text style={styles.h3}>BILLING DETAILS</Text>
|
|
121
|
+
<Text>{buyer_business_credentials?.company_name}</Text>
|
|
122
|
+
<Text>
|
|
123
|
+
{invoice?.buyer_first_name} {invoice?.buyer_last_name}
|
|
124
|
+
</Text>
|
|
125
|
+
<Text>
|
|
126
|
+
{buyer_company_address?.street}{" "}
|
|
127
|
+
{buyer_company_address?.street_number}{" "}
|
|
128
|
+
{buyer_company_address?.street_number_addition}
|
|
129
|
+
</Text>
|
|
130
|
+
<Text>
|
|
131
|
+
{buyer_company_address?.postal_code}{" "}
|
|
132
|
+
{buyer_company_address?.city}
|
|
133
|
+
</Text>
|
|
134
|
+
</View>
|
|
135
|
+
<View style={styles.rowSection}>
|
|
136
|
+
<Text style={styles.h3}>FROM</Text>
|
|
137
|
+
<Text>{seller_business_credentials?.company_name}</Text>
|
|
138
|
+
<Text>
|
|
139
|
+
{seller_company_address?.street}{" "}
|
|
140
|
+
{seller_company_address?.street_number}{" "}
|
|
141
|
+
{seller_company_address?.street_number_addition}
|
|
142
|
+
</Text>
|
|
143
|
+
<Text>
|
|
144
|
+
{seller_company_address?.postal_code}{" "}
|
|
145
|
+
{seller_company_address?.city}
|
|
146
|
+
</Text>
|
|
147
|
+
<Text style={{ fontStyle: "bold", marginTop: 10 }}>
|
|
148
|
+
CoC Number
|
|
149
|
+
</Text>
|
|
150
|
+
<Text>{seller_business_credentials?.coc_number}</Text>
|
|
151
|
+
<Text style={{ fontStyle: "bold", marginTop: 10 }}>
|
|
152
|
+
VAT Number
|
|
153
|
+
</Text>
|
|
154
|
+
<Text>{seller_business_credentials?.vat_number}</Text>
|
|
155
|
+
</View>
|
|
156
|
+
</View>
|
|
157
|
+
</View>
|
|
158
|
+
|
|
159
|
+
{/* Rest of the document structure follows the same as regular invoice */}
|
|
160
|
+
<View style={styles.section}>
|
|
161
|
+
<View style={styles.row}>
|
|
162
|
+
<View style={styles.rowSection}>
|
|
163
|
+
<Text style={{ fontStyle: "bold" }}>Invoice number: </Text>
|
|
164
|
+
|
|
165
|
+
<Text>{invoice?.invoice_number}</Text>
|
|
166
|
+
</View>
|
|
167
|
+
{invoice?.customer_reference && (
|
|
168
|
+
<View style={styles.rowSection}>
|
|
169
|
+
<Text style={{ fontStyle: "bold" }}>Your reference: </Text>
|
|
170
|
+
|
|
171
|
+
<Text>{invoice?.customer_reference}</Text>
|
|
172
|
+
</View>
|
|
173
|
+
)}
|
|
174
|
+
<View style={styles.rowSection}>
|
|
175
|
+
<Text style={{ fontStyle: "bold" }}>Invoice date</Text>
|
|
176
|
+
<Text>{invoice?.invoice_date}</Text>
|
|
177
|
+
</View>
|
|
178
|
+
</View>
|
|
179
|
+
</View>
|
|
180
|
+
{/* Invoice resume, products and price calculation */}
|
|
181
|
+
<View style={styles.section}>
|
|
182
|
+
<Text style={styles.h3}>SUMMARY</Text>
|
|
183
|
+
<View style={styles.row}>
|
|
184
|
+
{invoice?.admin_items?.length > 0 && (
|
|
185
|
+
<View style={styles.productRowSection}>
|
|
186
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
187
|
+
Line Item Number
|
|
188
|
+
</Text>
|
|
189
|
+
</View>
|
|
190
|
+
)}
|
|
191
|
+
<View style={styles.productRowSection}>
|
|
192
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
193
|
+
Title
|
|
194
|
+
</Text>
|
|
195
|
+
</View>
|
|
196
|
+
<View style={styles.productRowSection}>
|
|
197
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
198
|
+
Amount
|
|
199
|
+
</Text>
|
|
200
|
+
</View>
|
|
201
|
+
<View style={styles.productRowSection}>
|
|
202
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
203
|
+
VAT rate
|
|
204
|
+
</Text>
|
|
205
|
+
</View>
|
|
206
|
+
<View style={styles.productRowSection}>
|
|
207
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>VAT</Text>
|
|
208
|
+
</View>
|
|
209
|
+
<View style={styles.productRowSection}>
|
|
210
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
211
|
+
Excl. VAT
|
|
212
|
+
</Text>
|
|
213
|
+
</View>
|
|
214
|
+
<View style={styles.productRowSection}>
|
|
215
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
216
|
+
Incl. VAT
|
|
217
|
+
</Text>
|
|
218
|
+
</View>
|
|
219
|
+
</View>
|
|
220
|
+
{invoice?.items?.map((item, index) => {
|
|
221
|
+
return (
|
|
222
|
+
<Fragment key={index}>
|
|
223
|
+
<View style={styles.row}>
|
|
224
|
+
<View style={styles.productRowSection}>
|
|
225
|
+
<Text style={{ fontSize: "10px" }}>
|
|
226
|
+
{"product_title" in item && item.product_title}
|
|
227
|
+
{"item_description" in item && item.item_description}
|
|
228
|
+
</Text>
|
|
229
|
+
</View>
|
|
230
|
+
<View style={styles.productRowSection}>
|
|
231
|
+
<Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
|
|
232
|
+
</View>
|
|
233
|
+
<View style={styles.productRowSection}>
|
|
234
|
+
<Text style={{ fontSize: "10px" }}>
|
|
235
|
+
{item.vat_rate} %
|
|
236
|
+
</Text>{" "}
|
|
237
|
+
{/* should be integer */}
|
|
238
|
+
</View>
|
|
239
|
+
<View style={styles.productRowSection}>
|
|
240
|
+
{item.price_excl_vat && item.price_incl_vat && (
|
|
241
|
+
<Text style={{ fontSize: "10px" }}>
|
|
242
|
+
€{" "}
|
|
243
|
+
{(item.price_incl_vat - item.price_excl_vat)?.toFixed(
|
|
244
|
+
2
|
|
245
|
+
)}
|
|
246
|
+
</Text>
|
|
247
|
+
)}
|
|
248
|
+
</View>
|
|
249
|
+
<View style={styles.productRowSection}>
|
|
250
|
+
<Text style={{ fontSize: "10px" }}>
|
|
251
|
+
€ {item.price_excl_vat?.toFixed(2)}
|
|
252
|
+
</Text>
|
|
253
|
+
</View>
|
|
254
|
+
<View style={styles.productRowSection}>
|
|
255
|
+
<Text style={{ fontSize: "10px" }}>
|
|
256
|
+
€ {item.price_incl_vat?.toFixed(2)}
|
|
257
|
+
</Text>
|
|
258
|
+
</View>
|
|
259
|
+
</View>
|
|
260
|
+
</Fragment>
|
|
261
|
+
);
|
|
262
|
+
})}
|
|
263
|
+
{invoice?.admin_items?.map((item, index) => {
|
|
264
|
+
return (
|
|
265
|
+
<Fragment key={index}>
|
|
266
|
+
<View style={styles.row}>
|
|
267
|
+
<View style={styles.productRowSection}>
|
|
268
|
+
<Text style={{ fontSize: "10px" }}>
|
|
269
|
+
{item.line_item_number}
|
|
270
|
+
</Text>
|
|
271
|
+
</View>
|
|
272
|
+
<View style={styles.productRowSection}>
|
|
273
|
+
<Text style={{ fontSize: "10px" }}>
|
|
274
|
+
{item.description}
|
|
275
|
+
</Text>
|
|
276
|
+
</View>
|
|
277
|
+
<View style={styles.productRowSection}>
|
|
278
|
+
<Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
|
|
279
|
+
</View>
|
|
280
|
+
<View style={styles.productRowSection}>
|
|
281
|
+
<Text style={{ fontSize: "10px" }}>
|
|
282
|
+
{item?.price?.vat_rate} %
|
|
283
|
+
</Text>
|
|
284
|
+
</View>
|
|
285
|
+
<View style={styles.productRowSection}>
|
|
286
|
+
<Text style={{ fontSize: "10px" }}>
|
|
287
|
+
€ {item?.price?.vat?.toFixed(2)}
|
|
288
|
+
</Text>
|
|
289
|
+
</View>
|
|
290
|
+
<View style={styles.productRowSection}>
|
|
291
|
+
<Text style={{ fontSize: "10px" }}>
|
|
292
|
+
€ {item?.price?.price?.toFixed(2)}
|
|
293
|
+
</Text>
|
|
294
|
+
</View>
|
|
295
|
+
<View style={styles.productRowSection}>
|
|
296
|
+
<Text style={{ fontSize: "10px" }}>
|
|
297
|
+
€ {item?.price?.price_incl_vat?.toFixed(2)}
|
|
298
|
+
</Text>
|
|
299
|
+
</View>
|
|
300
|
+
</View>
|
|
301
|
+
</Fragment>
|
|
302
|
+
);
|
|
303
|
+
})}
|
|
304
|
+
</View>
|
|
305
|
+
{/* Totals */}
|
|
306
|
+
<View style={styles.section}>
|
|
307
|
+
<Text style={styles.h3}>TOTALS</Text>
|
|
308
|
+
<View style={styles.row}>
|
|
309
|
+
<View style={styles.productRowSection}></View>
|
|
310
|
+
<View style={styles.productRowSection}></View>
|
|
311
|
+
<View style={styles.productRowSection}></View>
|
|
312
|
+
<View style={styles.productRowSection}>
|
|
313
|
+
<Text style={{ fontStyle: "bold" }}>VAT</Text>
|
|
314
|
+
</View>
|
|
315
|
+
<View style={styles.productRowSection}>
|
|
316
|
+
<Text style={{ fontStyle: "bold" }}>Excl. VAT</Text>
|
|
317
|
+
</View>
|
|
318
|
+
<View style={styles.productRowSection}>
|
|
319
|
+
<Text style={{ fontStyle: "bold" }}>Incl. VAT</Text>
|
|
320
|
+
</View>
|
|
321
|
+
</View>
|
|
322
|
+
<View style={styles.row}>
|
|
323
|
+
<View style={styles.productRowSection}></View>
|
|
324
|
+
<View style={styles.productRowSection}></View>
|
|
325
|
+
<View style={styles.productRowSection}></View>
|
|
326
|
+
<View style={styles.productRowSection}>
|
|
327
|
+
<Text>€ {invoice?.VAT_total?.toFixed(2)}</Text>
|
|
328
|
+
</View>
|
|
329
|
+
<View style={styles.productRowSection}>
|
|
330
|
+
<Text>€ {invoice?.total_excl_vat?.toFixed(2)}</Text>
|
|
331
|
+
</View>
|
|
332
|
+
<View style={styles.productRowSection}>
|
|
333
|
+
<Text>€ {invoice?.total_incl_vat?.toFixed(2)}</Text>
|
|
334
|
+
</View>
|
|
335
|
+
</View>
|
|
336
|
+
</View>
|
|
337
|
+
<View style={styles.section}>
|
|
338
|
+
<Text
|
|
339
|
+
style={{ ...styles.h3, border: "2px solid black", padding: 10 }}
|
|
340
|
+
>
|
|
341
|
+
Total Due: € {invoice?.total_incl_vat?.toFixed(2)}
|
|
342
|
+
</Text>
|
|
343
|
+
</View>
|
|
344
|
+
|
|
345
|
+
{/* Company disclaimer */}
|
|
111
346
|
</Page>
|
|
112
347
|
</Document>
|
|
113
348
|
);
|
|
114
349
|
}
|
|
350
|
+
|
|
115
351
|
if (type === "proforma") {
|
|
116
352
|
return (
|
|
117
353
|
<Document title={`proforma_${invoice?.invoice_number}`}>
|
|
@@ -121,7 +357,245 @@ function InvoicePDF({ props }: { props: { invoice: Invoice } }) {
|
|
|
121
357
|
{seller_business_credentials?.company_name}
|
|
122
358
|
</Text>
|
|
123
359
|
</View>
|
|
124
|
-
|
|
360
|
+
|
|
361
|
+
{/* Proforma Invoice */}
|
|
362
|
+
<View style={styles.section}>
|
|
363
|
+
<Text style={styles.h2}>PROFORMA INVOICE</Text>
|
|
364
|
+
<Text style={{ fontSize: 10, marginTop: 5 }}>
|
|
365
|
+
This is not a final invoice and cannot be used for tax purposes
|
|
366
|
+
</Text>
|
|
367
|
+
</View>
|
|
368
|
+
|
|
369
|
+
{/* Customer Details*/}
|
|
370
|
+
<View style={styles.section}>
|
|
371
|
+
<View style={styles.row}>
|
|
372
|
+
<View style={styles.rowSection}>
|
|
373
|
+
<Text style={styles.h3}>BILLING DETAILS</Text>
|
|
374
|
+
<Text>{buyer_business_credentials?.company_name}</Text>
|
|
375
|
+
<Text>
|
|
376
|
+
{invoice?.buyer_first_name} {invoice?.buyer_last_name}
|
|
377
|
+
</Text>
|
|
378
|
+
<Text>
|
|
379
|
+
{buyer_company_address?.street}{" "}
|
|
380
|
+
{buyer_company_address?.street_number}{" "}
|
|
381
|
+
{buyer_company_address?.street_number_addition}
|
|
382
|
+
</Text>
|
|
383
|
+
<Text>
|
|
384
|
+
{buyer_company_address?.postal_code}{" "}
|
|
385
|
+
{buyer_company_address?.city}
|
|
386
|
+
</Text>
|
|
387
|
+
</View>
|
|
388
|
+
<View style={styles.rowSection}>
|
|
389
|
+
<Text style={styles.h3}>FROM</Text>
|
|
390
|
+
<Text>{seller_business_credentials?.company_name}</Text>
|
|
391
|
+
<Text>
|
|
392
|
+
{seller_company_address?.street}{" "}
|
|
393
|
+
{seller_company_address?.street_number}{" "}
|
|
394
|
+
{seller_company_address?.street_number_addition}
|
|
395
|
+
</Text>
|
|
396
|
+
<Text>
|
|
397
|
+
{seller_company_address?.postal_code}{" "}
|
|
398
|
+
{seller_company_address?.city}
|
|
399
|
+
</Text>
|
|
400
|
+
<Text style={{ fontStyle: "bold", marginTop: 10 }}>
|
|
401
|
+
CoC Number
|
|
402
|
+
</Text>
|
|
403
|
+
<Text>{seller_business_credentials?.coc_number}</Text>
|
|
404
|
+
<Text style={{ fontStyle: "bold", marginTop: 10 }}>
|
|
405
|
+
VAT Number
|
|
406
|
+
</Text>
|
|
407
|
+
<Text>{seller_business_credentials?.vat_number}</Text>
|
|
408
|
+
</View>
|
|
409
|
+
</View>
|
|
410
|
+
</View>
|
|
411
|
+
|
|
412
|
+
{/* Rest of the document structure follows the same as regular invoice */}
|
|
413
|
+
<View style={styles.section}>
|
|
414
|
+
<View style={styles.row}>
|
|
415
|
+
<View style={styles.rowSection}>
|
|
416
|
+
<Text style={{ fontStyle: "bold" }}>Invoice number: </Text>
|
|
417
|
+
|
|
418
|
+
<Text>{invoice?.invoice_number}</Text>
|
|
419
|
+
</View>
|
|
420
|
+
{invoice?.customer_reference && (
|
|
421
|
+
<View style={styles.rowSection}>
|
|
422
|
+
<Text style={{ fontStyle: "bold" }}>Your reference: </Text>
|
|
423
|
+
|
|
424
|
+
<Text>{invoice?.customer_reference}</Text>
|
|
425
|
+
</View>
|
|
426
|
+
)}
|
|
427
|
+
<View style={styles.rowSection}>
|
|
428
|
+
<Text style={{ fontStyle: "bold" }}>Invoice date</Text>
|
|
429
|
+
<Text>{invoice?.invoice_date}</Text>
|
|
430
|
+
</View>
|
|
431
|
+
</View>
|
|
432
|
+
</View>
|
|
433
|
+
{/* Invoice resume, products and price calculation */}
|
|
434
|
+
<View style={styles.section}>
|
|
435
|
+
<Text style={styles.h3}>SUMMARY</Text>
|
|
436
|
+
<View style={styles.row}>
|
|
437
|
+
{invoice?.admin_items?.length > 0 && (
|
|
438
|
+
<View style={styles.productRowSection}>
|
|
439
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
440
|
+
Line Item Number
|
|
441
|
+
</Text>
|
|
442
|
+
</View>
|
|
443
|
+
)}
|
|
444
|
+
<View style={styles.productRowSection}>
|
|
445
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
446
|
+
Title
|
|
447
|
+
</Text>
|
|
448
|
+
</View>
|
|
449
|
+
<View style={styles.productRowSection}>
|
|
450
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
451
|
+
Amount
|
|
452
|
+
</Text>
|
|
453
|
+
</View>
|
|
454
|
+
<View style={styles.productRowSection}>
|
|
455
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
456
|
+
VAT rate
|
|
457
|
+
</Text>
|
|
458
|
+
</View>
|
|
459
|
+
<View style={styles.productRowSection}>
|
|
460
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>VAT</Text>
|
|
461
|
+
</View>
|
|
462
|
+
<View style={styles.productRowSection}>
|
|
463
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
464
|
+
Excl. VAT
|
|
465
|
+
</Text>
|
|
466
|
+
</View>
|
|
467
|
+
<View style={styles.productRowSection}>
|
|
468
|
+
<Text style={{ fontSize: "10px", fontStyle: "bold" }}>
|
|
469
|
+
Incl. VAT
|
|
470
|
+
</Text>
|
|
471
|
+
</View>
|
|
472
|
+
</View>
|
|
473
|
+
{invoice?.items?.map((item, index) => {
|
|
474
|
+
return (
|
|
475
|
+
<Fragment key={index}>
|
|
476
|
+
<View style={styles.row}>
|
|
477
|
+
<View style={styles.productRowSection}>
|
|
478
|
+
<Text style={{ fontSize: "10px" }}>
|
|
479
|
+
{"product_title" in item && item.product_title}
|
|
480
|
+
{"item_description" in item && item.item_description}
|
|
481
|
+
</Text>
|
|
482
|
+
</View>
|
|
483
|
+
<View style={styles.productRowSection}>
|
|
484
|
+
<Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
|
|
485
|
+
</View>
|
|
486
|
+
<View style={styles.productRowSection}>
|
|
487
|
+
<Text style={{ fontSize: "10px" }}>
|
|
488
|
+
{item.vat_rate} %
|
|
489
|
+
</Text>{" "}
|
|
490
|
+
{/* should be integer */}
|
|
491
|
+
</View>
|
|
492
|
+
<View style={styles.productRowSection}>
|
|
493
|
+
{item.price_excl_vat && item.price_incl_vat && (
|
|
494
|
+
<Text style={{ fontSize: "10px" }}>
|
|
495
|
+
€{" "}
|
|
496
|
+
{(item.price_incl_vat - item.price_excl_vat)?.toFixed(
|
|
497
|
+
2
|
|
498
|
+
)}
|
|
499
|
+
</Text>
|
|
500
|
+
)}
|
|
501
|
+
</View>
|
|
502
|
+
<View style={styles.productRowSection}>
|
|
503
|
+
<Text style={{ fontSize: "10px" }}>
|
|
504
|
+
€ {item.price_excl_vat?.toFixed(2)}
|
|
505
|
+
</Text>
|
|
506
|
+
</View>
|
|
507
|
+
<View style={styles.productRowSection}>
|
|
508
|
+
<Text style={{ fontSize: "10px" }}>
|
|
509
|
+
€ {item.price_incl_vat?.toFixed(2)}
|
|
510
|
+
</Text>
|
|
511
|
+
</View>
|
|
512
|
+
</View>
|
|
513
|
+
</Fragment>
|
|
514
|
+
);
|
|
515
|
+
})}
|
|
516
|
+
{invoice?.admin_items?.map((item, index) => {
|
|
517
|
+
return (
|
|
518
|
+
<Fragment key={index}>
|
|
519
|
+
<View style={styles.row}>
|
|
520
|
+
<View style={styles.productRowSection}>
|
|
521
|
+
<Text style={{ fontSize: "10px" }}>
|
|
522
|
+
{item.line_item_number}
|
|
523
|
+
</Text>
|
|
524
|
+
</View>
|
|
525
|
+
<View style={styles.productRowSection}>
|
|
526
|
+
<Text style={{ fontSize: "10px" }}>
|
|
527
|
+
{item.description}
|
|
528
|
+
</Text>
|
|
529
|
+
</View>
|
|
530
|
+
<View style={styles.productRowSection}>
|
|
531
|
+
<Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
|
|
532
|
+
</View>
|
|
533
|
+
<View style={styles.productRowSection}>
|
|
534
|
+
<Text style={{ fontSize: "10px" }}>
|
|
535
|
+
{item?.price?.vat_rate} %
|
|
536
|
+
</Text>
|
|
537
|
+
</View>
|
|
538
|
+
<View style={styles.productRowSection}>
|
|
539
|
+
<Text style={{ fontSize: "10px" }}>
|
|
540
|
+
€ {item?.price?.vat?.toFixed(2)}
|
|
541
|
+
</Text>
|
|
542
|
+
</View>
|
|
543
|
+
<View style={styles.productRowSection}>
|
|
544
|
+
<Text style={{ fontSize: "10px" }}>
|
|
545
|
+
€ {item?.price?.price?.toFixed(2)}
|
|
546
|
+
</Text>
|
|
547
|
+
</View>
|
|
548
|
+
<View style={styles.productRowSection}>
|
|
549
|
+
<Text style={{ fontSize: "10px" }}>
|
|
550
|
+
€ {item?.price?.price_incl_vat?.toFixed(2)}
|
|
551
|
+
</Text>
|
|
552
|
+
</View>
|
|
553
|
+
</View>
|
|
554
|
+
</Fragment>
|
|
555
|
+
);
|
|
556
|
+
})}
|
|
557
|
+
</View>
|
|
558
|
+
{/* Totals */}
|
|
559
|
+
<View style={styles.section}>
|
|
560
|
+
<Text style={styles.h3}>TOTALS</Text>
|
|
561
|
+
<View style={styles.row}>
|
|
562
|
+
<View style={styles.productRowSection}></View>
|
|
563
|
+
<View style={styles.productRowSection}></View>
|
|
564
|
+
<View style={styles.productRowSection}></View>
|
|
565
|
+
<View style={styles.productRowSection}>
|
|
566
|
+
<Text style={{ fontStyle: "bold" }}>VAT</Text>
|
|
567
|
+
</View>
|
|
568
|
+
<View style={styles.productRowSection}>
|
|
569
|
+
<Text style={{ fontStyle: "bold" }}>Excl. VAT</Text>
|
|
570
|
+
</View>
|
|
571
|
+
<View style={styles.productRowSection}>
|
|
572
|
+
<Text style={{ fontStyle: "bold" }}>Incl. VAT</Text>
|
|
573
|
+
</View>
|
|
574
|
+
</View>
|
|
575
|
+
<View style={styles.row}>
|
|
576
|
+
<View style={styles.productRowSection}></View>
|
|
577
|
+
<View style={styles.productRowSection}></View>
|
|
578
|
+
<View style={styles.productRowSection}></View>
|
|
579
|
+
<View style={styles.productRowSection}>
|
|
580
|
+
<Text>€ {invoice?.VAT_total?.toFixed(2)}</Text>
|
|
581
|
+
</View>
|
|
582
|
+
<View style={styles.productRowSection}>
|
|
583
|
+
<Text>€ {invoice?.total_excl_vat?.toFixed(2)}</Text>
|
|
584
|
+
</View>
|
|
585
|
+
<View style={styles.productRowSection}>
|
|
586
|
+
<Text>€ {invoice?.total_incl_vat?.toFixed(2)}</Text>
|
|
587
|
+
</View>
|
|
588
|
+
</View>
|
|
589
|
+
</View>
|
|
590
|
+
<View style={styles.section}>
|
|
591
|
+
<Text
|
|
592
|
+
style={{ ...styles.h3, border: "2px solid black", padding: 10 }}
|
|
593
|
+
>
|
|
594
|
+
Total Due: € {invoice?.total_incl_vat?.toFixed(2)}
|
|
595
|
+
</Text>
|
|
596
|
+
</View>
|
|
597
|
+
|
|
598
|
+
{/* Company disclaimer */}
|
|
125
599
|
</Page>
|
|
126
600
|
</Document>
|
|
127
601
|
);
|