feat: add ssr email templates rendering

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

@@ -1,8 +1,8 @@
 import {
   Button,
   Column,
-  Container,
   Heading,
+  render,
   Row,
   Section,
   Text,
@@ -135,6 +135,15 @@ export const CreditNoteEmailTemplate: React.FC<
     );
   };
 
+/**
+ * Renders the estimate mail template to string
+ * @param {EstimatePaymentEmailProps} props
+ * @returns {Promise<string>}
+ */
+export const renderCreditNoteEmailTemplate = (props: CreditNoteEmailProps) => {
+  return render(<CreditNoteEmailTemplate {...props} />);
+};
+
 const containerStyle: CSSProperties = {
   backgroundColor: '#fff',
   width: '100%',

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

@@ -4,6 +4,7 @@ import {
   Column,
   Container,
   Heading,
+  render,
   Row,
   Section,
   Text,
@@ -143,6 +144,17 @@ export const EstimatePaymentEmail: React.FC<
     );
   };
 
+/**
+ * Renders the estimate mail template to string
+ * @param {EstimatePaymentEmailProps} props 
+ * @returns {Promise<string>}
+ */
+export const renderEstimateEmailTemplate = (
+  props: EstimatePaymentEmailProps
+) => {
+  return render(<EstimatePaymentEmail {...props} />);
+};
+
 const headerInfoStyle: CSSProperties = {
   textAlign: 'center',
   marginBottom: 20,

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

@@ -2,6 +2,7 @@ import {
   Button,
   Container,
   Heading,
+  render,
   Row,
   Section,
   Text,
@@ -65,47 +66,58 @@ export const PaymentReceivedEmailTemplate: React.FC<
   viewPaymentButtonLabel = 'View Payment',
   viewPaymentButtonUrl,
 }) => {
-    return (
-      <EmailTemplateLayout preview={preview}>
-        <Container style={containerStyle}>
-          {companyLogoUri && (
-            <Section style={logoSectionStyle}>
-              <div
-                style={{
-                  ...companyLogoStyle,
-                  backgroundImage: `url("${companyLogoUri}")`,
-                }}
-              ></div>
-            </Section>
-          )}
-          <Section style={headerInfoStyle}>
-            <Row>
-              <Heading style={invoiceCompanyNameStyle}>{companyName}</Heading>
-            </Row>
-            <Row>
-              <Text style={paymentAmountStyle}>{total}</Text>
-            </Row>
-            <Row>
-              <Text style={paymentNumberStyle}>
-                {paymentNumberLabel?.replace('{paymentNumber}', paymentNumber)}
-              </Text>
-            </Row>
+  return (
+    <EmailTemplateLayout preview={preview}>
+      <Container style={containerStyle}>
+        {companyLogoUri && (
+          <Section style={logoSectionStyle}>
+            <div
+              style={{
+                ...companyLogoStyle,
+                backgroundImage: `url("${companyLogoUri}")`,
+              }}
+            ></div>
           </Section>
+        )}
+        <Section style={headerInfoStyle}>
+          <Row>
+            <Heading style={invoiceCompanyNameStyle}>{companyName}</Heading>
+          </Row>
+          <Row>
+            <Text style={paymentAmountStyle}>{total}</Text>
+          </Row>
+          <Row>
+            <Text style={paymentNumberStyle}>
+              {paymentNumberLabel?.replace('{paymentNumber}', paymentNumber)}
+            </Text>
+          </Row>
+        </Section>
 
-          <Text style={invoiceMessageStyle}>{message}</Text>
-          <Button
-            href={viewPaymentButtonUrl}
-            style={{
-              ...viewInvoiceButtonStyle,
-              backgroundColor: primaryColor,
-            }}
-          >
-            {viewPaymentButtonLabel}
-          </Button>
-        </Container>
-      </EmailTemplateLayout>
-    );
-  };
+        <Text style={invoiceMessageStyle}>{message}</Text>
+        <Button
+          href={viewPaymentButtonUrl}
+          style={{
+            ...viewInvoiceButtonStyle,
+            backgroundColor: primaryColor,
+          }}
+        >
+          {viewPaymentButtonLabel}
+        </Button>
+      </Container>
+    </EmailTemplateLayout>
+  );
+};
+
+/**
+ * Renders the payment received mail template to string
+ * @param {EstimatePaymentEmailProps} props
+ * @returns {Promise<string>}
+ */
+export const renderPaymentReceivedEmailTemplate = (
+  props: PaymentReceivedEmailTemplateProps
+) => {
+  return render(<PaymentReceivedEmailTemplate {...props} />);
+};
 
 const containerStyle: CSSProperties = {
   backgroundColor: '#fff',

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

@@ -1,8 +1,8 @@
 import {
   Button,
   Column,
-  Container,
   Heading,
+  render,
   Row,
   Section,
   Text,
@@ -148,6 +148,17 @@ export const ReceiptEmailTemplate: React.FC<
     );
   };
 
+/**
+ * Renders the sale receipt mail template to string
+ * @param {ReceiptEmailTemplateProps} props
+ * @returns {Promise<string>}
+ */
+export const renderReceiptEmailTemplate = (
+  props: ReceiptEmailTemplateProps
+) => {
+  return render(<ReceiptEmailTemplate {...props} />);
+};
+
 const headerInfoStyle: CSSProperties = {
   textAlign: 'center',
   marginBottom: 20,