feat: invoice pdf customize

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} />
-          <PaperTemplate.Address items={billedFromAddress} />
+          {showBillingToAddress && (
+            <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,
-  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',
-      },
     ],
   },
 ];