From 5b6270a184186eafffbd73631845838874f8df06 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 10 Sep 2024 23:32:34 +0200 Subject: [PATCH] feat: invoice pdf customize --- .../CreditNoteCutomizeContentFields.tsx | 24 ++++- .../CreditNotePaperTemplate.tsx | 6 ++ .../CreditNoteCustomize/constants.ts | 96 ++++++++++++------- .../CreditNotes/CreditNoteCustomize/types.ts | 42 +++++++- .../InvoiceCustomize/InvoiceCustomize.tsx | 22 ++++- .../InvoiceCustomize/InvoicePaperTemplate.tsx | 26 +---- .../PaymentReceivedCustomizeFieldsContent.tsx | 24 ++++- .../PaymentReceivedPaperTemplate.tsx | 26 ++++- .../PaymentReceivedCustomize/constants.ts | 78 ++------------- .../Receipts/ReceiptCustomize/constants.ts | 9 +- 10 files changed, 213 insertions(+), 140 deletions(-) diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCutomizeContentFields.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCutomizeContentFields.tsx index 9bd40caf6..923b59098 100644 --- 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() {

- + + {fieldsGroups.map((group) => ( + + {group.fields.map((item, index) => ( + + ))} + + ))} + ); } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx index 895d74eda..61de0f25a 100644 --- 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; billedFromAddress?: Array; + // 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; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts index 2524d1e88..20ecaf45f 100644 --- 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', + }, + ], + }, +]; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts index 22067f1ce..1d8cfb5f7 100644 --- 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 { - -} \ No newline at end of file + // 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; +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx index 3eefb60f6..090cadc88 100644 --- 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} > - + @@ -36,3 +41,16 @@ export default function InvoiceCustomizeContent() { ); } + +const withFormikProps =

( + Component: React.ComponentType

, +) => { + return (props: Omit) => { + const { values } = useFormikContext(); + + return ; + }; +}; + +export const InvoicePaperTemplateFormConnected = + R.compose(withFormikProps)(InvoicePaperTemplate); diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx index 4eae081a5..2fc4041dd 100644 --- 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; } -function InvoicePaperTemplateRoot({ +export function InvoicePaperTemplate({ primaryColor, secondaryColor, @@ -183,7 +179,7 @@ function InvoicePaperTemplateRoot({ '+1 762-339-5634', 'ahmed@bigcapital.app', ], -}: PaperTemplateProps) { +}: InvoicePaperTemplateProps) { return ( ); } - -const withFormikProps =

( - Component: React.ComponentType

, -) => { - return (props: Omit) => { - const { values } = useFormikContext(); - - return ; - }; -}; - -export const InvoicePaperTemplate = R.compose(withFormikProps)( - InvoicePaperTemplateRoot, -); diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsContent.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsContent.tsx index 94519a9b6..fd284f437 100644 --- 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() {

- + + {fieldsGroups.map((group) => ( + + {group.fields.map((item, index) => ( + + ))} + + ))} + ); } diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx index d43e9010a..ac0779d5a 100644 --- 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; - billedFromAddress?: Array; + showBillingToAddress?: boolean; + billedFromAddress?: Array; + 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({ - - + {showBillingToAddress && ( + + )} + {showBilledFromAddress && ( + + )} diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts index ac4a03dae..da939b914 100644 --- 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', - }, ], }, ]; diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts index 45930f6ef..b80b50162 100644 --- 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, };