feat: invoice pdf customize

2026-02-18 13:50:31 +00:00 · 2024-09-10 23:32:34 +02:00
parent 716dec799a
commit 5b6270a184
10 changed files with 213 additions and 140 deletions
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCutomizeContentFields.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCutomizeContentFields.tsx
@@ -1,6 +1,11 @@
 // @ts-nocheck
 import { Stack } from '@/components';
+import {
+  ElementCustomizeContentItemFieldGroup,
+  ElementCustomizeFieldsGroup,
+} from '@/containers/ElementCustomize/ElementCustomizeFieldsGroup';
 import { Classes } from '@blueprintjs/core';
+import { fieldsGroups } from './constants';

 export function CreditNoteCustomizeContentFields() {
  return (
@@ -16,7 +21,24 @@ export function CreditNoteCustomizeContentFields() {
        </p>
      </Stack>

-      <Stack></Stack>
+      <Stack>
+        {fieldsGroups.map((group) => (
+          <ElementCustomizeFieldsGroup label={group.label}>
+            {group.fields.map((item, index) => (
+              <ElementCustomizeContentItemFieldGroup
+                key={index}
+                inputGroupProps={{
+                  name: item.enableKey,
+                  label: item.label,
+                }}
+                switchProps={{
+                  name: item.labelKey,
+                }}
+              />
+            ))}
+          </ElementCustomizeFieldsGroup>
+        ))}
+      </Stack>
    </Stack>
  );
 }
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
@@ -5,18 +5,22 @@ export interface CreditNotePaperTemplateProps extends PaperTemplateProps {
  billedToAddress?: Array<string>;
  billedFromAddress?: Array<string>;

+  // Total
  total?: string;
  showTotal?: boolean;
  totalLabel?: string;

+  // Subtotal;
  subtotal?: string;
  showSubtotal?: boolean;
  subtotalLabel?: string;

+  // Customer Note.
  showCustomerNote?: boolean;
  customerNote?: string;
  customerNoteLabel?: string;

+  // Terms & Conditions
  showTermsConditions?: boolean;
  termsConditions?: string;
  termsConditionsLabel?: string;
@@ -29,10 +33,12 @@ export interface CreditNotePaperTemplateProps extends PaperTemplateProps {
    total: string;
  }>;

+  // Date issue.
  creditNoteDateLabel?: string;
  showCreditNoteDate?: boolean;
  creditNoteDate?: string;

+  // Credit Number.
  creditNoteNumebr?: string;
  creditNoteNumberLabel?: string;
  showCreditNoteNumber?: boolean;
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts
@@ -8,52 +8,78 @@ export const initialValues = {
  companyLogo:
    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',

-  // Top details.
-  showInvoiceNumber: true,
-  invoiceNumberLabel: 'Invoice number',
-
-  showDateIssue: true,
-  dateIssueLabel: 'Date of Issue',
-
-  showDueDate: true,
-  dueDateLabel: 'Due Date',
-
-  // Company name
-  companyName: 'Bigcapital Technology, Inc.',
-
-  // Addresses
-  showBilledFromAddress: true,
-  showBillingToAddress: true,
-  billedToLabel: 'Billed To',
-
  // Entries
  itemNameLabel: 'Item',
  itemDescriptionLabel: 'Description',
  itemRateLabel: 'Rate',
  itemTotalLabel: 'Total',

-  // Totals
-  showSubtotal: true,
-  subtotalLabel: 'Subtotal',
-
-  showDiscount: true,
-  discountLabel: 'Discount',
-
-  showTaxes: true,
-
+  // Total
  showTotal: true,
  totalLabel: 'Total',

-  paymentMadeLabel: 'Payment Made',
-  showPaymentMade: true,
+  // Subtotal
+  showSubtotal: true,
+  subtotalLabel: 'Subtotal',

-  dueAmountLabel: 'Due Amount',
-  showDueAmount: true,
+  // Customer Note.
+  showCustomerNote: true,
+  customerNoteLabel: 'Customer Note',

-  // Footer paragraphs.
-  termsConditionsLabel: 'Terms & Conditions',
+  // Terms & Conditions
  showTermsConditions: true,
+  termsConditionsLabel: 'Terms & Conditions',

-  statementLabel: 'Statement',
-  showStatement: true,
+  // Date issue.
+  creditNoteDateLabel: 'Issue of Date',
+  showCreditNoteDate: true,
+
+  // Credit Number.
+  creditNoteNumberLabel: 'Credit Note #',
+  showCreditNoteNumber: true,
 };
+
+export const fieldsGroups = [
+  {
+    label: 'Header',
+    fields: [
+      {
+        labelKey: 'creditNoteDateLabel',
+        enableKey: 'showCreditNoteDate',
+        label: 'Issue of Date',
+      },
+      {
+        labelKey: 'creditNoteNumberLabel',
+        enableKey: 'showCreditNoteNumber',
+        label: 'Credit Note #',
+      },
+    ],
+  },
+  {
+    label: 'Totals',
+    fields: [
+      {
+        labelKey: 'subtotalLabel',
+        enableKey: 'showSubtotal',
+        label: 'Subtotal',
+      },
+      { labelKey: 'totalLabel', enableKey: 'showTotal', label: 'Total' },
+    ],
+  },
+  {
+    label: 'Footer',
+    fields: [
+      {
+        labelKey: 'termsConditionsLabel',
+        enableKey: 'showTermsConditions',
+        label: 'Terms & Conditions',
+      },
+      {
+        labelKey: 'customerNoteLabel',
+        enableKey: 'showCustomerNote',
+        label: 'Customer Note',
+        labelPlaceholder: 'Customer Note',
+      },
+    ],
+  },
+];
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts
@@ -1,5 +1,39 @@
-
-
 export interface CreditNoteCustomizeValues {
-  
-}
+  // Colors
+  primaryColor?: string;
+  secondaryColor?: string;
+
+  // Company Logo
+  showCompanyLogo?: boolean;
+  companyLogo?: string;
+
+  // Entries
+  itemNameLabel?: string;
+  itemDescriptionLabel?: string;
+  itemRateLabel?: string;
+  itemTotalLabel?: string;
+
+  // Total
+  showTotal?: boolean;
+  totalLabel?: string;
+
+  // Subtotal
+  showSubtotal?: boolean;
+  subtotalLabel?: string;
+
+  // Customer Note.
+  showCustomerNote?: boolean;
+  customerNoteLabel?: string;
+
+  // Terms & Conditions
+  showTermsConditions?: boolean;
+  termsConditionsLabel?: string;
+
+  // Date issue.
+  creditNoteDateLabel?: string;
+  showCreditNoteDate?: boolean;
+
+  // Credit Number.
+  creditNoteNumberLabel?: string;
+  showCreditNoteNumber?: boolean;
+}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
+import * as R from 'ramda';
 import { Box } from '@/components';
 import { Classes } from '@blueprintjs/core';
-import { InvoicePaperTemplate } from './InvoicePaperTemplate';
+import { useFormikContext } from 'formik';
+import {
+  InvoicePaperTemplate,
+  InvoicePaperTemplateProps,
+} from './InvoicePaperTemplate';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { InvoiceCustomizeGeneralField } from './InvoiceCustomizeGeneralFields';
 import { InvoiceCustomizeContentFields } from './InvoiceCutomizeContentFields';
@@ -18,7 +23,7 @@ export default function InvoiceCustomizeContent() {
        onSubmit={handleFormSubmit}
      >
        <ElementCustomize.PaperTemplate>
-          <InvoicePaperTemplate />
+          <InvoicePaperTemplateFormConnected />
        </ElementCustomize.PaperTemplate>

        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
@@ -36,3 +41,16 @@ export default function InvoiceCustomizeContent() {
    </Box>
  );
 }
+
+const withFormikProps = <P extends object>(
+  Component: React.ComponentType<P>,
+) => {
+  return (props: Omit<P, keyof InvoicePaperTemplateProps>) => {
+    const { values } = useFormikContext<InvoicePaperTemplateProps>();
+
+    return <Component {...(props as P)} {...values} />;
+  };
+};
+
+export const InvoicePaperTemplateFormConnected =
+  R.compose(withFormikProps)(InvoicePaperTemplate);
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
@@ -1,10 +1,6 @@
-import clsx from 'classnames';
-import * as R from 'ramda';
-import { useFormikContext } from 'formik';
-import styles from './InvoicePaperTemplate.module.scss';
+import React from 'react';
 import { PaperTemplate } from './PaperTemplate';
 import { Group, Stack } from '@/components';
-import React from 'react';

 interface PapaerLine {
  item?: string;
@@ -19,7 +15,7 @@ interface PaperTax {
  amount: string;
 }

-interface PaperTemplateProps {
+export interface InvoicePaperTemplateProps {
  primaryColor?: string;
  secondaryColor?: string;

@@ -92,7 +88,7 @@ interface PaperTemplateProps {
  billedToAddress?: Array<string | React.ReactNode>;
 }

-function InvoicePaperTemplateRoot({
+export function InvoicePaperTemplate({
  primaryColor,
  secondaryColor,

@@ -183,7 +179,7 @@ function InvoicePaperTemplateRoot({
    '+1 762-339-5634',
    'ahmed@bigcapital.app',
  ],
-}: PaperTemplateProps) {
+}: InvoicePaperTemplateProps) {
  return (
    <PaperTemplate
      primaryColor={primaryColor}
@@ -290,17 +286,3 @@ function InvoicePaperTemplateRoot({
    </PaperTemplate>
  );
 }
-
-const withFormikProps = <P extends object>(
-  Component: React.ComponentType<P>,
-) => {
-  return (props: Omit<P, keyof PaperTemplateProps>) => {
-    const { values } = useFormikContext<PaperTemplateProps>();
-
-    return <Component {...(props as P)} {...values} />;
-  };
-};
-
-export const InvoicePaperTemplate = R.compose(withFormikProps)(
-  InvoicePaperTemplateRoot,
-);
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsContent.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsContent.tsx
@@ -1,6 +1,11 @@
 // @ts-nocheck
 import { Stack } from '@/components';
 import { Classes } from '@blueprintjs/core';
+import { fieldsGroups } from './constants';
+import {
+  ElementCustomizeContentItemFieldGroup,
+  ElementCustomizeFieldsGroup,
+} from '@/containers/ElementCustomize/ElementCustomizeFieldsGroup';

 export function PaymentReceivedCustomizeContentFields() {
  return (
@@ -16,7 +21,24 @@ export function PaymentReceivedCustomizeContentFields() {
        </p>
      </Stack>

-      <Stack></Stack>
+      <Stack>
+        {fieldsGroups.map((group) => (
+          <ElementCustomizeFieldsGroup label={group.label}>
+            {group.fields.map((item, index) => (
+              <ElementCustomizeContentItemFieldGroup
+                key={index}
+                inputGroupProps={{
+                  name: item.enableKey,
+                  label: item.label,
+                }}
+                switchProps={{
+                  name: item.labelKey,
+                }}
+              />
+            ))}
+          </ElementCustomizeFieldsGroup>
+        ))}
+      </Stack>
    </Stack>
  );
 }
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx
@@ -1,14 +1,23 @@
 import { Group, Stack } from '@/components';
-import { PaperTemplate, PaperTemplateProps } from '../../Invoices/InvoiceCustomize/PaperTemplate';
+import {
+  PaperTemplate,
+  PaperTemplateProps,
+} from '../../Invoices/InvoiceCustomize/PaperTemplate';

 export interface PaymentReceivedPaperTemplateProps extends PaperTemplateProps {
  billedToAddress?: Array<string>;
-  billedFromAddress?: Array<string>;
+  showBillingToAddress?: boolean;

+  billedFromAddress?: Array<string>;
+  showBilledFromAddress?: boolean;
+  billedToLabel?: string;
+
+  // Total.
  total?: string;
  showTotal?: boolean;
  totalLabel?: string;

+  // Subtotal.
  subtotal?: string;
  showSubtotal?: boolean;
  subtotalLabel?: string;
@@ -19,10 +28,12 @@ export interface PaymentReceivedPaperTemplateProps extends PaperTemplateProps {
    invoiceNumber: string;
  }>;

+  // Issue date.
  paymentReceivedDateLabel?: string;
  showPaymentReceivedDate?: boolean;
  paymentReceivedDate?: string;

+  // Payment received number.
  paymentReceivedNumebr?: string;
  paymentReceivedNumberLabel?: string;
  showPaymentReceivedNumber?: boolean;
@@ -49,6 +60,9 @@ export function PaymentReceivedPaperTemplate({
    '+1 762-339-5634',
    'ahmed@bigcapital.app',
  ],
+  showBilledFromAddress,
+  showBillingToAddress,
+
  total = '$1000.00',
  totalLabel = 'Total',
  showTotal = true,
@@ -96,8 +110,12 @@ export function PaymentReceivedPaperTemplate({
        </PaperTemplate.TermsList>

        <Group spacing={10}>
-          <PaperTemplate.Address items={billedToAddress} />
-          <PaperTemplate.Address items={billedFromAddress} />
+          {showBillingToAddress && (
+            <PaperTemplate.Address items={billedToAddress} />
+          )}
+          {showBilledFromAddress && (
+            <PaperTemplate.Address items={billedFromAddress} />
+          )}
        </Group>

        <Stack spacing={0}>
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts
@@ -9,14 +9,11 @@ export const initialValues = {
    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',

  // Top details.
-  showInvoiceNumber: true,
-  invoiceNumberLabel: 'Invoice number',
+  showPaymentReceivedNumber: true,
+  paymentReceivedNumberLabel: 'Payment number',

-  showDateIssue: true,
-  dateIssueLabel: 'Date of Issue',
-
-  showDueDate: true,
-  dueDateLabel: 'Due Date',
+  showPaymentReceivedDate: true,
+  paymentReceivedDateLabel: 'Date of Issue',

  // Company name
  companyName: 'Bigcapital Technology, Inc.',
@@ -36,26 +33,8 @@ export const initialValues = {
  showSubtotal: true,
  subtotalLabel: 'Subtotal',

-  showDiscount: true,
-  discountLabel: 'Discount',
-
-  showTaxes: true,
-
  showTotal: true,
  totalLabel: 'Total',
-
-  paymentMadeLabel: 'Payment Made',
-  showPaymentMade: true,
-
-  dueAmountLabel: 'Due Amount',
-  showDueAmount: true,
-
-  // Footer paragraphs.
-  termsConditionsLabel: 'Terms & Conditions',
-  showTermsConditions: true,
-
-  statementLabel: 'Statement',
-  showStatement: true,
 };

 export const fieldsGroups = [
@@ -63,19 +42,14 @@ export const fieldsGroups = [
    label: 'Header',
    fields: [
      {
-        labelKey: 'invoiceNumberLabel',
-        enableKey: 'showInvoiceNumber',
-        label: 'Invoice No.',
+        labelKey: 'paymentReceivedNumberLabel',
+        enableKey: 'showPaymentReceivedNumber',
+        label: 'Payment No.',
      },
      {
-        labelKey: 'dateIssueLabel',
-        enableKey: 'showDateIssue',
-        label: 'Issue Date',
-      },
-      {
-        labelKey: 'dueDateLabel',
-        enableKey: 'showDueDate',
-        label: 'Due Date',
+        labelKey: 'paymentReceivedDateLabel',
+        enableKey: 'showPaymentReceivedDate',
+        label: 'Payment Date',
      },
      {
        enableKey: 'showBillingToAddress',
@@ -96,39 +70,7 @@ export const fieldsGroups = [
        enableKey: 'showSubtotal',
        label: 'Subtotal',
      },
-      {
-        labelKey: 'discountLabel',
-        enableKey: 'showDiscount',
-        label: 'Discount',
-      },
-      { enableKey: 'showTaxes', label: 'Taxes' },
      { labelKey: 'totalLabel', enableKey: 'showTotal', label: 'Total' },
-      {
-        labelKey: 'paymentMadeLabel',
-        enableKey: 'showPaymentMade',
-        label: 'Payment Made',
-      },
-      {
-        labelKey: 'dueAmountLabel',
-        enableKey: 'showDueAmount',
-        label: 'Due Amount',
-      },
-    ],
-  },
-  {
-    label: 'Footer',
-    fields: [
-      {
-        labelKey: 'termsConditionsLabel',
-        enableKey: 'showTermsConditions',
-        label: 'Terms & Conditions',
-      },
-      {
-        labelKey: 'statementLabel',
-        enableKey: 'showStatement',
-        label: 'Statement',
-        labelPlaceholder: 'Statement',
-      },
    ],
  },
 ];
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts
@@ -8,10 +8,11 @@ export const initialValues = {
  companyLogo:
    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',

-  // Top details.
+  // Receipt Number
  showReceiptNumber: true,
  receiptNumberLabel: 'Receipt number',

+  // Receipt Date
  showReceiptDate: true,
  receiptDateLabel: 'Date of Issue',

@@ -29,17 +30,19 @@ export const initialValues = {
  itemRateLabel: 'Rate',
  itemTotalLabel: 'Total',

-  // Totals
+  // Subtotal
  showSubtotal: true,
  subtotalLabel: 'Subtotal',

+  // Total
  showTotal: true,
  totalLabel: 'Total',

-  // Footer paragraphs.
+  // Terms & Conditions
  termsConditionsLabel: 'Terms & Conditions',
  showTermsConditions: true,

+  // Customer Note
  customerNoteLabel: 'Customer Note',
  showCustomerNote: true,
 };