fix: change default invoice mail message

This commit is contained in:
Ahmed Bouhuolia
2024-11-03 20:36:52 +02:00
parent 48795748d8
commit f2fcc3a649
2 changed files with 101 additions and 101 deletions

View File

@@ -1,20 +1,19 @@
import config from '@/config'; import config from '@/config';
export const DEFAULT_INVOICE_MAIL_SUBJECT = export const DEFAULT_INVOICE_MAIL_SUBJECT =
'Invoice {Invoice Number} from {Company Name}'; 'Invoice {Invoice Number} from {Company Name} for {Customer Name}';
export const DEFAULT_INVOICE_MAIL_CONTENT = ` export const DEFAULT_INVOICE_MAIL_CONTENT = `Hi {Customer Name},
<p>Dear {Customer Name}</p>
<p>Thank you for your business, You can view or print your invoice from attachements.</p>
<p>
Invoice <strong>#{Invoice Number}</strong><br />
Due Date : <strong>{Invoice Due Date}</strong><br />
Amount : <strong>{Invoice Amount}</strong></br />
</p>
<p> Here's invoice # {Invoice Number} for {Invoice Amount}
<i>Regards</i><br />
<i>{Company Name}</i> The amount outstanding of {Invoice Due Amount} is due on {Invoice Due Date}.
</p>
From your online payment page you can print a PDF or view your outstanding bills.
If you have any questions, please let us know.
Thanks,
{Company Name}
`; `;
export const DEFAULT_INVOICE_REMINDER_MAIL_SUBJECT = export const DEFAULT_INVOICE_REMINDER_MAIL_SUBJECT =

View File

@@ -95,109 +95,109 @@ export const InvoicePaymentEmail: React.FC<
items, items,
}) => { }) => {
return ( return (
<Html lang="en"> <Html lang="en">
<Head /> <Head />
<Preview>{preview}</Preview> <Preview>{preview}</Preview>
<Tailwind> <Tailwind>
<Body style={bodyStyle}> <Body style={bodyStyle}>
<Container style={containerStyle}> <Container style={containerStyle}>
<Section style={mainSectionStyle}> <Section style={mainSectionStyle}>
{companyLogoUri && ( {companyLogoUri && (
<Section style={logoSectionStyle}> <Section style={logoSectionStyle}>
<div <div
style={{ style={{
...companyLogoStyle, ...companyLogoStyle,
backgroundImage: `url("${companyLogoUri}")`, backgroundImage: `url("${companyLogoUri}")`,
}} }}
> >
Image Image
</div> </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> </Section>
)}
<Section style={headerInfoStyle}> <Text style={invoiceMessageStyle}>{invoiceMessage}</Text>
<Row> <Button
<Heading style={invoiceCompanyNameStyle}> href={viewInvoiceButtonUrl}
{companyName} style={{
</Heading> ...viewInvoiceButtonStyle,
</Row> backgroundColor: primaryColor,
<Row> }}
<Text style={invoiceAmountStyle}>{invoiceAmount}</Text> >
</Row> {viewInvoiceButtonLabel}
<Row> </Button>
<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> <Section style={totalsSectionStyle}>
<Button {items.map((item, index) => (
href={viewInvoiceButtonUrl} <Row key={index} style={itemLineRowStyle}>
style={{ <Column width={'50%'}>
...viewInvoiceButtonStyle, <Text style={listItemLabelStyle}>{item.label}</Text>
backgroundColor: primaryColor, </Column>
}}
>
{viewInvoiceButtonLabel}
</Button>
<Section style={totalsSectionStyle}> <Column width={'50%'}>
{items.map((item, index) => ( <Text style={listItemAmountStyle}>
<Row key={index} style={itemLineRowStyle}> {item.quantity} x {item.rate}
</Text>
</Column>
</Row>
))}
<Row style={dueAmounLineRowStyle}>
<Column width={'50%'}> <Column width={'50%'}>
<Text style={listItemLabelStyle}>{item.label}</Text> <Text style={dueAmountLineItemLabelStyle}>
{dueAmountLabel}
</Text>
</Column> </Column>
<Column width={'50%'}> <Column width={'50%'}>
<Text style={listItemAmountStyle}> <Text style={dueAmountLineItemAmountStyle}>
{item.quantity} x {item.rate} {dueAmount}
</Text> </Text>
</Column> </Column>
</Row> </Row>
))}
<Row style={dueAmounLineRowStyle}> <Row style={totalLineRowStyle}>
<Column width={'50%'}> <Column width={'50%'}>
<Text style={dueAmountLineItemLabelStyle}> <Text style={totalLineItemLabelStyle}>{totalLabel}</Text>
{dueAmountLabel} </Column>
</Text>
</Column>
<Column width={'50%'}> <Column width={'50%'}>
<Text style={dueAmountLineItemAmountStyle}> <Text style={totalLineItemAmountStyle}>{total}</Text>
{dueAmount} </Column>
</Text> </Row>
</Column> </Section>
</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>
</Section> </Container>
</Container> </Body>
</Body> </Tailwind>
</Tailwind> </Html>
</Html> );
); };
};
export const renderInvoicePaymentEmail = (props: InvoicePaymentEmailProps) => { export const renderInvoicePaymentEmail = (props: InvoicePaymentEmailProps) => {
return render(<InvoicePaymentEmail {...props} />); return render(<InvoicePaymentEmail {...props} />);
@@ -274,6 +274,7 @@ const invoiceMessageStyle: CSSProperties = {
whiteSpace: 'pre-line', whiteSpace: 'pre-line',
color: '#252A31', color: '#252A31',
margin: '0 0 20px 0', margin: '0 0 20px 0',
lineHeight: '20px',
}; };
const dueAmounLineRowStyle: CSSProperties = { const dueAmounLineRowStyle: CSSProperties = {