feat: email templates

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

@@ -1,5 +1,18 @@
+import {
+  Button,
+  Column,
+  Container,
+  Heading,
+  Row,
+  Section,
+  Text,
+} from '@react-email/components';
+import { CSSProperties } from 'react';
+import { EmailTemplateLayout } from './EmailTemplateLayout';
+import { EmailTemplate } from './EmailTemplate';
+
 export interface ReceiptEmailTemplateProps {
-  preview?: string;
+  preview: string;
 
   // # Company
   companyName?: string;
@@ -12,11 +25,23 @@ export interface ReceiptEmailTemplateProps {
   total: string;
   totalLabel?: string;
 
+  // # Receipt #
+  receiptNumber?: string;
+  receiptNumberLabel?: string;
+
   // # Items
   items: Array<{ label: string; quantity: string; rate: string }>;
 
+  // # Subtotal
+  subtotal?: string;
+  subtotalLabel?: string;
+
+  // # View receipt button.
   viewReceiptButtonLabel?: string;
   viewReceiptButtonUrl?: string;
+
+  // # Message
+  message?: string;
 }
 
 export const ReceiptEmailTemplate: React.FC<
@@ -25,21 +50,186 @@ export const ReceiptEmailTemplate: React.FC<
   preview,
 
   // # Company
-  companyName,
+  companyName = 'Bigcapital, Inc.',
   companyLogoUri,
 
   // # Colors
   primaryColor = 'rgb(0, 82, 204)',
 
   // # Invoice total
-  total,
+  total = '$1,000.00',
   totalLabel = 'Total',
 
+  // # Subtotal
+  subtotal = '$1,000.00',
+  subtotalLabel = 'Subtotal',
+
+  // # Receipt #
+  receiptNumberLabel = 'Receipt # {receiptNumber}',
+  receiptNumber = 'REC-00001',
+
   // # View invoice button
   viewReceiptButtonLabel = 'View Estimate',
   viewReceiptButtonUrl,
+
+  // # Message
+  message = '',
+
+  // # Items
+  items = [{ label: 'Swaniawski Muller', quantity: '1', rate: '$1,000.00' }],
 }) => {
     return (
-      <h1>asdasd</h1>
-    )
+      <EmailTemplateLayout preview={preview}>
+        <EmailTemplate>
+          {companyLogoUri && <EmailTemplate.CompanyLogo src={companyLogoUri} />}
+
+          <Section style={headerInfoStyle}>
+            <Row>
+              <Heading style={invoiceCompanyNameStyle}>{companyName}</Heading>
+            </Row>
+            <Row>
+              <Text style={amountStyle}>{total}</Text>
+            </Row>
+            <Row>
+              <Text style={receiptNumberStyle}>
+                {receiptNumberLabel?.replace('{receiptNumber}', receiptNumber)}
+              </Text>
+            </Row>
+          </Section>
+
+          <Text style={messageStyle}>{message}</Text>
+          <Button
+            href={viewReceiptButtonUrl}
+            style={{
+              ...viewInvoiceButtonStyle,
+              backgroundColor: primaryColor,
+            }}
+          >
+            {viewReceiptButtonLabel}
+          </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={totalLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={dueAmountLineItemLabelStyle}>{subtotalLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={dueAmountLineItemAmountStyle}>{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>
+        </EmailTemplate>
+      </EmailTemplateLayout>
+    );
   };
+
+const headerInfoStyle: CSSProperties = {
+  textAlign: 'center',
+  marginBottom: 20,
+};
+
+const amountStyle: CSSProperties = {
+  margin: 0,
+  color: '#383E47',
+  fontWeight: 500,
+};
+const receiptNumberStyle: CSSProperties = {
+  margin: 0,
+  fontSize: '13px',
+  color: '#404854',
+};
+
+const invoiceCompanyNameStyle: CSSProperties = {
+  margin: 0,
+  fontSize: '18px',
+  fontWeight: 500,
+  color: '#404854',
+};
+
+const viewInvoiceButtonStyle: CSSProperties = {
+  display: 'block',
+  cursor: 'pointer',
+  textAlign: 'center',
+  fontSize: 16,
+  padding: '10px 15px',
+  lineHeight: '1',
+  backgroundColor: 'rgb(0, 82, 204)',
+  color: '#fff',
+  borderRadius: '5px',
+};
+
+const listItemLabelStyle: CSSProperties = {
+  margin: 0,
+};
+
+const listItemAmountStyle: CSSProperties = {
+  margin: 0,
+  textAlign: 'right',
+};
+
+const messageStyle: CSSProperties = {
+  whiteSpace: 'pre-line',
+  color: '#000000',
+  margin: '0 0 20px 0',
+  lineHeight: '20px',
+};
+
+const totalLineRowStyle: CSSProperties = {
+  borderBottom: '1px solid #000',
+  height: 40,
+};
+
+const totalLineItemLabelStyle: CSSProperties = {
+  ...listItemLabelStyle,
+  fontWeight: 500,
+};
+
+const totalLineItemAmountStyle: CSSProperties = {
+  ...listItemAmountStyle,
+  fontWeight: 600,
+};
+
+const dueAmountLineItemLabelStyle: CSSProperties = {
+  ...listItemLabelStyle,
+  fontWeight: 500,
+};
+
+const dueAmountLineItemAmountStyle: CSSProperties = {
+  ...listItemAmountStyle,
+  fontWeight: 600,
+};
+
+const itemLineRowStyle: CSSProperties = {
+  borderBottom: '1px solid #D9D9D9',
+  height: 40,
+};
+
+const totalsSectionStyle = {
+  marginTop: '20px',
+  borderTop: '1px solid #D9D9D9',
+};