feat: Map the invoice preview data

This commit is contained in:
Ahmed Bouhuolia
2024-09-19 14:32:14 +02:00
parent 16eaacd4bc
commit 0ae7a25c27
8 changed files with 112 additions and 20 deletions

View File

@@ -10,14 +10,11 @@ export default function PaymentPortalPage() {
const { linkId } = useParams<{ linkId: string }>();
return (
<>
<BodyClassName className={styles.rootBodyPage}>
<PaymentPortalBoot linkId={linkId}>
<PaymentPortal />
</PaymentPortalBoot>
</BodyClassName>
<PaymentInvoicePreviewDrawer name={DRAWERS.PAYMENT_INVOICE_PREVIEW} />
</>
<BodyClassName className={styles.rootBodyPage}>
<PaymentPortalBoot linkId={linkId}>
<PaymentPortal />
<PaymentInvoicePreviewDrawer name={DRAWERS.PAYMENT_INVOICE_PREVIEW} />
</PaymentPortalBoot>
</BodyClassName>
);
}

View File

@@ -1,15 +1,36 @@
// @ts-nocheck
import { Box, DrawerBody, DrawerHeaderContent } from '@/components';
import { InvoicePaperTemplate } from '@/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate';
import { usePaymentPortalBoot } from '../../PaymentPortalBoot';
export function PaymentInvoicePreviewContent() {
const { sharableLinkMeta } = usePaymentPortalBoot();
return (
<>
<DrawerHeaderContent title={'Invoice'} />
<DrawerBody>
<Box style={{ paddingTop: 20, paddingBottom: 20 }}>
<InvoicePaperTemplate />
<InvoicePaperTemplate
invoiceNumber={sharableLinkMeta?.invoiceNo}
dueDate={sharableLinkMeta?.dueDateFormatted}
dateIssue={sharableLinkMeta?.invoiceDateFormatted}
total={sharableLinkMeta?.totalFormatted}
subtotal={sharableLinkMeta?.subtotalFormatted}
balanceDue={sharableLinkMeta?.dueAmountFormatted}
paymentMade={sharableLinkMeta?.paymentAmountFormatted}
termsConditions={sharableLinkMeta?.termsConditions}
statement={sharableLinkMeta?.invoiceMessage}
companyName={sharableLinkMeta?.companyName}
lines={sharableLinkMeta?.entries?.map((entry) => ({
item: entry.itemName,
description: entry.description,
quantity: entry.quantityFormatted,
rate: entry.rateFormatted,
total: entry.totalFormatted,
}))}
/>
</Box>
</DrawerBody>
</>

View File

@@ -1,10 +1,10 @@
// @ts-nocheck
import React from 'react';
import * as R from 'ramda';
import { Position } from '@blueprintjs/core';
import { Drawer, DrawerSuspense } from '@/components';
import withDrawers from '@/containers/Drawer/withDrawers';
import { PaymentInvoicePreviewContent } from './PaymentInvoicePreviewContent';
import { Position } from '@blueprintjs/core';
/**
*

View File

@@ -99,16 +99,16 @@ export function InvoicePaperTemplate({
dueDate = 'September 3, 2024',
dueDateLabel = 'Date due',
showDueDate,
showDueDate = true,
dateIssue = 'September 3, 2024',
dateIssueLabel = 'Date of issue',
showDateIssue,
showDateIssue = true,
// dateIssue,
invoiceNumberLabel = 'Invoice number',
invoiceNumber = '346D3D40-0001',
showInvoiceNumber,
showInvoiceNumber = true,
// Address
showBillingToAddress = true,
@@ -281,12 +281,12 @@ export function InvoicePaperTemplate({
</Stack>
<Stack spacing={0}>
{showTermsConditions && (
{showTermsConditions && termsConditions && (
<PaperTemplate.Statement label={termsConditionsLabel}>
{termsConditions}
</PaperTemplate.Statement>
)}
{showStatement && (
{showStatement && statement && (
<PaperTemplate.Statement label={statementLabel}>
{statement}
</PaperTemplate.Statement>