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
-  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',
+      },
+    ],
+  },
+];

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