feat: add ssr email templates rendering

packages/webapp/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@bigcapital/utils": "*",
     "@bigcapital/pdf-templates": "*",
+    "@bigcapital/email-components": "*",
     "@blueprintjs-formik/core": "^0.3.7",
     "@blueprintjs-formik/datetime": "^0.3.7",
     "@blueprintjs-formik/select": "^0.3.5",

packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewReceiptPreview.tsx

@@ -0,0 +1,49 @@
+import { x } from '@xstyled/emotion';
+import { Stack, StackProps } from '@/components';
+
+interface SendMailReceiptProps extends StackProps {
+  children: React.ReactNode;
+}
+
+export function SendMailReceipt({
+  children,
+  ...restProps
+}: SendMailReceiptProps) {
+  return (
+    <Stack
+      bg="white"
+      w={'100%'}
+      maxWidth={'500px'}
+      p={'35px 25px'}
+      borderRadius={'5px'}
+      boxShadow={'0 10px 15px rgba(0, 0, 0, 0.05)'}
+      color={'black'}
+      {...restProps}
+    ></Stack>
+  );
+}
+
+interface SendMailReceiptCompanyLogoProps extends StackProps {
+  src: string;
+}
+
+function SendMailReceiptCompanyLogo({
+  src,
+  ...props
+}: SendMailReceiptCompanyLogoProps) {
+  return (
+    <x.div
+      h="90px"
+      w="90px"
+      mx="auto"
+      borderRadius="3px"
+      backgroundRepeat="no-repeat"
+      backgroundPosition="center center"
+      backgroundSize="contain"
+      backgroundImage={`url("${src}")`}
+      {...props}
+    ></x.div>
+  );
+}
+
+SendMailReceipt.CompanyLogo = SendMailReceiptCompanyLogo;

pnpm-lock.yaml

@@ -484,6 +484,9 @@ importers:
 
   packages/webapp:
     dependencies:
+      '@bigcapital/email-components':
+        specifier: '*'
+        version: link:../../shared/email-components
       '@bigcapital/pdf-templates':
         specifier: '*'
         version: link:../../shared/pdf-templates

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 (
+  return (
-      <EmailTemplateLayout preview={preview}>
+    <EmailTemplateLayout preview={preview}>
-        <Container style={containerStyle}>
+      <Container style={containerStyle}>
-          {companyLogoUri && (
+        {companyLogoUri && (
-            <Section style={logoSectionStyle}>
+          <Section style={logoSectionStyle}>
-              <div
+            <div
-                style={{
+              style={{
-                  ...companyLogoStyle,
+                ...companyLogoStyle,
-                  backgroundImage: `url("${companyLogoUri}")`,
+                backgroundImage: `url("${companyLogoUri}")`,
-                }}
+              }}
-              ></div>
+            ></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>
+        )}
+        <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>
+        <Text style={invoiceMessageStyle}>{message}</Text>
-          <Button
+        <Button
-            href={viewPaymentButtonUrl}
+          href={viewPaymentButtonUrl}
-            style={{
+          style={{
-              ...viewInvoiceButtonStyle,
+            ...viewInvoiceButtonStyle,
-              backgroundColor: primaryColor,
+            backgroundColor: primaryColor,
-            }}
+          }}
-          >
+        >
-            {viewPaymentButtonLabel}
+          {viewPaymentButtonLabel}
-          </Button>
+        </Button>
-        </Container>
+      </Container>
-      </EmailTemplateLayout>
+    </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,