feat: wip preview mail receipt

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

@@ -24,7 +24,7 @@ EmailTemplate.CompanyLogo = ({ src }: { src: string }) => {
 const containerStyle: CSSProperties = {
   backgroundColor: '#fff',
   width: '100%',
-  maxWidth: '400px',
+  maxWidth: '500px',
   padding: '30px 20px',
   color: '#000',
 };

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

@@ -26,6 +26,10 @@ export interface EstimatePaymentEmailProps {
   total: string;
   totalLabel?: string;
 
+  // # Subtotal
+  subtotal: string;
+  subtotalLabel?: string;
+
   // # Estimate No#
   estimateNumber?: string;
   estimateNumberLabel?: string;
@@ -57,10 +61,14 @@ export const EstimatePaymentEmail: React.FC<
   // # Colors
   primaryColor = 'rgb(0, 82, 204)',
 
-  // # invoice total
+  // # Total
   total,
   totalLabel = 'Total',
 
+  // # Subtotal
+  subtotal,
+  subtotalLabel = 'Subtotal',
+
   // # Estimate No#
   estimateNumberLabel = 'Estimate No: {estimateNumber}',
   estimateNumber = 'EST-00001',
@@ -129,6 +137,16 @@ export const EstimatePaymentEmail: React.FC<
               </Row>
             ))}
 
+            <Row style={totalLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={totalLineItemLabelStyle}>{subtotalLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={totalLineItemAmountStyle}>{subtotal}</Text>
+              </Column>
+            </Row>
+
             <Row style={totalLineRowStyle}>
               <Column width={'50%'}>
                 <Text style={totalLineItemLabelStyle}>{totalLabel}</Text>

shared/email-components/src/lib/PaymentReceivedEmailTemplate.stories.tsx

@@ -15,6 +15,10 @@ const Template: StoryFn<PaymentReceivedEmailTemplateProps> = (args) => (
 
 export const Default: StoryFn<PaymentReceivedEmailTemplateProps> =
   Template.bind({
+
+  });
+
+Default.args = {
   message: `Hi Ahmed Bouhuolia,
 
 Here's invoice # INV-00005 for $1,000.00
@@ -27,6 +31,5 @@ If you have any questions, please let us know.
 
 Thanks,
 Bigcapital`,
-  });
+  items: [{ label: 'INV-00001', total: '$1000.00' }]
-
+};
-Default.args = {};

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

@@ -1,5 +1,6 @@
 import {
   Button,
+  Column,
   Container,
   Heading,
   render,
@@ -24,13 +25,14 @@ export interface PaymentReceivedEmailTemplateProps {
   total: string;
   totalLabel?: string;
 
+  // # Subtotal
+  subtotal: string;
+  subtotalLabel?: string;
+
   // # Items
-  items: Array<{ label: string; quantity: string; rate: string }>;
+  items: Array<{ label: string; total: string }>;
-
-  // # View payment button
-  viewPaymentButtonLabel?: string;
-  viewPaymentButtonUrl?: string;
 
+  // # Payment #
   paymentNumberLabel?: string;
   paymentNumber?: string;
 
@@ -57,14 +59,15 @@ export const PaymentReceivedEmailTemplate: React.FC<
   total = '$1,000.00',
   totalLabel = 'Total',
 
+  // # Subtotal
+  subtotal,
+  subtotalLabel = 'Subtotal',
+
   // # Items
   items,
 
-  message = '',
+  // # Message
-
+  message,
-  // # View invoice button
-  viewPaymentButtonLabel = 'View Payment',
-  viewPaymentButtonUrl,
 }) => {
     return (
       <EmailTemplateLayout preview={preview}>
@@ -81,7 +84,7 @@ export const PaymentReceivedEmailTemplate: React.FC<
           )}
           <Section style={headerInfoStyle}>
             <Row>
-            <Heading style={invoiceCompanyNameStyle}>{companyName}</Heading>
+              <Heading style={paymentCompanyNameStyle}>{companyName}</Heading>
             </Row>
             <Row>
               <Text style={paymentAmountStyle}>{total}</Text>
@@ -93,20 +96,47 @@ export const PaymentReceivedEmailTemplate: React.FC<
             </Row>
           </Section>
 
-        <Text style={invoiceMessageStyle}>{message}</Text>
+          <Text style={paymentMessageStyle}>{message}</Text>
-        <Button
+
-          href={viewPaymentButtonUrl}
+          <Section style={totalsSectionStyle}>
-          style={{
+            {items.map((item, index) => (
-            ...viewInvoiceButtonStyle,
+              <Row key={index} style={itemLineRowStyle}>
-            backgroundColor: primaryColor,
+                <Column width={'50%'}>
-          }}
+                  <Text style={listItemLabelStyle}>{item.label}</Text>
-        >
+                </Column>
-          {viewPaymentButtonLabel}
+
-        </Button>
+                <Column width={'50%'}>
+                  <Text style={listItemAmountStyle}>
+                    {item.total}
+                  </Text>
+                </Column>
+              </Row>
+            ))}
+
+            <Row style={totalLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={totalLineItemLabelStyle}>{subtotalLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={totalLineItemAmountStyle}>{subtotal}</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>
         </Container>
       </EmailTemplateLayout>
     );
-};
+  };
 
 /**
  * Renders the payment received mail template to string
@@ -132,7 +162,6 @@ const headerInfoStyle: CSSProperties = {
   textAlign: 'center',
   marginBottom: 20,
 };
-const mainSectionStyle: CSSProperties = {};
 
 const paymentAmountStyle: CSSProperties = {
   margin: 0,
@@ -145,26 +174,14 @@ const paymentNumberStyle: CSSProperties = {
   color: '#404854',
 };
 
-const invoiceCompanyNameStyle: CSSProperties = {
+const paymentCompanyNameStyle: CSSProperties = {
   margin: 0,
   fontSize: '18px',
   fontWeight: 500,
   color: '#404854',
 };
 
-const viewInvoiceButtonStyle: CSSProperties = {
+const paymentMessageStyle: CSSProperties = {
-  display: 'block',
-  cursor: 'pointer',
-  textAlign: 'center',
-  fontSize: 16,
-  padding: '10px 15px',
-  lineHeight: '1',
-  backgroundColor: 'rgb(0, 82, 204)',
-  color: '#fff',
-  borderRadius: '5px',
-};
-
-const invoiceMessageStyle: CSSProperties = {
   whiteSpace: 'pre-line',
   margin: '0 0 20px 0',
   lineHeight: '20px',
@@ -186,3 +203,38 @@ const companyLogoStyle = {
   backgroundPosition: 'center center',
   backgroundSize: 'contain',
 };
+
+const totalLineRowStyle: CSSProperties = {
+  borderBottom: '1px solid #000',
+  height: 40,
+};
+
+const listItemLabelStyle: CSSProperties = {
+  margin: 0,
+};
+
+const totalLineItemLabelStyle: CSSProperties = {
+  ...listItemLabelStyle,
+  fontWeight: 500,
+};
+
+
+const listItemAmountStyle: CSSProperties = {
+  margin: 0,
+  textAlign: 'right',
+};
+
+const totalLineItemAmountStyle: CSSProperties = {
+  ...listItemAmountStyle,
+  fontWeight: 600,
+};
+
+const itemLineRowStyle: CSSProperties = {
+  borderBottom: '1px solid #D9D9D9',
+  height: 40,
+};
+
+const totalsSectionStyle = {
+  marginTop: '20px',
+  borderTop: '1px solid #D9D9D9',
+};