QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 12:50:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: invoice payment email template

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-10-27 17:20:48 +02:00
parent 01cc0568f9
commit 289f40014e
1 changed files with 42 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
shared/email-components/src/lib/InvoicePaymentEmail.tsx
View File

@@ -22,6 +22,9 @@ export interface InvoicePaymentEmailProps {
companyName?: string;
companyLogoUri?: string;
// # Colors
primaryColor?: string;
// # Invoice amount
invoiceAmount: string;
@@ -61,6 +64,9 @@ export const InvoicePaymentEmail: React.FC<
companyName,
companyLogoUri,
// # Colors
primaryColor = 'rgb(0, 82, 204)',
// # Invoice amount
invoiceAmount,
@@ -98,6 +104,19 @@ export const InvoicePaymentEmail: React.FC<
<Body style={bodyStyle}>
<Container style={containerStyle}>
<Section style={mainSectionStyle}>
{companyLogoUri && (
<Section style={logoSectionStyle}>
<div
style={{
...companyLogoStyle,
backgroundImage: `url("${companyLogoUri}")`,
}}
>
Image
</div>
</Section>
)}
<Section style={headerInfoStyle}>
<Row>
<Heading style={invoiceCompanyNameStyle}>
@@ -125,7 +144,10 @@ export const InvoicePaymentEmail: React.FC<
<Text style={invoiceMessageStyle}>{invoiceMessage}</Text>
<Button
href={viewInvoiceButtonUrl}
style={viewInvoiceButtonStyle}
style={{
...viewInvoiceButtonStyle,
backgroundColor: primaryColor,
}}
>
{viewInvoiceButtonLabel}
</Button>
@@ -232,9 +254,8 @@ const viewInvoiceButtonStyle: CSSProperties = {
cursor: 'pointer',
textAlign: 'center',
fontSize: 16,
padding: '0 15px',
height: '38px',
lineHeight: '38px',
padding: '10px 15px',
lineHeight: '1',
backgroundColor: 'rgb(0, 82, 204)',
color: '#fff',
borderRadius: '5px',
@@ -294,3 +315,20 @@ const totalsSectionStyle = {
marginTop: '20px',
borderTop: '1px solid #D9D9D9',
};
const logoSectionStyle = {
marginBottom: '15px',
};
const companyLogoStyle = {
height: 90,
width: 90,
borderRadius: '3px',
marginLeft: 'auto',
marginRight: 'auto',
textIndent: '-999999px',
overflow: 'hidden',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: 'contain',
};