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

feat: receipt mail preview

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-11-26 11:36:08 +02:00
parent 831fb9180c
commit 7b5f0d3930
7 changed files with 351 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailReceipt.tsx
View File

@@ -27,11 +27,6 @@ export interface ReceiptSendMailReceiptProps extends SendMailReceiptProps {
// # Subtotal
subtotal: string;
subtotalLabel?: string;
// # View receipt button
showViewReceiptButton?: boolean;
viewReceiptButtonLabel?: string;
viewReceiptButtonOnClick?: () => void;
}
export function ReceiptSendMailReceipt({
@@ -55,11 +50,6 @@ export function ReceiptSendMailReceipt({
subtotal,
subtotalLabel = 'Subtotal',
// # View receipt button
showViewReceiptButton,
viewReceiptButtonLabel,
viewReceiptButtonOnClick,
...rest
}: ReceiptSendMailReceiptProps) {
return (
@@ -80,62 +70,57 @@ export function ReceiptSendMailReceipt({
{receiptNumberLabel} {receiptNumber}
</x.span>
</Stack>
</Stack>
{showViewReceiptButton && (
<SendMailReceipt.PrimaryButton
primaryColor={'#000'}
onClick={viewReceiptButtonOnClick}
>
{viewReceiptButtonLabel}
</SendMailReceipt.PrimaryButton>
)}
<Stack spacing={0}>
{items?.map((item, key) => (
<Group
key={key}
h={'40px'}
position={'apart'}
borderBottomStyle="solid"
borderBottomWidth={'1px'}
borderBottomColor={'#D9D9D9'}
borderTopStyle="solid"
borderTopColor={'#D9D9D9'}
borderTopWidth={'1px'}
>
<x.span>{item.label}</x.span>
<x.span>
{item.quantity} x {item.total}
</x.span>
</Group>
))}
<x.p m={0} whiteSpace={'pre-line'} color="#252A31">
{message}
</x.p>
<Stack spacing={0}>
{items?.map((item, key) => (
<Group
key={key}
h={'40px'}
position={'apart'}
borderBottomStyle="solid"
borderBottomWidth={'1px'}
borderBottomColor={'#000'}
borderBottomColor={'#D9D9D9'}
borderTopStyle="solid"
borderTopColor={'#D9D9D9'}
borderTopWidth={'1px'}
>
<x.span fontWeight={500}>{subtotalLabel}</x.span>
<x.span fontWeight={600} fontSize={15}>
{subtotal}
<x.span>{item.label}</x.span>
<x.span>
{item.quantity} x {item.total}
</x.span>
</Group>
))}
<Group
h={'40px'}
position={'apart'}
borderBottomStyle="solid"
borderBottomWidth={'1px'}
borderColor={'#000'}
>
<x.span fontWeight={500}>{totalLabel}</x.span>
<x.span fontWeight={600} fontSize={15}>
{total}
</x.span>
</Group>
</Stack>
<Group
h={'40px'}
position={'apart'}
borderBottomStyle="solid"
borderBottomWidth={'1px'}
borderBottomColor={'#000'}
>
<x.span fontWeight={500}>{subtotalLabel}</x.span>
<x.span fontWeight={600} fontSize={15}>
{subtotal}
</x.span>
</Group>
<Group
h={'40px'}
position={'apart'}
borderBottomStyle="solid"
borderBottomWidth={'1px'}
borderColor={'#000'}
>
<x.span fontWeight={500}>{totalLabel}</x.span>
<x.span fontWeight={600} fontSize={15}>
{total}
</x.span>
</Group>
</Stack>
</SendMailReceipt>
);

35
packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/withReceiptMailReceiptPreviewProps.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentType } from 'react';
import { ComponentType, useMemo } from 'react';
import {
ReceiptSendMailReceipt,
ReceiptSendMailReceiptProps,
@@ -19,26 +19,25 @@ export const withReceiptMailReceiptPreviewProps = <
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 items = useMemo(
() =>
receiptMailState?.entries?.map((entry: any) => ({
quantity: entry.quantity,
total: entry.totalFormatted,
label: entry.name,
})),
[receiptMailState?.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,
companyName: receiptMailState?.companyName,
companyLogoUri: receiptMailState?.companyLogoUri,
primaryColor: receiptMailState?.primaryColor,
total: receiptMailState?.totalFormatted,
subtotal: receiptMailState?.subtotalFormatted,
receiptNumber: receiptMailState?.receiptNumber,
items,
message,
};
return <WrappedComponent {...mailReceiptPreviewProps} {...props} />;