Skip to content

Commit b948666

Browse files
pontusabpontusab
committed
Lables
1 parent 7e0fb66 commit b948666

File tree

4 files changed

+261
-261
lines changed

4 files changed

+261
-261
lines changed

‎packages/invoice/src/templates/html/components/meta.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function Meta({ template, invoiceNumber, issueDate, dueDate }: Props) {
2323
<div className="flex space-x-1 items-center">
2424
<div className="flex items-center flex-shrink-0 space-x-1">
2525
<span className="truncate font-mono text-[11px] text-[#878787]">
26-
{template.invoiceNoLabel}:
26+
{template.invoiceNoLabel ? `${template.invoiceNoLabel}:` : ""}
2727
</span>
2828
<span className="text-[11px] font-mono flex-shrink-0">
2929
{invoiceNumber}
@@ -36,7 +36,7 @@ export function Meta({ template, invoiceNumber, issueDate, dueDate }: Props) {
3636
<div className="flex space-x-1 items-center">
3737
<div className="flex items-center flex-shrink-0 space-x-1">
3838
<span className="truncate font-mono text-[11px] text-[#878787]">
39-
{template.issueDateLabel}:
39+
{template.issueDateLabel ? `${template.issueDateLabel}:` : ""}
4040
</span>
4141
<span className="text-[11px] font-mono flex-shrink-0">
4242
{issueDate
@@ -55,7 +55,7 @@ export function Meta({ template, invoiceNumber, issueDate, dueDate }: Props) {
5555
<div className="flex space-x-1 items-center">
5656
<div className="flex items-center flex-shrink-0 space-x-1">
5757
<span className="truncate font-mono text-[11px] text-[#878787]">
58-
{template.dueDateLabel}:
58+
{template.dueDateLabel ? `${template.dueDateLabel}:` : ""}
5959
</span>
6060
<span className="text-[11px] font-mono flex-shrink-0">
6161
{dueDate

‎packages/invoice/src/templates/html/index.tsx‎

Lines changed: 114 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -7,130 +7,130 @@ import { Meta } from "./components/meta";
77
import { Summary } from "./components/summary";
88

99
type Props = {
10-
data: Invoice;
11-
width: number;
12-
height: number;
10+
data: Invoice;
11+
width: number;
12+
height: number;
1313
};
1414

1515
export function HtmlTemplate({ data, width, height }: Props) {
16-
if (!data) {
17-
return null;
18-
}
16+
if (!data) {
17+
return null;
18+
}
1919

20-
const {
21-
invoiceNumber,
22-
issueDate,
23-
dueDate,
24-
template,
25-
lineItems,
26-
customerDetails,
27-
fromDetails,
28-
paymentDetails,
29-
noteDetails,
30-
currency,
31-
discount,
32-
customerName,
33-
topBlock,
34-
bottomBlock,
35-
} = data;
20+
const {
21+
invoiceNumber,
22+
issueDate,
23+
dueDate,
24+
template,
25+
lineItems,
26+
customerDetails,
27+
fromDetails,
28+
paymentDetails,
29+
noteDetails,
30+
currency,
31+
discount,
32+
customerName,
33+
topBlock,
34+
bottomBlock,
35+
} = data;
3636

37-
return (
38-
<ScrollArea
39-
className="bg-background border border-border w-full md:w-auto h-full [&>div]:h-full"
40-
style={{
41-
width: "100%",
42-
maxWidth: width,
43-
height,
44-
}}
45-
hideScrollbar
46-
>
47-
<div
48-
className="p-4 sm:p-6 md:p-8 h-full flex flex-col"
49-
style={{ minHeight: height - 5 }}
50-
>
51-
<div className="flex justify-between">
52-
<Meta
53-
template={template}
54-
invoiceNumber={invoiceNumber}
55-
issueDate={issueDate}
56-
dueDate={dueDate}
57-
/>
37+
return (
38+
<ScrollArea
39+
className="bg-background border border-border w-full md:w-auto h-full [&>div]:h-full"
40+
style={{
41+
width: "100%",
42+
maxWidth: width,
43+
height,
44+
}}
45+
hideScrollbar
46+
>
47+
<div
48+
className="p-4 sm:p-6 md:p-8 h-full flex flex-col"
49+
style={{ minHeight: height - 5 }}
50+
>
51+
<div className="flex justify-between">
52+
<Meta
53+
template={template}
54+
invoiceNumber={invoiceNumber}
55+
issueDate={issueDate}
56+
dueDate={dueDate}
57+
/>
5858

59-
{template.logoUrl && (
60-
<Logo logo={template.logoUrl} customerName={customerName || ""} />
61-
)}
62-
</div>
59+
{template.logoUrl && (
60+
<Logo logo={template.logoUrl} customerName={customerName || ""} />
61+
)}
62+
</div>
6363

64-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mt-6 mb-4">
65-
<div>
66-
<p className="text-[11px] text-[#878787] font-mono mb-2 block">
67-
{template.fromLabel}
68-
</p>
69-
<EditorContent content={fromDetails} />
70-
</div>
71-
<div className="mt-4 md:mt-0">
72-
<p className="text-[11px] text-[#878787] font-mono mb-2 block">
73-
{template.customerLabel}
74-
</p>
75-
<EditorContent content={customerDetails} />
76-
</div>
77-
</div>
64+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mt-6 mb-4">
65+
<div>
66+
<p className="text-[11px] text-[#878787] font-mono mb-2 block">
67+
{template.fromLabel}
68+
</p>
69+
<EditorContent content={fromDetails} />
70+
</div>
71+
<div className="mt-4 md:mt-0">
72+
<p className="text-[11px] text-[#878787] font-mono mb-2 block">
73+
{template.customerLabel}
74+
</p>
75+
<EditorContent content={customerDetails} />
76+
</div>
77+
</div>
7878

79-
<EditorContent content={topBlock} />
79+
<EditorContent content={topBlock} />
8080

81-
<LineItems
82-
lineItems={lineItems}
83-
currency={currency}
84-
descriptionLabel={template.descriptionLabel}
85-
quantityLabel={template.quantityLabel}
86-
priceLabel={template.priceLabel}
87-
totalLabel={template.totalLabel}
88-
includeDecimals={template.includeDecimals}
89-
locale={template.locale}
90-
includeUnits={template.includeUnits}
91-
/>
81+
<LineItems
82+
lineItems={lineItems}
83+
currency={currency}
84+
descriptionLabel={template.descriptionLabel}
85+
quantityLabel={template.quantityLabel}
86+
priceLabel={template.priceLabel}
87+
totalLabel={template.totalLabel}
88+
includeDecimals={template.includeDecimals}
89+
locale={template.locale}
90+
includeUnits={template.includeUnits}
91+
/>
9292

93-
<div className="mt-10 md:mt-12 flex justify-end mb-6 md:mb-8">
94-
<Summary
95-
includeVat={template.includeVat}
96-
includeTax={template.includeTax}
97-
taxRate={template.taxRate}
98-
vatRate={template.vatRate}
99-
currency={currency}
100-
vatLabel={template.vatLabel}
101-
taxLabel={template.taxLabel}
102-
totalLabel={template.totalSummaryLabel}
103-
lineItems={lineItems}
104-
includeDiscount={template.includeDiscount}
105-
discountLabel={template.discountLabel}
106-
discount={discount}
107-
locale={template.locale}
108-
includeDecimals={template.includeDecimals}
109-
subtotalLabel={template.subtotalLabel}
110-
/>
111-
</div>
93+
<div className="mt-10 md:mt-12 flex justify-end mb-6 md:mb-8">
94+
<Summary
95+
includeVat={template.includeVat}
96+
includeTax={template.includeTax}
97+
taxRate={template.taxRate}
98+
vatRate={template.vatRate}
99+
currency={currency}
100+
vatLabel={template.vatLabel}
101+
taxLabel={template.taxLabel}
102+
totalLabel={template.totalSummaryLabel}
103+
lineItems={lineItems}
104+
includeDiscount={template.includeDiscount}
105+
discountLabel={template.discountLabel}
106+
discount={discount}
107+
locale={template.locale}
108+
includeDecimals={template.includeDecimals}
109+
subtotalLabel={template.subtotalLabel}
110+
/>
111+
</div>
112112

113-
<div className="flex flex-col space-y-6 md:space-y-8 mt-auto">
114-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
115-
<div>
116-
<p className="text-[11px] text-[#878787] font-mono mb-2 block">
117-
{template.paymentLabel}
118-
</p>
119-
<EditorContent content={paymentDetails} />
120-
</div>
121-
{noteDetails && (
122-
<div className="mt-4 md:mt-0">
123-
<p className="text-[11px] text-[#878787] font-mono mb-2 block">
124-
{template.noteLabel}
125-
</p>
126-
<EditorContent content={noteDetails} />
127-
</div>
128-
)}
129-
</div>
113+
<div className="flex flex-col space-y-6 md:space-y-8 mt-auto">
114+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
115+
<div>
116+
<p className="text-[11px] text-[#878787] font-mono mb-2 block">
117+
{template.paymentLabel}
118+
</p>
119+
<EditorContent content={paymentDetails} />
120+
</div>
121+
{noteDetails && (
122+
<div className="mt-4 md:mt-0">
123+
<p className="text-[11px] text-[#878787] font-mono mb-2 block">
124+
{template.noteLabel}
125+
</p>
126+
<EditorContent content={noteDetails} />
127+
</div>
128+
)}
129+
</div>
130130

131-
<EditorContent content={bottomBlock} />
132-
</div>
133-
</div>
134-
</ScrollArea>
135-
);
131+
<EditorContent content={bottomBlock} />
132+
</div>
133+
</div>
134+
</ScrollArea>
135+
);
136136
}

‎packages/invoice/src/templates/pdf/components/meta.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ export function Meta({
3333
<View style={{ flexDirection: "column", gap: 4 }}>
3434
<View style={{ flexDirection: "row", alignItems: "center" }}>
3535
<Text style={{ fontSize: 9, fontWeight: 500, marginRight: 2 }}>
36-
{invoiceNoLabel}:
36+
{invoiceNoLabel ? `${invoiceNoLabel}:` : ""}
3737
</Text>
3838
<Text style={{ fontSize: 9 }}>{invoiceNo}</Text>
3939
</View>
4040
<View style={{ flexDirection: "row", alignItems: "center" }}>
4141
<Text style={{ fontSize: 9, fontWeight: 500, marginRight: 2 }}>
42-
{issueDateLabel}:
42+
{issueDateLabel ? `${issueDateLabel}:` : ""}
4343
</Text>
4444
<Text style={{ fontSize: 9 }}>
4545
{issueDate
@@ -49,7 +49,7 @@ export function Meta({
4949
</View>
5050
<View style={{ flexDirection: "row", alignItems: "center" }}>
5151
<Text style={{ fontSize: 9, fontWeight: 500, marginRight: 2 }}>
52-
{dueDateLabel}:
52+
{dueDateLabel ? `${dueDateLabel}:` : ""}
5353
</Text>
5454
<Text style={{ fontSize: 9 }}>
5555
{dueDate ? format(new TZDate(dueDate, timezone), dateFormat) : ""}

0 commit comments

Comments
 (0)