feat: link discount to mail receipts

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { x } from '@xstyled/emotion';
 import { lighten } from 'polished';
 import { Group, Stack, StackProps } from '@/components';
+import { isEmpty } from 'lodash';
 
 export interface InvoiceMailReceiptProps extends StackProps {
   // # Company
@@ -16,6 +17,18 @@ export interface InvoiceMailReceiptProps extends StackProps {
   dueDate: string;
   dueDateLabel?: string;
 
+  // # Subtotal
+  subtotal: string;
+  subtotalLabel?: string;
+
+  // # Discount amount
+  discount?: string;
+  discountLabel?: string;
+
+  // # Adjustment
+  adjustment?: string;
+  adjustmentLabel?: string;
+
   // # Due amount
   dueAmountLabel?: string;
   dueAmount: string;
@@ -52,14 +65,26 @@ export function InvoiceMailReceipt({
   dueDate,
   dueDateLabel = 'Due',
 
-  // # Due amount
-  dueAmountLabel = 'Due Amount',
-  dueAmount,
+  // # Subtotal
+  subtotal,
+  subtotalLabel = 'Subtotal',
+
+  // # Discount amount
+  discount,
+  discountLabel = 'Discount',
+
+  // # Adjustment
+  adjustment,
+  adjustmentLabel = 'Adjustment',
 
   // # Total
   total,
   totalLabel = 'Total',
 
+  // # Due amount
+  dueAmountLabel = 'Due Amount',
+  dueAmount,
+
   // # Invoice number
   invoiceNumber,
   invoiceNumberLabel = 'Invoice #',
@@ -166,6 +191,53 @@ export function InvoiceMailReceipt({
           </Group>
         ))}
 
+        {/*---- Subtotal ----*/}
+        <Group
+          h={'40px'}
+          position={'apart'}
+          borderBottomStyle="solid"
+          borderBottomWidth={'1px'}
+          borderColor={'#000'}
+        >
+          <x.span fontWeight={500}>{subtotalLabel}</x.span>
+          <x.span fontWeight={600} fontSize={15}>
+            {subtotal}
+          </x.span>
+        </Group>
+
+        {/*---- Discount ----*/}
+        {!isEmpty(discount) && (
+          <Group
+            h="40px"
+            position="apart"
+            borderBottomStyle="solid"
+            borderBottomWidth="1px"
+            borderColor="#000"
+          >
+            <x.span fontWeight={500}>{discountLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {discount}
+            </x.span>
+          </Group>
+        )}
+
+        {/*---- Adjustment ----*/}
+        {!isEmpty(adjustment) && (
+          <Group
+            h="40px"
+            position="apart"
+            borderBottomStyle="solid"
+            borderBottomWidth="1px"
+            borderColor="#000"
+          >
+            <x.span fontWeight={500}>{adjustmentLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {adjustment}
+            </x.span>
+          </Group>
+        )}
+
+        {/*---- Total ----*/}
         <Group
           h={'40px'}
           position={'apart'}
@@ -179,6 +251,7 @@ export function InvoiceMailReceipt({
           </x.span>
         </Group>
 
+        {/*---- Due amount ----*/}
         <Group
           h={'40px'}
           position={'apart'}

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx

@@ -29,6 +29,7 @@ export function InvoiceMailReceiptPreview(
     total: '$1,000.00',
     invoiceNumber: 'INV-0001',
     dueDate: '2 Oct 2024',
+    subtotal: '$1,000.00',
     dueAmount: '$1,000.00',
     items: [{ label: 'Web development', total: '$1000.00', quantity: 1 }],
     companyLogoUri: ' ',

packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceMailReceiptPreviewConnected.tsx

@@ -56,9 +56,12 @@ const withInvoiceMailReceiptPreviewProps = <
       companyLogoUri: invoiceMailState?.companyLogoUri,
       primaryColor: invoiceMailState?.primaryColor,
       total: invoiceMailState?.totalFormatted,
+      subtotal: invoiceMailState?.subtotalFormatted,
       dueDate: invoiceMailState?.dueDateFormatted,
       dueAmount: invoiceMailState?.dueAmountFormatted,
       invoiceNumber: invoiceMailState?.invoiceNo,
+      discount: invoiceMailState?.discountAmountFormatted,
+      adjustment: invoiceMailState?.adjustmentFormatted,
       items,
       message,
     };