diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx index 6d26b5bd5..f2893cd60 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx @@ -5,6 +5,7 @@ import { Classes } from '@blueprintjs/core'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { CreditNoteCustomizeGeneralField } from './CreditNoteCustomizeGeneralFields'; import { CreditNoteCustomizeContentFields } from './CreditNoteCutomizeContentFields'; +import { CreditNotePaperTemplate } from './CreditNotePaperTemplate'; import { CreditNoteCustomizeValues } from './types'; import { initialValues } from './constants'; @@ -18,7 +19,7 @@ export default function CreditNoteCustomizeContent() { onSubmit={handleFormSubmit} > - {/* */} + diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx new file mode 100644 index 000000000..895d74eda --- /dev/null +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx @@ -0,0 +1,161 @@ +import { Group, Stack } from '@/components'; +import { PaperTemplate, PaperTemplateProps } from '../../Invoices/InvoiceCustomize/PaperTemplate'; + +export interface CreditNotePaperTemplateProps extends PaperTemplateProps { + billedToAddress?: Array; + billedFromAddress?: Array; + + total?: string; + showTotal?: boolean; + totalLabel?: string; + + subtotal?: string; + showSubtotal?: boolean; + subtotalLabel?: string; + + showCustomerNote?: boolean; + customerNote?: string; + customerNoteLabel?: string; + + showTermsConditions?: boolean; + termsConditions?: string; + termsConditionsLabel?: string; + + lines?: Array<{ + item: string; + description: string; + rate: string; + quantity: string; + total: string; + }>; + + creditNoteDateLabel?: string; + showCreditNoteDate?: boolean; + creditNoteDate?: string; + + creditNoteNumebr?: string; + creditNoteNumberLabel?: string; + showCreditNoteNumber?: boolean; +} + +export function CreditNotePaperTemplate({ + primaryColor, + secondaryColor, + showCompanyLogo = true, + companyLogo, + + billedToAddress = [ + 'Bigcapital Technology, Inc.', + '131 Continental Dr Suite 305 Newark,', + 'Delaware 19713', + 'United States', + '+1 762-339-5634', + 'ahmed@bigcapital.app', + ], + billedFromAddress = [ + '131 Continental Dr Suite 305 Newark,', + 'Delaware 19713', + 'United States', + '+1 762-339-5634', + 'ahmed@bigcapital.app', + ], + total = '$1000.00', + totalLabel = 'Total', + showTotal = true, + + subtotal = '1000/00', + subtotalLabel = 'Subtotal', + showSubtotal = true, + + showCustomerNote = true, + customerNote = 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.', + customerNoteLabel = 'Customer Note', + + showTermsConditions = true, + termsConditions = 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.', + termsConditionsLabel = 'Terms & Conditions', + + lines = [ + { + item: 'Simply dummy text', + description: 'Simply dummy text of the printing and typesetting', + rate: '1', + quantity: '1000', + total: '$1000.00', + }, + ], + showCreditNoteNumber = true, + creditNoteNumberLabel = 'Credit Note Number', + creditNoteNumebr = '346D3D40-0001', + + creditNoteDate = 'September 3, 2024', + showCreditNoteDate = true, + creditNoteDateLabel = 'Credit Note Date', +}: CreditNotePaperTemplateProps) { + return ( + + + + {showCreditNoteNumber && ( + + {creditNoteNumebr} + + )} + + {showCreditNoteDate && ( + + {creditNoteDate} + + )} + + + + + + + + + + + {showSubtotal && ( + + )} + {showTotal && ( + + )} + + + + + {showCustomerNote && ( + + {customerNote} + + )} + {showTermsConditions && ( + + {termsConditions} + + )} + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx index 38f8fbe43..dc11aa27a 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx @@ -4,6 +4,7 @@ import { Classes } from '@blueprintjs/core'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { EstimateCustomizeGeneralField } from './EstimateCustomizeFieldsGeneral'; import { EstimateCustomizeContentFields } from './EstimateCustomizeFieldsContent'; +import { EstimatePaperTemplate } from './EstimatePaperTemplate'; import { EstimateCustomizeValues } from './types'; import { initialValues } from './constants'; @@ -16,9 +17,9 @@ export default function EstimateCustomizeContent() { initialValues={initialValues} onSubmit={handleFormSubmit} > - {/* - - */} + + + diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx new file mode 100644 index 000000000..3e76564bd --- /dev/null +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx @@ -0,0 +1,175 @@ +import { Group, Stack } from '@/components'; +import { PaperTemplate, PaperTemplateProps } from '../../Invoices/InvoiceCustomize/PaperTemplate'; + +export interface EstimatePaperTemplateProps extends PaperTemplateProps { + billedToAddress?: Array; + billedFromAddress?: Array; + + total?: string; + showTotal?: boolean; + totalLabel?: string; + + subtotal?: string; + showSubtotal?: boolean; + subtotalLabel?: string; + + showCustomerNote?: boolean; + customerNote?: string; + customerNoteLabel?: string; + + showTermsConditions?: boolean; + termsConditions?: string; + termsConditionsLabel?: string; + + lines?: Array<{ + item: string; + description: string; + rate: string; + quantity: string; + total: string; + }>; + + expirationDate?: string; + showExpirationDate?: boolean; + expirationDateLabel?: string; + + estimateDateLabel?: string; + showEstimateDate?: boolean; + estimateDate?: string; + + estimateNumebr?: string; + estimateNumberLabel?: string; + showEstimateNumber?: boolean; +} + +export function EstimatePaperTemplate({ + primaryColor, + secondaryColor, + showCompanyLogo = true, + companyLogo, + + billedToAddress = [ + 'Bigcapital Technology, Inc.', + '131 Continental Dr Suite 305 Newark,', + 'Delaware 19713', + 'United States', + '+1 762-339-5634', + 'ahmed@bigcapital.app', + ], + billedFromAddress = [ + '131 Continental Dr Suite 305 Newark,', + 'Delaware 19713', + 'United States', + '+1 762-339-5634', + 'ahmed@bigcapital.app', + ], + total = '$1000.00', + totalLabel = 'Total', + showTotal = true, + + subtotal = '1000/00', + subtotalLabel = 'Subtotal', + showSubtotal = true, + + showCustomerNote = true, + customerNote = 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.', + customerNoteLabel = 'Customer Note', + + showTermsConditions = true, + termsConditions = 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.', + termsConditionsLabel = 'Terms & Conditions', + + lines = [ + { + item: 'Simply dummy text', + description: 'Simply dummy text of the printing and typesetting', + rate: '1', + quantity: '1000', + total: '$1000.00', + }, + ], + showEstimateNumber = true, + estimateNumberLabel = 'Estimate Number', + estimateNumebr = '346D3D40-0001', + + estimateDate = 'September 3, 2024', + showEstimateDate = true, + estimateDateLabel = 'Estimate Date', + + expirationDateLabel = 'Expiration Date', + showExpirationDate = true, + expirationDate = 'September 3, 2024', +}: EstimatePaperTemplateProps) { + return ( + + + + {showEstimateNumber && ( + + {estimateNumebr} + + )} + + {showEstimateDate && ( + + {estimateDate} + + )} + + {showExpirationDate && ( + + {expirationDate} + + )} + + + + + + + + + + + {showSubtotal && ( + + )} + {showTotal && ( + + )} + + + + + {showCustomerNote && ( + + {customerNote} + + )} + {showTermsConditions && ( + + {termsConditions} + + )} + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx new file mode 100644 index 000000000..aa29523e9 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx @@ -0,0 +1,139 @@ +import React from 'react'; +import clsx from 'classnames'; +import { get } from 'lodash'; +import { Stack } from '@/components'; +import styles from './InvoicePaperTemplate.module.scss'; + +export interface PaperTemplateProps { + primaryColor?: string; + secondaryColor?: string; + + showCompanyLogo?: boolean; + companyLogo?: string; + + bigtitle?: string; + + children?: React.ReactNode; +} + +export function PaperTemplate({ + primaryColor, + secondaryColor, + showCompanyLogo, + companyLogo, + bigtitle = 'Invoice', + children, +}: PaperTemplateProps) { + return ( +
+ + +
+

{bigtitle}

+ + {showCompanyLogo && ( +
+ +
+ )} +
+ + {children} +
+ ); +} + +interface PaperTemplateTableProps { + columns: Array<{ accessor: string; label: string }>; + data: Array>; +} + +PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => { + return ( + + + + {columns.map((col, index) => ( + + ))} + + + + + {data.map((_data: any) => ( + + {columns.map((column, index) => ( + + ))} + + ))} + +
{col.label}
{get(_data, column.accessor)}
+ ); +}; + +PaperTemplate.Totals = ({ children }: { children: React.ReactNode }) => { + return
{children}
; +}; +PaperTemplate.TotalLine = ({ + label, + amount, +}: { + label: string; + amount: string; +}) => { + return ( +
+
{label}
+
{amount}
+
+ ); +}; + +PaperTemplate.MutedText = () => {}; + +PaperTemplate.Text = () => {}; + +PaperTemplate.Address = ({ items }: { items: Array }) => { + return ( + + {items.map((item, index) => ( +
{item}
+ ))} + + ); +}; + +PaperTemplate.Statement = ({ + label, + children, +}: { + label: string; + children: React.ReactNode; +}) => { + return ( +
+ {label &&
{label}
} +
{children}
+
+ ); +}; + +PaperTemplate.TermsList = ({ children }: { children: React.ReactNode }) => { + return
{children}
; +}; + +PaperTemplate.TermsItem = ({ + label, + children, +}: { + label: string; + children: React.ReactNode; +}) => { + return ( +
+
{label}
+
{children}
+
+ ); +}; diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx index 75afcdf12..b2308e619 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx @@ -5,6 +5,7 @@ import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { PaymentReceivedCustomizeGeneralField } from './PaymentReceivedCustomizeFieldsGeneral'; import { PaymentReceivedCustomizeContentFields } from './PaymentReceivedCustomizeFieldsContent'; import { PaymentReceivedCustomizeValues } from './types'; +import { PaymentReceivedPaperTemplate } from './PaymentReceivedPaperTemplate'; import { initialValues } from './constants'; export default function PaymentReceivedCustomizeContent() { @@ -16,9 +17,9 @@ export default function PaymentReceivedCustomizeContent() { initialValues={initialValues} onSubmit={handleFormSubmit} > - {/* - - */} + + + diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx new file mode 100644 index 000000000..d43e9010a --- /dev/null +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx @@ -0,0 +1,127 @@ +import { Group, Stack } from '@/components'; +import { PaperTemplate, PaperTemplateProps } from '../../Invoices/InvoiceCustomize/PaperTemplate'; + +export interface PaymentReceivedPaperTemplateProps extends PaperTemplateProps { + billedToAddress?: Array; + billedFromAddress?: Array; + + total?: string; + showTotal?: boolean; + totalLabel?: string; + + subtotal?: string; + showSubtotal?: boolean; + subtotalLabel?: string; + + lines?: Array<{ + paidAmount: string; + invoiceAmount: string; + invoiceNumber: string; + }>; + + paymentReceivedDateLabel?: string; + showPaymentReceivedDate?: boolean; + paymentReceivedDate?: string; + + paymentReceivedNumebr?: string; + paymentReceivedNumberLabel?: string; + showPaymentReceivedNumber?: boolean; +} + +export function PaymentReceivedPaperTemplate({ + primaryColor, + secondaryColor, + showCompanyLogo = true, + companyLogo, + + billedToAddress = [ + 'Bigcapital Technology, Inc.', + '131 Continental Dr Suite 305 Newark,', + 'Delaware 19713', + 'United States', + '+1 762-339-5634', + 'ahmed@bigcapital.app', + ], + billedFromAddress = [ + '131 Continental Dr Suite 305 Newark,', + 'Delaware 19713', + 'United States', + '+1 762-339-5634', + 'ahmed@bigcapital.app', + ], + total = '$1000.00', + totalLabel = 'Total', + showTotal = true, + + subtotal = '1000/00', + subtotalLabel = 'Subtotal', + showSubtotal = true, + + lines = [ + { + invoiceNumber: 'INV-00001', + invoiceAmount: '$1000.00', + paidAmount: '$1000.00', + }, + ], + showPaymentReceivedNumber = true, + paymentReceivedNumberLabel = 'Payment Number', + paymentReceivedNumebr = '346D3D40-0001', + + paymentReceivedDate = 'September 3, 2024', + showPaymentReceivedDate = true, + paymentReceivedDateLabel = 'Payment Date', +}: PaymentReceivedPaperTemplateProps) { + return ( + + + + {showPaymentReceivedNumber && ( + + {paymentReceivedNumebr} + + )} + + {showPaymentReceivedDate && ( + + {paymentReceivedDate} + + )} + + + + + + + + + + + {showSubtotal && ( + + )} + {showTotal && ( + + )} + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx index 30f41182e..439f0d7dc 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx @@ -1,9 +1,9 @@ -import React from 'react'; import { Box } from '@/components'; import { Classes } from '@blueprintjs/core'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { ReceiptCustomizeGeneralField } from './ReceiptCustomizeFieldsGeneral'; import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent'; +import { ReceiptPaperTemplate } from './ReceiptPaperTemplate'; import { ReceiptCustomizeValues } from './types'; import { initialValues } from './constants'; @@ -16,9 +16,9 @@ export default function ReceiptCustomizeContent() { initialValues={initialValues} onSubmit={handleFormSubmit} > - {/* - - */} + + + diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx new file mode 100644 index 000000000..148e34d5d --- /dev/null +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx @@ -0,0 +1,161 @@ +import { Group, Stack } from '@/components'; +import { PaperTemplate, PaperTemplateProps } from '../../Invoices/InvoiceCustomize/PaperTemplate'; + +export interface ReceiptPaperTemplateProps extends PaperTemplateProps { + billedToAddress?: Array; + billedFromAddress?: Array; + + total?: string; + showTotal?: boolean; + totalLabel?: string; + + subtotal?: string; + showSubtotal?: boolean; + subtotalLabel?: string; + + showCustomerNote?: boolean; + customerNote?: string; + customerNoteLabel?: string; + + showTermsConditions?: boolean; + termsConditions?: string; + termsConditionsLabel?: string; + + lines?: Array<{ + item: string; + description: string; + rate: string; + quantity: string; + total: string; + }>; + + receiptDateLabel?: string; + showReceiptDate?: boolean; + receiptDate?: string; + + receiptNumebr?: string; + receiptNumberLabel?: string; + showReceiptNumber?: boolean; +} + +export function ReceiptPaperTemplate({ + primaryColor, + secondaryColor, + showCompanyLogo = true, + companyLogo, + + billedToAddress = [ + 'Bigcapital Technology, Inc.', + '131 Continental Dr Suite 305 Newark,', + 'Delaware 19713', + 'United States', + '+1 762-339-5634', + 'ahmed@bigcapital.app', + ], + billedFromAddress = [ + '131 Continental Dr Suite 305 Newark,', + 'Delaware 19713', + 'United States', + '+1 762-339-5634', + 'ahmed@bigcapital.app', + ], + total = '$1000.00', + totalLabel = 'Total', + showTotal = true, + + subtotal = '1000/00', + subtotalLabel = 'Subtotal', + showSubtotal = true, + + showCustomerNote = true, + customerNote = 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.', + customerNoteLabel = 'Customer Note', + + showTermsConditions = true, + termsConditions = 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.', + termsConditionsLabel = 'Terms & Conditions', + + lines = [ + { + item: 'Simply dummy text', + description: 'Simply dummy text of the printing and typesetting', + rate: '1', + quantity: '1000', + total: '$1000.00', + }, + ], + showReceiptNumber = true, + receiptNumberLabel = 'Receipt Number', + receiptNumebr = '346D3D40-0001', + + receiptDate = 'September 3, 2024', + showReceiptDate = true, + receiptDateLabel = 'Receipt Date', +}: ReceiptPaperTemplateProps) { + return ( + + + + {showReceiptNumber && ( + + {receiptNumebr} + + )} + + {showReceiptDate && ( + + {receiptDate} + + )} + + + + + + + + + + + {showSubtotal && ( + + )} + {showTotal && ( + + )} + + + + + {showCustomerNote && ( + + {customerNote} + + )} + {showTermsConditions && ( + + {termsConditions} + + )} + + + + ); +}