QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 14:20: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

69
packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreview.tsx
View File

@@ -1,14 +1,15 @@
import { ComponentType } from 'react';
import { css } from '@emotion/css';
import { Stack } from '@/components';
import { ReceiptSendMailPreviewHeader } from './ReceiptSendMailPreviewHeader';
import {
ReceiptSendMailReceipt,
ReceiptSendMailReceiptProps,
} from './ReceiptSendMailReceipt';
import { defaultReceiptMailProps } from './_constants';
import { useReceiptSendMailBoot } from './ReceiptSendMailBoot';
import { useSendReceiptMailMessage } from './_hooks';
import { ReceiptMailPreviewConnected } from './withReceiptMailReceiptPreviewProps';
const receiptPreviewCss = 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 ReceiptSendMailPreview() {
return (
@@ -16,58 +17,8 @@ export function ReceiptSendMailPreview() {
<ReceiptSendMailPreviewHeader />
<Stack px={4} py={6}>
<ReceiptMailPreviewConnected
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;
`}
/>
<ReceiptMailPreviewConnected className={receiptPreviewCss} />
</Stack>
</Stack>
);
}
/**
* Injects props from receipt mail state into the `ReceiptMailPreviewConnected` component.
*/
const withReceiptMailReceiptPreviewProps = <
P extends ReceiptSendMailReceiptProps,
>(
WrappedComponent: ComponentType<P & ReceiptSendMailReceiptProps>,
) => {
return function WithInvoiceMailReceiptPreviewProps(props: P) {
const message = useSendReceiptMailMessage();
const { receiptMailState } = useReceiptSendMailBoot();
// const items = useMemo(
// () =>
// invoiceMailState?.entries?.map((entry: any) => ({
// quantity: entry.quantity,
// total: entry.totalFormatted,
// label: entry.name,
// })),
// [invoiceMailState?.entries],
// );
const mailReceiptPreviewProps = {
...defaultReceiptMailProps,
// companyName: receiptMailState?.companyName,
// companyLogoUri: receiptMailState?.companyLogoUri,
// primaryColor: receiptMailState?.primaryColor,
// total: receiptMailState?.totalFormatted,
// dueDate: receiptMailState?.dueDateFormatted,
// dueAmount: invoiceMailState?.dueAmountFormatted,
// invoiceNumber: invoiceMailState?.invoiceNo,
// items,
message,
};
return <WrappedComponent {...mailReceiptPreviewProps} {...props} />;
};
};
export const ReceiptMailPreviewConnected = withReceiptMailReceiptPreviewProps(
ReceiptSendMailReceipt,
);

50
packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/withReceiptMailReceiptPreviewProps.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { ComponentType } from 'react';
import {
ReceiptSendMailReceipt,
ReceiptSendMailReceiptProps,
} from './ReceiptSendMailReceipt';
import { useSendReceiptMailMessage } from './_hooks';
import { useReceiptSendMailBoot } from './ReceiptSendMailBoot';
import { defaultReceiptMailProps } from './_constants';
/**
* Injects props from receipt mail state into the `ReceiptMailPreviewConnected` component.
*/
export const withReceiptMailReceiptPreviewProps = <
P extends ReceiptSendMailReceiptProps,
>(
WrappedComponent: ComponentType<P & ReceiptSendMailReceiptProps>,
) => {
return function WithInvoiceMailReceiptPreviewProps(props: P) {
const message = useSendReceiptMailMessage();
const { receiptMailState } = useReceiptSendMailBoot();
// const items = useMemo(
// () =>
// invoiceMailState?.entries?.map((entry: any) => ({
// quantity: entry.quantity,
// total: entry.totalFormatted,
// label: entry.name,
// })),
// [invoiceMailState?.entries],
// );
const mailReceiptPreviewProps = {
...defaultReceiptMailProps,
// companyName: receiptMailState?.companyName,
// companyLogoUri: receiptMailState?.companyLogoUri,
// primaryColor: receiptMailState?.primaryColor,
// total: receiptMailState?.totalFormatted,
// dueDate: receiptMailState?.dueDateFormatted,
// dueAmount: invoiceMailState?.dueAmountFormatted,
// invoiceNumber: invoiceMailState?.invoiceNo,
// items,
message,
};
return <WrappedComponent {...mailReceiptPreviewProps} {...props} />;
};
};
export const ReceiptMailPreviewConnected = withReceiptMailReceiptPreviewProps(
ReceiptSendMailReceipt,
) as ComponentType<Partial<ReceiptSendMailReceiptProps>>;