feat: add discount and adjustment fields to email templates.

shared/email-components/src/lib/ReceiptPaymentEmail.tsx

@@ -1,5 +1,5 @@
+import { CSSProperties } from 'react';
 import {
-  Button,
   Column,
   Heading,
   render,
@@ -7,14 +7,12 @@ import {
   Section,
   Text,
 } from '@react-email/components';
-import { CSSProperties } from 'react';
+import isEmpty from 'lodash.isempty';
 import { EmailTemplateLayout } from './EmailTemplateLayout';
 import { EmailTemplate } from './EmailTemplate';
-
 export interface ReceiptEmailTemplateProps {
   preview: string;
 
-
   companyName?: string;
   companyLogoUri: string;
 
@@ -36,6 +34,10 @@ export interface ReceiptEmailTemplateProps {
   discount?: string;
   discountLabel?: string;
 
+  // # Adjustment
+  adjustment?: string;
+  adjustmentLabel?: string;
+
   // # Subtotal
   subtotal?: string;
   subtotalLabel?: string;
@@ -60,6 +62,14 @@ export const ReceiptEmailTemplate: React.FC<
   total = '$1,000.00',
   totalLabel = 'Total',
 
+  // # Diso
+  discountLabel = 'Discount',
+  discount,
+
+  // # ADjustment
+  adjustmentLabel = 'Adjustment',
+  adjustment,
+
   // # Subtotal
   subtotal = '$1,000.00',
   subtotalLabel = 'Subtotal',
@@ -74,68 +84,92 @@ export const ReceiptEmailTemplate: React.FC<
   // # Items
   items = [{ label: 'Swaniawski Muller', quantity: '1', rate: '$1,000.00' }],
 }) => {
-    return (
-      <EmailTemplateLayout preview={preview}>
-        <EmailTemplate>
-          {companyLogoUri && <EmailTemplate.CompanyLogo src={companyLogoUri} />}
+  return (
+    <EmailTemplateLayout preview={preview}>
+      <EmailTemplate>
+        {companyLogoUri && <EmailTemplate.CompanyLogo src={companyLogoUri} />}
 
-          <Section style={headerInfoStyle}>
-            <Row>
-              <Heading style={invoiceCompanyNameStyle}>{companyName}</Heading>
-            </Row>
+        <Section style={headerInfoStyle}>
+          <Row>
+            <Heading style={invoiceCompanyNameStyle}>{companyName}</Heading>
+          </Row>
 
-            <Row>
-              <Text style={amountStyle}>{total}</Text>
-            </Row>
+          <Row>
+            <Text style={amountStyle}>{total}</Text>
+          </Row>
 
-            <Row>
-              <Text style={receiptNumberStyle}>
-                {receiptNumberLabel?.replace('{receiptNumber}', receiptNumber)}
-              </Text>
-            </Row>
-          </Section>
+          <Row>
+            <Text style={receiptNumberStyle}>
+              {receiptNumberLabel?.replace('{receiptNumber}', receiptNumber)}
+            </Text>
+          </Row>
+        </Section>
 
-          <Text style={messageStyle}>{message}</Text>
+        <Text style={messageStyle}>{message}</Text>
 
-          <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={totalLineRowStyle}>
+        <Section style={totalsSectionStyle}>
+          {items.map((item, index) => (
+            <Row key={index} style={itemLineRowStyle}>
               <Column width={'50%'}>
-                <Text style={dueAmountLineItemLabelStyle}>{subtotalLabel}</Text>
+                <Text style={listItemLabelStyle}>{item.label}</Text>
               </Column>
 
               <Column width={'50%'}>
-                <Text style={dueAmountLineItemAmountStyle}>{subtotal}</Text>
+                <Text style={listItemAmountStyle}>
+                  {item.quantity} x {item.rate}
+                </Text>
               </Column>
             </Row>
-            
-            <Row style={totalLineRowStyle}>
+          ))}
+
+          <Row style={totalLineRowStyle}>
+            <Column width={'50%'}>
+              <Text style={dueAmountLineItemLabelStyle}>{subtotalLabel}</Text>
+            </Column>
+
+            <Column width={'50%'}>
+              <Text style={dueAmountLineItemAmountStyle}>{subtotal}</Text>
+            </Column>
+          </Row>
+
+          {!isEmpty(discount) && (
+            <Row style={itemLineRowStyle}>
               <Column width={'50%'}>
-                <Text style={totalLineItemLabelStyle}>{totalLabel}</Text>
+                <Text style={listItemLabelStyle}>{discountLabel}</Text>
               </Column>
 
               <Column width={'50%'}>
-                <Text style={totalLineItemAmountStyle}>{total}</Text>
+                <Text style={listItemAmountStyle}>{discount}</Text>
               </Column>
             </Row>
-          </Section>
-        </EmailTemplate>
-      </EmailTemplateLayout>
-    );
-  };
+          )}
+
+          {!isEmpty(adjustment) && (
+            <Row style={itemLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={listItemLabelStyle}>{adjustmentLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={listItemAmountStyle}>{adjustment}</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>
+        </Section>
+      </EmailTemplate>
+    </EmailTemplateLayout>
+  );
+};
 
 /**
  * Renders the sale receipt mail template to string