QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-21 15:20:34 +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; companyName?: string;
companyLogoUri?: string; companyLogoUri?: string;
// # Colors
primaryColor?: string;
// # Invoice amount // # Invoice amount
invoiceAmount: string; invoiceAmount: string;
@@ -61,6 +64,9 @@ export const InvoicePaymentEmail: React.FC<
companyName, companyName,
companyLogoUri, companyLogoUri,
// # Colors
primaryColor = 'rgb(0, 82, 204)',
// # Invoice amount // # Invoice amount
invoiceAmount, invoiceAmount,
@@ -98,6 +104,19 @@ export const InvoicePaymentEmail: React.FC<
<Body style={bodyStyle}> <Body style={bodyStyle}>
<Container style={containerStyle}> <Container style={containerStyle}>
<Section style={mainSectionStyle}> <Section style={mainSectionStyle}>
{companyLogoUri && (
<Section style={logoSectionStyle}>
<div
style={{
...companyLogoStyle,
backgroundImage: `url("${companyLogoUri}")`,
}}
>
Image
</div>
</Section>
)}
<Section style={headerInfoStyle}> <Section style={headerInfoStyle}>
<Row> <Row>
<Heading style={invoiceCompanyNameStyle}> <Heading style={invoiceCompanyNameStyle}>
@@ -125,7 +144,10 @@ export const InvoicePaymentEmail: React.FC<
<Text style={invoiceMessageStyle}>{invoiceMessage}</Text> <Text style={invoiceMessageStyle}>{invoiceMessage}</Text>
<Button <Button
href={viewInvoiceButtonUrl} href={viewInvoiceButtonUrl}
style={viewInvoiceButtonStyle} style={{
...viewInvoiceButtonStyle,
backgroundColor: primaryColor,
}}
> >
{viewInvoiceButtonLabel} {viewInvoiceButtonLabel}
</Button> </Button>
@@ -232,9 +254,8 @@ const viewInvoiceButtonStyle: CSSProperties = {
cursor: 'pointer', cursor: 'pointer',
textAlign: 'center', textAlign: 'center',
fontSize: 16, fontSize: 16,
padding: '0 15px', padding: '10px 15px',
height: '38px', lineHeight: '1',
lineHeight: '38px',
backgroundColor: 'rgb(0, 82, 204)', backgroundColor: 'rgb(0, 82, 204)',
color: '#fff', color: '#fff',
borderRadius: '5px', borderRadius: '5px',
@@ -294,3 +315,20 @@ const totalsSectionStyle = {
marginTop: '20px', marginTop: '20px',
borderTop: '1px solid #D9D9D9', 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',
};