feat: invoice pdf customize

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>
   );
 }

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;

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
+  // Total
-  showSubtotal: true,
-  subtotalLabel: 'Subtotal',
-
-  showDiscount: true,
-  discountLabel: 'Discount',
-
-  showTaxes: true,
-
   showTotal: true,
   totalLabel: 'Total',
 
-  paymentMadeLabel: 'Payment Made',
+  // Subtotal
-  showPaymentMade: true,
+  showSubtotal: true,
+  subtotalLabel: 'Subtotal',
 
-  dueAmountLabel: 'Due Amount',
+  // Customer Note.
-  showDueAmount: true,
+  showCustomerNote: true,
+  customerNoteLabel: 'Customer Note',
 
-  // Footer paragraphs.
+  // Terms & Conditions
-  termsConditionsLabel: 'Terms & Conditions',
   showTermsConditions: true,
+  termsConditionsLabel: 'Terms & Conditions',
 
-  statementLabel: 'Statement',
+  // Date issue.
-  showStatement: true,
+  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',
+      },
+    ],
+  },
+];

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;
+}

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);

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx

@@ -1,10 +1,6 @@
-import clsx from 'classnames';
+import React from 'react';
-import * as R from 'ramda';
-import { useFormikContext } from 'formik';
-import styles from './InvoicePaperTemplate.module.scss';
 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,
-);

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>
   );
 }

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} />
+          {showBillingToAddress && (
-          <PaperTemplate.Address items={billedFromAddress} />
+            <PaperTemplate.Address items={billedToAddress} />
+          )}
+          {showBilledFromAddress && (
+            <PaperTemplate.Address items={billedFromAddress} />
+          )}
         </Group>
 
         <Stack spacing={0}>

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,
+  showPaymentReceivedNumber: true,
-  invoiceNumberLabel: 'Invoice number',
+  paymentReceivedNumberLabel: 'Payment number',
 
-  showDateIssue: true,
+  showPaymentReceivedDate: true,
-  dateIssueLabel: 'Date of Issue',
+  paymentReceivedDateLabel: 'Date of Issue',
-
-  showDueDate: true,
-  dueDateLabel: 'Due Date',
 
   // 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',
+        labelKey: 'paymentReceivedNumberLabel',
-        enableKey: 'showInvoiceNumber',
+        enableKey: 'showPaymentReceivedNumber',
-        label: 'Invoice No.',
+        label: 'Payment No.',
       },
       {
-        labelKey: 'dateIssueLabel',
+        labelKey: 'paymentReceivedDateLabel',
-        enableKey: 'showDateIssue',
+        enableKey: 'showPaymentReceivedDate',
-        label: 'Issue Date',
+        label: 'Payment Date',
-      },
-      {
-        labelKey: 'dueDateLabel',
-        enableKey: 'showDueDate',
-        label: 'Due 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',
-      },
     ],
   },
 ];

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,
 };