mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-20 23:00:34 +00:00
fix: change default invoice mail message
This commit is contained in:
@@ -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 =
|
||||||
|
|||||||
@@ -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 = {
|
||||||
|
|||||||
Reference in New Issue
Block a user