Skip to content

Commit

Permalink
Merge pull request #737 from bigcapitalhq/change-default-invoice-mail…
Browse files Browse the repository at this point in the history 
…-message

fix: change default invoice mail message
  • Loading branch information
@abouolia
abouolia authored Nov 3, 2024
2 parents 4879574 + f2fcc3a commit 638bd95
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 104 deletions.
25 changes: 12 additions & 13 deletions packages/server/src/services/Sales/Invoices/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import config from '@/config';

export const DEFAULT_INVOICE_MAIL_SUBJECT =
'Invoice {Invoice Number} from {Company Name}';
export const DEFAULT_INVOICE_MAIL_CONTENT = `
<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>
'Invoice {Invoice Number} from {Company Name} for {Customer Name}';
export const DEFAULT_INVOICE_MAIL_CONTENT = `Hi {Customer Name},
<p>
<i>Regards</i><br />
<i>{Company Name}</i>
</p>
Here's invoice # {Invoice Number} for {Invoice Amount}
The amount outstanding of {Invoice Due Amount} is due on {Invoice Due Date}.
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 =
Expand Down
183 changes: 92 additions & 91 deletions shared/email-components/src/lib/InvoicePaymentEmail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,109 +95,109 @@ 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>
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>
)}

<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}>
<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={listItemLabelStyle}>{item.label}</Text>
<Text style={dueAmountLineItemLabelStyle}>
{dueAmountLabel}
</Text>
</Column>

<Column width={'50%'}>
<Text style={listItemAmountStyle}>
{item.quantity} x {item.rate}
<Text style={dueAmountLineItemAmountStyle}>
{dueAmount}
</Text>
</Column>
</Row>
))}

<Row style={dueAmounLineRowStyle}>
<Column width={'50%'}>
<Text style={dueAmountLineItemLabelStyle}>
{dueAmountLabel}
</Text>
</Column>
<Row style={totalLineRowStyle}>
<Column width={'50%'}>
<Text style={totalLineItemLabelStyle}>{totalLabel}</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>
<Column width={'50%'}>
<Text style={totalLineItemAmountStyle}>{total}</Text>
</Column>
</Row>
</Section>
</Section>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
};
</Container>
</Body>
</Tailwind>
</Html>
);
};

export const renderInvoicePaymentEmail = (props: InvoicePaymentEmailProps) => {
return render(<InvoicePaymentEmail {...props} />);
Expand Down Expand Up @@ -274,6 +274,7 @@ const invoiceMessageStyle: CSSProperties = {
whiteSpace: 'pre-line',
color: '#252A31',
margin: '0 0 20px 0',
lineHeight: '20px',
};

const dueAmounLineRowStyle: CSSProperties = {
Expand Down

0 comments on commit 638bd95

Please sign in to comment.