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

feat: payment received mail receipt

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-11-25 11:51:13 +02:00
parent 459bf4cd55
commit df41de7239
12 changed files with 221 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailPreviewReceipt.tsx
View File

@@ -1,14 +1,20 @@
import { css } from '@emotion/css';
import { ComponentType, useMemo } from 'react';
import { ComponentType } from 'react';
import {
PaymentReceivedMailReceipt,
PaymentReceivedMailReceiptProps,
} from './PaymentReceivedMailReceipt';
import { PaymentReceivedMailPreviewHeader } from './PaymentReceivedMailPreviewHeader';
import { withPaymentReceivedMailReceiptPreviewProps } from './withPaymentReceivedMailReceiptPreviewProps';
import { Stack } from '@/components';
import { useSendPaymentReceivedtMailMessage } from './_hooks';
import { usePaymentReceivedSendMailBoot } from './PaymentReceivedMailBoot';
import { defaultPaymentReceiptMailProps } from './_constants';
const mailReceiptCss = css`
margin: 0 auto;
border-radius: 5px !important;
transform: scale(0.9);
transform-origin: top;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05) !important;
`;
export function PaymentReceivedMailPreviewReceipt() {
return (
@@ -17,54 +23,14 @@ export function PaymentReceivedMailPreviewReceipt() {
<Stack px={4} py={6}>
<PaymentReceivedMailReceiptPreviewConnected
className={css`
margin: 0 auto;
border-radius: 5px !important;
transform: scale(0.9);
transform-origin: top;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05) !important;
`}
className={mailReceiptCss}
/>
</Stack>
</Stack>
);
}
/**
* Injects props from invoice mail state into the InvoiceMailReceiptPreview component.
*/
const withPaymentReceivedMailReceiptPreviewProps = <
P extends PaymentReceivedMailReceiptProps,
>(
WrappedComponent: ComponentType<P & PaymentReceivedMailReceiptProps>,
) => {
return function WithInvoiceMailReceiptPreviewProps(props: P) {
const message = useSendPaymentReceivedtMailMessage();
const { paymentReceivedMailState } = usePaymentReceivedSendMailBoot();
const items = useMemo(
() =>
paymentReceivedMailState?.entries?.map((entry: any) => ({
total: entry.paidAmount,
label: entry.invoiceNumber,
})),
[paymentReceivedMailState?.entries],
);
const mailPaymentReceivedPreviewProps = {
...defaultPaymentReceiptMailProps,
companyName: paymentReceivedMailState?.companyName,
companyLogoUri: paymentReceivedMailState?.companyLogoUri,
primaryColor: paymentReceivedMailState?.primaryColor,
total: paymentReceivedMailState?.totalFormatted,
subtotal: paymentReceivedMailState?.subtotalFormatted,
paymentNumber: paymentReceivedMailState?.paymentNumber,
items,
message,
};
return <WrappedComponent {...mailPaymentReceivedPreviewProps} {...props} />;
};
};
export const PaymentReceivedMailReceiptPreviewConnected =
withPaymentReceivedMailReceiptPreviewProps(PaymentReceivedMailReceipt);
withPaymentReceivedMailReceiptPreviewProps(
PaymentReceivedMailReceipt,
) as ComponentType<Partial<PaymentReceivedMailReceiptProps>>;

41
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/withPaymentReceivedMailReceiptPreviewProps.tsx Normal file
View File

@@ -0,0 +1,41 @@
import { ComponentType, useMemo } from 'react';
import { PaymentReceivedMailReceiptProps } from './PaymentReceivedMailReceipt';
import { useSendPaymentReceivedtMailMessage } from './_hooks';
import { usePaymentReceivedSendMailBoot } from './PaymentReceivedMailBoot';
import { defaultPaymentReceiptMailProps } from './_constants';
/**
* Injects props from invoice mail state into the InvoiceMailReceiptPreview component.
*/
export const withPaymentReceivedMailReceiptPreviewProps = <
P extends PaymentReceivedMailReceiptProps,
>(
WrappedComponent: ComponentType<P & PaymentReceivedMailReceiptProps>,
) => {
return function WithInvoiceMailReceiptPreviewProps(props: P) {
const message = useSendPaymentReceivedtMailMessage();
const { paymentReceivedMailState } = usePaymentReceivedSendMailBoot();
const items = useMemo(
() =>
paymentReceivedMailState?.entries?.map((entry: any) => ({
total: entry.paidAmount,
label: entry.invoiceNumber,
})),
[paymentReceivedMailState?.entries],
);
const mailPaymentReceivedPreviewProps = {
...defaultPaymentReceiptMailProps,
companyName: paymentReceivedMailState?.companyName,
companyLogoUri: paymentReceivedMailState?.companyLogoUri,
primaryColor: paymentReceivedMailState?.primaryColor,
total: paymentReceivedMailState?.totalFormatted,
subtotal: paymentReceivedMailState?.subtotalFormatted,
paymentNumber: paymentReceivedMailState?.paymentNumber,
items,
message,
};
return <WrappedComponent {...mailPaymentReceivedPreviewProps} {...props} />;
};
};