QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-14 11:50:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add ssr email templates rendering

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-11-19 17:14:13 +02:00
parent f7bf24acb3
commit c6db54175f
7 changed files with 138 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/webapp/package.json
View File

@@ -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",

49
packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewReceiptPreview.tsx Normal file
View File

@@ -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;

3
pnpm-lock.yaml generated
View File

@@ -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

11
shared/email-components/src/lib/CreditNoteEmailTemplate.tsx
View File

@@ -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%',

12
shared/email-components/src/lib/EstimatePaymentEmail.tsx
View File

@@ -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,

90
shared/email-components/src/lib/PaymentReceivedEmailTemplate.tsx
View File

@@ -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',

13
shared/email-components/src/lib/ReceiptPaymentEmail.tsx
View File

@@ -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,