umwd-components 0.1.641 → 0.1.642

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.
@@ -64,6 +64,7 @@ export interface Invoice {
64
64
  admin_items: AdminInvoiceItem[];
65
65
  customer?: number;
66
66
  comments?: string;
67
+ type: `invoice` | `credit` | `proforma`;
67
68
  }
68
69
  export interface InvoiceOverwrites {
69
70
  lines?: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.641",
3
+ "version": "0.1.642",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/src/index.js",
6
6
  "module": "dist/src/index.js",
@@ -92,250 +92,290 @@ function InvoicePDF({ props }: { props: { invoice: Invoice } }) {
92
92
  seller_company_address,
93
93
  buyer_company_address,
94
94
  buyer_business_credentials,
95
+ type,
96
+ invoice_number,
95
97
  } = invoice;
96
- return (
97
- <Document title={`invoice_${invoice?.invoice_number}`}>
98
- <Page size="A4" style={styles.page}>
99
- <View style={styles.header}>
100
- {/* <Image style={styles.logo} src={logo_white_square.src} /> */}
101
- <Text style={styles.h1}>
102
- {seller_business_credentials?.company_name}
103
- </Text>
104
- </View>
105
98
 
106
- {/* Invoice */}
107
- <View style={styles.section}>
108
- <Text style={styles.h2}>INVOICE</Text>
109
- </View>
110
- {/* Customer Details*/}
111
- <View style={styles.section}>
112
- <View style={styles.row}>
113
- <View style={styles.rowSection}>
114
- <Text style={styles.h3}>BILLING DETAILS</Text>
115
- <Text>{buyer_business_credentials?.company_name}</Text>
116
- <Text>
117
- {invoice?.buyer_first_name} {invoice?.buyer_last_name}
118
- </Text>
119
- <Text>
120
- {buyer_company_address?.street}{" "}
121
- {buyer_company_address?.street_number}{" "}
122
- {buyer_company_address?.street_number_addition}
123
- </Text>
124
- <Text>
125
- {buyer_company_address?.postal_code}{" "}
126
- {buyer_company_address?.city}
127
- </Text>
128
- {/* <Text>{invoice?.user_country}</Text> */}
129
- </View>
130
- {/* Company Details */}
131
- <View style={styles.rowSection}>
132
- <Text style={styles.h3}>FROM</Text>
133
- <Text>{seller_business_credentials?.company_name}</Text>
134
- <Text>
135
- {seller_company_address?.street}{" "}
136
- {seller_company_address?.street_number}{" "}
137
- {seller_company_address?.street_number_addition}
138
- </Text>
139
- <Text>
140
- {seller_company_address?.postal_code}{" "}
141
- {seller_company_address?.city}
142
- </Text>
143
- {/* <Text>{invoice?.company_country}</Text> */}
144
- <Text style={{ fontStyle: "bold", marginTop: 10 }}>
145
- CoC Number
146
- </Text>
147
- <Text>{seller_business_credentials?.coc_number}</Text>
148
- <Text style={{ fontStyle: "bold", marginTop: 10 }}>
149
- VAT Number
150
- </Text>
151
- <Text>{seller_business_credentials?.vat_number}</Text>
152
- </View>
99
+ console.log("type", type);
100
+
101
+ if (type === "credit") {
102
+ return (
103
+ <Document title={`credit_${invoice?.invoice_number}`}>
104
+ <Page size="A4" style={styles.page}>
105
+ <View style={styles.header}>
106
+ <Text style={styles.h1}>
107
+ {seller_business_credentials?.company_name}
108
+ </Text>
109
+ </View>
110
+ <Text>Credit note</Text>
111
+ </Page>
112
+ </Document>
113
+ );
114
+ }
115
+ if (type === "proforma") {
116
+ return (
117
+ <Document title={`proforma_${invoice?.invoice_number}`}>
118
+ <Page size="A4" style={styles.page}>
119
+ <View style={styles.header}>
120
+ <Text style={styles.h1}>
121
+ {seller_business_credentials?.company_name}
122
+ </Text>
123
+ </View>
124
+ <Text>Proforma invoice</Text>
125
+ </Page>
126
+ </Document>
127
+ );
128
+ } else {
129
+ return (
130
+ <Document title={`invoice_${invoice?.invoice_number}`}>
131
+ <Page size="A4" style={styles.page}>
132
+ <View style={styles.header}>
133
+ {/* <Image style={styles.logo} src={logo_white_square.src} /> */}
134
+ <Text style={styles.h1}>
135
+ {seller_business_credentials?.company_name}
136
+ </Text>
153
137
  </View>
154
- </View>
155
- {/* Invoice number and date */}
156
- <View style={styles.section}>
157
- <View style={styles.row}>
158
- <View style={styles.rowSection}>
159
- <Text style={{ fontStyle: "bold" }}>Invoice number: </Text>
160
138
 
161
- <Text>{invoice?.invoice_number}</Text>
139
+ {/* Invoice */}
140
+ <View style={styles.section}>
141
+ <Text style={styles.h2}>INVOICE</Text>
142
+ </View>
143
+ {/* Customer Details*/}
144
+ <View style={styles.section}>
145
+ <View style={styles.row}>
146
+ <View style={styles.rowSection}>
147
+ <Text style={styles.h3}>BILLING DETAILS</Text>
148
+ <Text>{buyer_business_credentials?.company_name}</Text>
149
+ <Text>
150
+ {invoice?.buyer_first_name} {invoice?.buyer_last_name}
151
+ </Text>
152
+ <Text>
153
+ {buyer_company_address?.street}{" "}
154
+ {buyer_company_address?.street_number}{" "}
155
+ {buyer_company_address?.street_number_addition}
156
+ </Text>
157
+ <Text>
158
+ {buyer_company_address?.postal_code}{" "}
159
+ {buyer_company_address?.city}
160
+ </Text>
161
+ {/* <Text>{invoice?.user_country}</Text> */}
162
+ </View>
163
+ {/* Company Details */}
164
+ <View style={styles.rowSection}>
165
+ <Text style={styles.h3}>FROM</Text>
166
+ <Text>{seller_business_credentials?.company_name}</Text>
167
+ <Text>
168
+ {seller_company_address?.street}{" "}
169
+ {seller_company_address?.street_number}{" "}
170
+ {seller_company_address?.street_number_addition}
171
+ </Text>
172
+ <Text>
173
+ {seller_company_address?.postal_code}{" "}
174
+ {seller_company_address?.city}
175
+ </Text>
176
+ {/* <Text>{invoice?.company_country}</Text> */}
177
+ <Text style={{ fontStyle: "bold", marginTop: 10 }}>
178
+ CoC Number
179
+ </Text>
180
+ <Text>{seller_business_credentials?.coc_number}</Text>
181
+ <Text style={{ fontStyle: "bold", marginTop: 10 }}>
182
+ VAT Number
183
+ </Text>
184
+ <Text>{seller_business_credentials?.vat_number}</Text>
185
+ </View>
162
186
  </View>
163
- {invoice?.customer_reference && (
187
+ </View>
188
+ {/* Invoice number and date */}
189
+ <View style={styles.section}>
190
+ <View style={styles.row}>
164
191
  <View style={styles.rowSection}>
165
- <Text style={{ fontStyle: "bold" }}>Your reference: </Text>
192
+ <Text style={{ fontStyle: "bold" }}>Invoice number: </Text>
166
193
 
167
- <Text>{invoice?.customer_reference}</Text>
194
+ <Text>{invoice?.invoice_number}</Text>
195
+ </View>
196
+ {invoice?.customer_reference && (
197
+ <View style={styles.rowSection}>
198
+ <Text style={{ fontStyle: "bold" }}>Your reference: </Text>
199
+
200
+ <Text>{invoice?.customer_reference}</Text>
201
+ </View>
202
+ )}
203
+ <View style={styles.rowSection}>
204
+ <Text style={{ fontStyle: "bold" }}>Invoice date</Text>
205
+ <Text>{invoice?.invoice_date}</Text>
168
206
  </View>
169
- )}
170
- <View style={styles.rowSection}>
171
- <Text style={{ fontStyle: "bold" }}>Invoice date</Text>
172
- <Text>{invoice?.invoice_date}</Text>
173
207
  </View>
174
208
  </View>
175
- </View>
176
- {/* Invoice resume, products and price calculation */}
177
- <View style={styles.section}>
178
- <Text style={styles.h3}>SUMMARY</Text>
179
- <View style={styles.row}>
180
- {invoice?.admin_items?.length > 0 && (
209
+ {/* Invoice resume, products and price calculation */}
210
+ <View style={styles.section}>
211
+ <Text style={styles.h3}>SUMMARY</Text>
212
+ <View style={styles.row}>
213
+ {invoice?.admin_items?.length > 0 && (
214
+ <View style={styles.productRowSection}>
215
+ <Text style={{ fontSize: "10px", fontStyle: "bold" }}>
216
+ Line Item Number
217
+ </Text>
218
+ </View>
219
+ )}
181
220
  <View style={styles.productRowSection}>
182
221
  <Text style={{ fontSize: "10px", fontStyle: "bold" }}>
183
- Line Item Number
222
+ Title
223
+ </Text>
224
+ </View>
225
+ <View style={styles.productRowSection}>
226
+ <Text style={{ fontSize: "10px", fontStyle: "bold" }}>
227
+ Amount
228
+ </Text>
229
+ </View>
230
+ <View style={styles.productRowSection}>
231
+ <Text style={{ fontSize: "10px", fontStyle: "bold" }}>
232
+ VAT rate
233
+ </Text>
234
+ </View>
235
+ <View style={styles.productRowSection}>
236
+ <Text style={{ fontSize: "10px", fontStyle: "bold" }}>VAT</Text>
237
+ </View>
238
+ <View style={styles.productRowSection}>
239
+ <Text style={{ fontSize: "10px", fontStyle: "bold" }}>
240
+ Excl. VAT
241
+ </Text>
242
+ </View>
243
+ <View style={styles.productRowSection}>
244
+ <Text style={{ fontSize: "10px", fontStyle: "bold" }}>
245
+ Incl. VAT
184
246
  </Text>
185
247
  </View>
186
- )}
187
- <View style={styles.productRowSection}>
188
- <Text style={{ fontSize: "10px", fontStyle: "bold" }}>Title</Text>
189
- </View>
190
- <View style={styles.productRowSection}>
191
- <Text style={{ fontSize: "10px", fontStyle: "bold" }}>
192
- Amount
193
- </Text>
194
- </View>
195
- <View style={styles.productRowSection}>
196
- <Text style={{ fontSize: "10px", fontStyle: "bold" }}>
197
- VAT rate
198
- </Text>
199
- </View>
200
- <View style={styles.productRowSection}>
201
- <Text style={{ fontSize: "10px", fontStyle: "bold" }}>VAT</Text>
202
- </View>
203
- <View style={styles.productRowSection}>
204
- <Text style={{ fontSize: "10px", fontStyle: "bold" }}>
205
- Excl. VAT
206
- </Text>
207
- </View>
208
- <View style={styles.productRowSection}>
209
- <Text style={{ fontSize: "10px", fontStyle: "bold" }}>
210
- Incl. VAT
211
- </Text>
212
248
  </View>
213
- </View>
214
- {invoice?.items?.map((item, index) => {
215
- return (
216
- <Fragment key={index}>
217
- <View style={styles.row}>
218
- <View style={styles.productRowSection}>
219
- <Text style={{ fontSize: "10px" }}>
220
- {"product_title" in item && item.product_title}
221
- {"item_description" in item && item.item_description}
222
- </Text>
223
- </View>
224
- <View style={styles.productRowSection}>
225
- <Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
226
- </View>
227
- <View style={styles.productRowSection}>
228
- <Text style={{ fontSize: "10px" }}>{item.vat_rate} %</Text>{" "}
229
- {/* should be integer */}
230
- </View>
231
- <View style={styles.productRowSection}>
232
- {item.price_excl_vat && item.price_incl_vat && (
249
+ {invoice?.items?.map((item, index) => {
250
+ return (
251
+ <Fragment key={index}>
252
+ <View style={styles.row}>
253
+ <View style={styles.productRowSection}>
233
254
  <Text style={{ fontSize: "10px" }}>
234
- {" "}
235
- {(item.price_incl_vat - item.price_excl_vat)?.toFixed(
236
- 2
237
- )}
255
+ {"product_title" in item && item.product_title}
256
+ {"item_description" in item && item.item_description}
238
257
  </Text>
239
- )}
240
- </View>
241
- <View style={styles.productRowSection}>
242
- <Text style={{ fontSize: "10px" }}>
243
- {item.price_excl_vat?.toFixed(2)}
244
- </Text>
245
- </View>
246
- <View style={styles.productRowSection}>
247
- <Text style={{ fontSize: "10px" }}>
248
- € {item.price_incl_vat?.toFixed(2)}
249
- </Text>
250
- </View>
251
- </View>
252
- </Fragment>
253
- );
254
- })}
255
- {invoice?.admin_items?.map((item, index) => {
256
- return (
257
- <Fragment key={index}>
258
- <View style={styles.row}>
259
- <View style={styles.productRowSection}>
260
- <Text style={{ fontSize: "10px" }}>
261
- {item.line_item_number}
262
- </Text>
263
- </View>
264
- <View style={styles.productRowSection}>
265
- <Text style={{ fontSize: "10px" }}>{item.description}</Text>
266
- </View>
267
- <View style={styles.productRowSection}>
268
- <Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
269
- </View>
270
- <View style={styles.productRowSection}>
271
- <Text style={{ fontSize: "10px" }}>
272
- {item?.price?.vat_rate} %
273
- </Text>
274
- </View>
275
- <View style={styles.productRowSection}>
276
- <Text style={{ fontSize: "10px" }}>
277
- € {item?.price?.vat?.toFixed(2)}
278
- </Text>
279
- </View>
280
- <View style={styles.productRowSection}>
281
- <Text style={{ fontSize: "10px" }}>
282
- € {item?.price?.price?.toFixed(2)}
283
- </Text>
258
+ </View>
259
+ <View style={styles.productRowSection}>
260
+ <Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
261
+ </View>
262
+ <View style={styles.productRowSection}>
263
+ <Text style={{ fontSize: "10px" }}>
264
+ {item.vat_rate} %
265
+ </Text>{" "}
266
+ {/* should be integer */}
267
+ </View>
268
+ <View style={styles.productRowSection}>
269
+ {item.price_excl_vat && item.price_incl_vat && (
270
+ <Text style={{ fontSize: "10px" }}>
271
+ €{" "}
272
+ {(item.price_incl_vat - item.price_excl_vat)?.toFixed(
273
+ 2
274
+ )}
275
+ </Text>
276
+ )}
277
+ </View>
278
+ <View style={styles.productRowSection}>
279
+ <Text style={{ fontSize: "10px" }}>
280
+ {item.price_excl_vat?.toFixed(2)}
281
+ </Text>
282
+ </View>
283
+ <View style={styles.productRowSection}>
284
+ <Text style={{ fontSize: "10px" }}>
285
+ € {item.price_incl_vat?.toFixed(2)}
286
+ </Text>
287
+ </View>
284
288
  </View>
285
- <View style={styles.productRowSection}>
286
- <Text style={{ fontSize: "10px" }}>
287
- € {item?.price?.price_incl_vat?.toFixed(2)}
288
- </Text>
289
+ </Fragment>
290
+ );
291
+ })}
292
+ {invoice?.admin_items?.map((item, index) => {
293
+ return (
294
+ <Fragment key={index}>
295
+ <View style={styles.row}>
296
+ <View style={styles.productRowSection}>
297
+ <Text style={{ fontSize: "10px" }}>
298
+ {item.line_item_number}
299
+ </Text>
300
+ </View>
301
+ <View style={styles.productRowSection}>
302
+ <Text style={{ fontSize: "10px" }}>
303
+ {item.description}
304
+ </Text>
305
+ </View>
306
+ <View style={styles.productRowSection}>
307
+ <Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
308
+ </View>
309
+ <View style={styles.productRowSection}>
310
+ <Text style={{ fontSize: "10px" }}>
311
+ {item?.price?.vat_rate} %
312
+ </Text>
313
+ </View>
314
+ <View style={styles.productRowSection}>
315
+ <Text style={{ fontSize: "10px" }}>
316
+ € {item?.price?.vat?.toFixed(2)}
317
+ </Text>
318
+ </View>
319
+ <View style={styles.productRowSection}>
320
+ <Text style={{ fontSize: "10px" }}>
321
+ € {item?.price?.price?.toFixed(2)}
322
+ </Text>
323
+ </View>
324
+ <View style={styles.productRowSection}>
325
+ <Text style={{ fontSize: "10px" }}>
326
+ € {item?.price?.price_incl_vat?.toFixed(2)}
327
+ </Text>
328
+ </View>
289
329
  </View>
290
- </View>
291
- </Fragment>
292
- );
293
- })}
294
- </View>
295
- {/* Totals */}
296
- <View style={styles.section}>
297
- <Text style={styles.h3}>TOTALS</Text>
298
- <View style={styles.row}>
299
- <View style={styles.productRowSection}></View>
300
- <View style={styles.productRowSection}></View>
301
- <View style={styles.productRowSection}></View>
302
- <View style={styles.productRowSection}>
303
- <Text style={{ fontStyle: "bold" }}>VAT</Text>
304
- </View>
305
- <View style={styles.productRowSection}>
306
- <Text style={{ fontStyle: "bold" }}>Excl. VAT</Text>
307
- </View>
308
- <View style={styles.productRowSection}>
309
- <Text style={{ fontStyle: "bold" }}>Incl. VAT</Text>
310
- </View>
330
+ </Fragment>
331
+ );
332
+ })}
311
333
  </View>
312
- <View style={styles.row}>
313
- <View style={styles.productRowSection}></View>
314
- <View style={styles.productRowSection}></View>
315
- <View style={styles.productRowSection}></View>
316
- <View style={styles.productRowSection}>
317
- <Text>€ {invoice?.VAT_total?.toFixed(2)}</Text>
318
- </View>
319
- <View style={styles.productRowSection}>
320
- <Text>€ {invoice?.total_excl_vat?.toFixed(2)}</Text>
334
+ {/* Totals */}
335
+ <View style={styles.section}>
336
+ <Text style={styles.h3}>TOTALS</Text>
337
+ <View style={styles.row}>
338
+ <View style={styles.productRowSection}></View>
339
+ <View style={styles.productRowSection}></View>
340
+ <View style={styles.productRowSection}></View>
341
+ <View style={styles.productRowSection}>
342
+ <Text style={{ fontStyle: "bold" }}>VAT</Text>
343
+ </View>
344
+ <View style={styles.productRowSection}>
345
+ <Text style={{ fontStyle: "bold" }}>Excl. VAT</Text>
346
+ </View>
347
+ <View style={styles.productRowSection}>
348
+ <Text style={{ fontStyle: "bold" }}>Incl. VAT</Text>
349
+ </View>
321
350
  </View>
322
- <View style={styles.productRowSection}>
323
- <Text>€ {invoice?.total_incl_vat?.toFixed(2)}</Text>
351
+ <View style={styles.row}>
352
+ <View style={styles.productRowSection}></View>
353
+ <View style={styles.productRowSection}></View>
354
+ <View style={styles.productRowSection}></View>
355
+ <View style={styles.productRowSection}>
356
+ <Text>€ {invoice?.VAT_total?.toFixed(2)}</Text>
357
+ </View>
358
+ <View style={styles.productRowSection}>
359
+ <Text>€ {invoice?.total_excl_vat?.toFixed(2)}</Text>
360
+ </View>
361
+ <View style={styles.productRowSection}>
362
+ <Text>€ {invoice?.total_incl_vat?.toFixed(2)}</Text>
363
+ </View>
324
364
  </View>
325
365
  </View>
326
- </View>
327
- <View style={styles.section}>
328
- <Text
329
- style={{ ...styles.h3, border: "2px solid black", padding: 10 }}
330
- >
331
- Total Due: € {invoice?.total_incl_vat?.toFixed(2)}
332
- </Text>
333
- </View>
366
+ <View style={styles.section}>
367
+ <Text
368
+ style={{ ...styles.h3, border: "2px solid black", padding: 10 }}
369
+ >
370
+ Total Due: € {invoice?.total_incl_vat?.toFixed(2)}
371
+ </Text>
372
+ </View>
334
373
 
335
- {/* Company disclaimer */}
336
- </Page>
337
- </Document>
338
- );
374
+ {/* Company disclaimer */}
375
+ </Page>
376
+ </Document>
377
+ );
378
+ }
339
379
  }
340
380
 
341
381
  export function InvoiceDownloadLink({ invoice }: { invoice: Invoice }) {
@@ -68,6 +68,7 @@ export interface Invoice {
68
68
  admin_items: AdminInvoiceItem[];
69
69
  customer?: number;
70
70
  comments?: string;
71
+ type: `invoice` | `credit` | `proforma`;
71
72
  }
72
73
 
73
74
  // TODO a copy of this exists in the umwd project, consider moving to a common place