diff --git a/packages/server/src/services/Sales/Invoices/constants.ts b/packages/server/src/services/Sales/Invoices/constants.ts index cff791b3c..0e2b9989c 100644 --- a/packages/server/src/services/Sales/Invoices/constants.ts +++ b/packages/server/src/services/Sales/Invoices/constants.ts @@ -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 = ` -

Dear {Customer Name}

-

Thank you for your business, You can view or print your invoice from attachements.

-

-Invoice #{Invoice Number}
-Due Date : {Invoice Due Date}
-Amount : {Invoice Amount}
-

+ 'Invoice {Invoice Number} from {Company Name} for {Customer Name}'; +export const DEFAULT_INVOICE_MAIL_CONTENT = `Hi {Customer Name}, -

-Regards
-{Company Name} -

+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 = diff --git a/shared/email-components/src/lib/InvoicePaymentEmail.tsx b/shared/email-components/src/lib/InvoicePaymentEmail.tsx index 905144df9..bbd062b85 100644 --- a/shared/email-components/src/lib/InvoicePaymentEmail.tsx +++ b/shared/email-components/src/lib/InvoicePaymentEmail.tsx @@ -95,109 +95,109 @@ export const InvoicePaymentEmail: React.FC< items, }) => { - return ( - - - {preview} - - - - -
- {companyLogoUri && ( -
-
- Image -
+ return ( + + + {preview} + + + + +
+ {companyLogoUri && ( +
+
+ Image +
+
+ )} + +
+ + + {companyName} + + + + {invoiceAmount} + + + + {invoiceNumberLabel?.replace( + '{invoiceNumber}', + invoiceNumber + )} + + + + + {dueDateLabel.replace('{dueDate}', dueDate)} + +
- )} - -
- - - {companyName} - - - - {invoiceAmount} - - - - {invoiceNumberLabel?.replace( - '{invoiceNumber}', - invoiceNumber - )} - - - - - {dueDateLabel.replace('{dueDate}', dueDate)} - - -
- {invoiceMessage} - - -
- {items.map((item, index) => ( - + {invoiceMessage} + + +
+ {items.map((item, index) => ( + + + {item.label} + + + + + {item.quantity} x {item.rate} + + + + ))} + + - {item.label} + + {dueAmountLabel} + - - {item.quantity} x {item.rate} + + {dueAmount} - ))} - - - - {dueAmountLabel} - - + + + {totalLabel} + - - - {dueAmount} - - - - - - - {totalLabel} - - - - {total} - - + + {total} + + +
-
- - - - - ); -}; + + + + + ); + }; export const renderInvoicePaymentEmail = (props: InvoicePaymentEmailProps) => { return render(); @@ -274,6 +274,7 @@ const invoiceMessageStyle: CSSProperties = { whiteSpace: 'pre-line', color: '#252A31', margin: '0 0 20px 0', + lineHeight: '20px', }; const dueAmounLineRowStyle: CSSProperties = {