QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 05:40:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: wip email templates

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-11-19 11:56:52 +02:00
parent 7e65f3f642
commit 2c54092591
12 changed files with 626 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,6 +14,7 @@ import {
render,
} from '@react-email/components';
import { CSSProperties } from 'react';
import { EmailTemplateLayout } from './EmailTemplateLayout';
export interface InvoicePaymentEmailProps {
preview: string;
@@ -96,106 +97,90 @@ export const InvoicePaymentEmail: React.FC<
items,
}) => {
return (
<Html lang="en">
<Head />
<Preview>{preview}</Preview>
<Tailwind>
<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}>
{companyName}
</Heading>
</Row>
<Row>
<Text style={invoiceAmountStyle}>{invoiceAmount}</Text>
</Row>
<Row>
<Text style={invoiceNumberStyle}>
{invoiceNumberLabel?.replace(
'{invoiceNumber}',
invoiceNumber
)}
</Text>
</Row>
<Row>
<Text style={invoiceDateStyle}>
{dueDateLabel.replace('{dueDate}', dueDate)}
</Text>
</Row>
</Section>
<Text style={invoiceMessageStyle}>{invoiceMessage}</Text>
<Button
href={viewInvoiceButtonUrl}
<EmailTemplateLayout preview={preview}>
<Container style={containerStyle}>
<Section style={mainSectionStyle}>
{companyLogoUri && (
<Section style={logoSectionStyle}>
<div
style={{
...viewInvoiceButtonStyle,
backgroundColor: primaryColor,
...companyLogoStyle,
backgroundImage: `url("${companyLogoUri}")`,
}}
>
{viewInvoiceButtonLabel}
</Button>
<Section style={totalsSectionStyle}>
{items.map((item, index) => (
<Row key={index} style={itemLineRowStyle}>
<Column width={'50%'}>
<Text style={listItemLabelStyle}>{item.label}</Text>
</Column>
<Column width={'50%'}>
<Text style={listItemAmountStyle}>
{item.quantity} x {item.rate}
</Text>
</Column>
</Row>
))}
<Row style={dueAmounLineRowStyle}>
<Column width={'50%'}>
<Text style={dueAmountLineItemLabelStyle}>
{dueAmountLabel}
</Text>
</Column>
<Column width={'50%'}>
<Text style={dueAmountLineItemAmountStyle}>
{dueAmount}
</Text>
</Column>
</Row>
<Row style={totalLineRowStyle}>
<Column width={'50%'}>
<Text style={totalLineItemLabelStyle}>{totalLabel}</Text>
</Column>
<Column width={'50%'}>
<Text style={totalLineItemAmountStyle}>{total}</Text>
</Column>
</Row>
</Section>
></div>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
)}
<Section style={headerInfoStyle}>
<Row>
<Heading style={invoiceCompanyNameStyle}>{companyName}</Heading>
</Row>
<Row>
<Text style={invoiceAmountStyle}>{invoiceAmount}</Text>
</Row>
<Row>
<Text style={invoiceNumberStyle}>
{invoiceNumberLabel?.replace('{invoiceNumber}', invoiceNumber)}
</Text>
</Row>
<Row>
<Text style={invoiceDateStyle}>
{dueDateLabel.replace('{dueDate}', dueDate)}
</Text>
</Row>
</Section>
<Text style={invoiceMessageStyle}>{invoiceMessage}</Text>
<Button
href={viewInvoiceButtonUrl}
style={{
...viewInvoiceButtonStyle,
backgroundColor: primaryColor,
}}
>
{viewInvoiceButtonLabel}
</Button>
<Section style={totalsSectionStyle}>
{items.map((item, index) => (
<Row key={index} style={itemLineRowStyle}>
<Column width={'50%'}>
<Text style={listItemLabelStyle}>{item.label}</Text>
</Column>
<Column width={'50%'}>
<Text style={listItemAmountStyle}>
{item.quantity} x {item.rate}
</Text>
</Column>
</Row>
))}
<Row style={dueAmounLineRowStyle}>
<Column width={'50%'}>
<Text style={dueAmountLineItemLabelStyle}>
{dueAmountLabel}
</Text>
</Column>
<Column width={'50%'}>
<Text style={dueAmountLineItemAmountStyle}>{dueAmount}</Text>
</Column>
</Row>
<Row style={totalLineRowStyle}>
<Column width={'50%'}>
<Text style={totalLineItemLabelStyle}>{totalLabel}</Text>
</Column>
<Column width={'50%'}>
<Text style={totalLineItemAmountStyle}>{total}</Text>
</Column>
</Row>
</Section>
</Section>
</Container>
</EmailTemplateLayout>
);
};
@@ -203,14 +188,6 @@ export const renderInvoicePaymentEmail = (props: InvoicePaymentEmailProps) => {
return render(<InvoicePaymentEmail {...props} />);
};
const bodyStyle: CSSProperties = {
backgroundColor: '#F5F5F5',
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
padding: '40px 0',
};
const containerStyle: CSSProperties = {
backgroundColor: '#fff',
width: '100%',