From d690c6a3fe848727f9ae7cb7cab2490136b5aee1 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 14 Sep 2024 19:32:16 +0200 Subject: [PATCH] feat: optimize branding templates customiing --- .../ElementCustomizeFieldsGroup.tsx | 2 +- .../CreditNotePaperTemplate.tsx | 9 ++- .../EstimateCustomizeContent.tsx | 3 - .../EstimatePaperTemplate.tsx | 18 ++++-- .../Estimates/EstimateCustomize/constants.ts | 8 +-- .../InvoiceCustomize/InvoicePaperTemplate.tsx | 16 ++++-- .../InvoiceCustomize/PaperTemplate.tsx | 35 ++++++++++-- .../PaymentReceivedPaperTemplate.tsx | 31 ++++++++--- .../ReceiptCustomizeContent.tsx | 3 +- .../ReceiptCustomizeFieldsContent.tsx | 24 +++++++- .../ReceiptCustomize/ReceiptPaperTemplate.tsx | 39 +++++++++++-- .../Receipts/ReceiptCustomize/constants.ts | 55 ++++++++++++++++++- .../Sales/Receipts/ReceiptCustomize/types.ts | 11 ++-- 13 files changed, 209 insertions(+), 45 deletions(-) diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeFieldsGroup.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeFieldsGroup.tsx index 0e406f4f2..0ee08b93f 100644 --- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeFieldsGroup.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeFieldsGroup.tsx @@ -1,7 +1,7 @@ // @ts-nocheck +import { InputGroupProps, SwitchProps } from '@blueprintjs/core'; import { FInputGroup, FSwitch, Group, Stack } from '@/components'; import { CLASSES } from '@/constants'; -import { InputGroupProps, SwitchProps } from '@blueprintjs/core'; export function ElementCustomizeFieldsGroup({ label, diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx index 61de0f25a..d50c7d9ac 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx @@ -1,5 +1,8 @@ import { Group, Stack } from '@/components'; -import { PaperTemplate, PaperTemplateProps } from '../../Invoices/InvoiceCustomize/PaperTemplate'; +import { + PaperTemplate, + PaperTemplateProps, +} from '../../Invoices/InvoiceCustomize/PaperTemplate'; export interface CreditNotePaperTemplateProps extends PaperTemplateProps { billedToAddress?: Array; @@ -131,8 +134,8 @@ export function CreditNotePaperTemplate({ columns={[ { label: 'Item', accessor: 'item' }, { label: 'Description', accessor: 'item' }, - { label: 'Rate', accessor: 'rate' }, - { label: 'Total', accessor: 'total' }, + { label: 'Rate', accessor: 'rate', align: 'right' }, + { label: 'Total', accessor: 'total', align: 'right' }, ]} data={lines} /> diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx index 82f05c618..9d4dd2739 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx @@ -1,6 +1,4 @@ -import { Classes } from '@blueprintjs/core'; import { useFormikContext } from 'formik'; -import { Box } from '@/components'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { EstimateCustomizeGeneralField } from './EstimateCustomizeFieldsGeneral'; import { EstimateCustomizeContentFields } from './EstimateCustomizeFieldsContent'; @@ -14,7 +12,6 @@ import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTem export function EstimateCustomizeContent() { const { payload, name } = useDrawerContext(); const { closeDrawer } = useDrawerActions(); - const templateId = payload?.templateId || null; const handleSuccess = () => { diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx index 5432e5d45..f1375b8d0 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx @@ -58,6 +58,7 @@ export function EstimatePaperTemplate({ secondaryColor, showCompanyLogo = true, companyLogo, + companyName, billedToAddress = [ 'Bigcapital Technology, Inc.', @@ -74,6 +75,9 @@ export function EstimatePaperTemplate({ '+1 762-339-5634', 'ahmed@bigcapital.app', ], + showBilledFromAddress = true, + showBilledToAddress = true, + total = '$1000.00', totalLabel = 'Total', showTotal = true, @@ -141,8 +145,14 @@ export function EstimatePaperTemplate({ - - + {showBilledFromAddress && ( + {companyName}, ...billedFromAddress]} + /> + )} + {showBilledToAddress && ( + + )} @@ -150,8 +160,8 @@ export function EstimatePaperTemplate({ columns={[ { label: 'Item', accessor: 'item' }, { label: 'Description', accessor: 'item' }, - { label: 'Rate', accessor: 'rate' }, - { label: 'Total', accessor: 'total' }, + { label: 'Rate', accessor: 'rate', align: 'right' }, + { label: 'Total', accessor: 'total', align: 'right' }, ]} data={lines} /> diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts index d48e05f3d..14c0c2196 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts @@ -25,7 +25,7 @@ export const initialValues = { // Addresses showBilledFromAddress: true, - showBillingToAddress: true, + showBilledToAddress: true, billedToLabel: 'Billed To', // Entries @@ -55,7 +55,7 @@ export const fieldsGroups = [ fields: [ { labelKey: 'estimateNumberLabel', - enableKey: 'showEstimateeNumber', + enableKey: 'showEstimateNumber', label: 'Estimate No.', }, { @@ -65,11 +65,11 @@ export const fieldsGroups = [ }, { labelKey: 'expirationDateLabel', - enableKey: 'expirationDueDate', + enableKey: 'showExpirationDate', label: 'Expiration Date', }, { - enableKey: 'showBillingToAddress', + enableKey: 'showBilledToAddress', labelKey: 'billedToLabel', label: 'Bill To', }, diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx index 2fc4041dd..7a24f9685 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { PaperTemplate } from './PaperTemplate'; +import { PaperTemplate, PaperTemplateTotalBorder } from './PaperTemplate'; import { Group, Stack } from '@/components'; interface PapaerLine { @@ -223,8 +223,8 @@ export function InvoicePaperTemplate({ columns={[ { label: lineItemLabel, accessor: 'item' }, { label: lineDescriptionLabel, accessor: 'description' }, - { label: lineRateLabel, accessor: 'rate' }, - { label: lineTotalLabel, accessor: 'total' }, + { label: lineRateLabel, accessor: 'rate', align: 'right' }, + { label: lineTotalLabel, accessor: 'total', align: 'right' }, ]} data={lines} /> @@ -233,6 +233,7 @@ export function InvoicePaperTemplate({ )} {showDiscount && ( @@ -253,7 +254,12 @@ export function InvoicePaperTemplate({ )} {showTotal && ( - + )} {showPaymentMade && ( )} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx index fde94244d..571f3c753 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx @@ -10,6 +10,7 @@ export interface PaperTemplateProps { showCompanyLogo?: boolean; companyLogo?: string; + companyName?: string; bigtitle?: string; @@ -44,7 +45,11 @@ export function PaperTemplate({ } interface PaperTemplateTableProps { - columns: Array<{ accessor: string; label: string }>; + columns: Array<{ + accessor: string; + label: string; + align?: 'left' | 'center' | 'right'; + }>; data: Array>; } @@ -54,7 +59,9 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => { {columns.map((col, index) => ( - {col.label} + + {col.label} + ))} @@ -63,7 +70,9 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => { {data.map((_data: any) => ( {columns.map((column, index) => ( - {get(_data, column.accessor)} + + {get(_data, column.accessor)} + ))} ))} @@ -72,18 +81,34 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => { ); }; +export enum PaperTemplateTotalBorder { + Gray = 'gray', + Dark = 'dark', +} + PaperTemplate.Totals = ({ children }: { children: React.ReactNode }) => { - return
{children}
; + return
{children}
; }; PaperTemplate.TotalLine = ({ label, amount, + border, + style, }: { label: string; amount: string; + border?: PaperTemplateTotalBorder; + style?: any; }) => { return ( -
+
{label}
{amount}
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx index ac0779d5a..52318be2e 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx @@ -2,6 +2,7 @@ import { Group, Stack } from '@/components'; import { PaperTemplate, PaperTemplateProps, + PaperTemplateTotalBorder, } from '../../Invoices/InvoiceCustomize/PaperTemplate'; export interface PaymentReceivedPaperTemplateProps extends PaperTemplateProps { @@ -44,6 +45,7 @@ export function PaymentReceivedPaperTemplate({ secondaryColor, showCompanyLogo = true, companyLogo, + companyName = 'Bigcapital Technology, Inc.', billedToAddress = [ 'Bigcapital Technology, Inc.', @@ -62,6 +64,7 @@ export function PaymentReceivedPaperTemplate({ ], showBilledFromAddress, showBillingToAddress, + billedToLabel = 'Billed To', total = '$1000.00', totalLabel = 'Total', @@ -110,11 +113,15 @@ export function PaymentReceivedPaperTemplate({ - {showBillingToAddress && ( - - )} {showBilledFromAddress && ( - + {companyName}, ...billedFromAddress]} + /> + )} + {showBillingToAddress && ( + {billedToLabel}, ...billedToAddress]} + /> )} @@ -122,8 +129,12 @@ export function PaymentReceivedPaperTemplate({ @@ -132,10 +143,16 @@ export function PaymentReceivedPaperTemplate({ )} {showTotal && ( - + )} diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx index cc68a1759..abcffae35 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx @@ -1,10 +1,10 @@ +import { useFormikContext } from 'formik'; 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'; -import { useFormikContext } from 'formik'; import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm'; import { useDrawerActions } from '@/hooks/state'; import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; @@ -12,7 +12,6 @@ import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; export function ReceiptCustomizeContent() { const { payload, name } = useDrawerContext(); const { closeDrawer } = useDrawerActions(); - const templateId = payload?.templateId || null; const handleFormSuccess = () => { diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsContent.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsContent.tsx index ed73871e5..f7107e20b 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsContent.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsContent.tsx @@ -1,6 +1,11 @@ // @ts-nocheck import { Stack } from '@/components'; import { Classes } from '@blueprintjs/core'; +import { + ElementCustomizeContentItemFieldGroup, + ElementCustomizeFieldsGroup, +} from '@/containers/ElementCustomize/ElementCustomizeFieldsGroup'; +import { fieldsGroups } from './constants'; export function ReceiptCustomizeFieldsContent() { return ( @@ -16,7 +21,24 @@ export function ReceiptCustomizeFieldsContent() {

- + + {fieldsGroups.map((group) => ( + + {group.fields.map((item, index) => ( + + ))} + + ))} + ); } diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx index 148e34d5d..62631c155 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx @@ -1,26 +1,38 @@ import { Group, Stack } from '@/components'; -import { PaperTemplate, PaperTemplateProps } from '../../Invoices/InvoiceCustomize/PaperTemplate'; +import { + PaperTemplate, + PaperTemplateProps, +} from '../../Invoices/InvoiceCustomize/PaperTemplate'; export interface ReceiptPaperTemplateProps extends PaperTemplateProps { + // Addresses billedToAddress?: Array; billedFromAddress?: Array; + showBilledFromAddress?: boolean; + showBilledToAddress?: boolean; + billedToLabel?: 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; + // Lines lines?: Array<{ item: string; description: string; @@ -29,10 +41,12 @@ export interface ReceiptPaperTemplateProps extends PaperTemplateProps { total: string; }>; + // Receipt Date. receiptDateLabel?: string; showReceiptDate?: boolean; receiptDate?: string; + // Receipt Number receiptNumebr?: string; receiptNumberLabel?: string; showReceiptNumber?: boolean; @@ -43,7 +57,9 @@ export function ReceiptPaperTemplate({ secondaryColor, showCompanyLogo = true, companyLogo, + companyName = 'Bigcapital Technology, Inc.', + // # Address billedToAddress = [ 'Bigcapital Technology, Inc.', '131 Continental Dr Suite 305 Newark,', @@ -59,6 +75,10 @@ export function ReceiptPaperTemplate({ '+1 762-339-5634', 'ahmed@bigcapital.app', ], + showBilledFromAddress = true, + showBilledToAddress = true, + billedToLabel = 'Billed To', + total = '$1000.00', totalLabel = 'Total', showTotal = true, @@ -107,7 +127,6 @@ export function ReceiptPaperTemplate({ {receiptNumebr} )} - {showReceiptDate && ( {receiptDate} @@ -116,8 +135,16 @@ export function ReceiptPaperTemplate({ - - + {showBilledFromAddress && ( + {companyName}, ...billedFromAddress]} + /> + )} + {showBilledToAddress && ( + {billedToLabel}, ...billedToAddress]} + /> + )} @@ -125,8 +152,8 @@ export function ReceiptPaperTemplate({ columns={[ { label: 'Item', accessor: 'item' }, { label: 'Description', accessor: 'item' }, - { label: 'Rate', accessor: 'rate' }, - { label: 'Total', accessor: 'total' }, + { label: 'Rate', accessor: 'rate', align: 'right' }, + { label: 'Total', accessor: 'total', align: 'right' }, ]} data={lines} /> diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts index 241020ce2..cffb4cd49 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts @@ -23,7 +23,7 @@ export const initialValues = { // Addresses showBilledFromAddress: true, - showBillingToAddress: true, + showBilledToAddress: true, billedToLabel: 'Billed To', // Entries @@ -48,3 +48,56 @@ export const initialValues = { customerNoteLabel: 'Customer Note', showCustomerNote: true, }; + +export const fieldsGroups = [ + { + label: 'Header', + fields: [ + { + labelKey: 'receiptNumberLabel', + enableKey: 'showReceiptNumber', + label: 'Receipt Number', + }, + { + labelKey: 'receiptDateLabel', + enableKey: 'showReceiptDate', + label: 'Receipt Date', + }, + { + enableKey: 'showBilledToAddress', + labelKey: 'billedToLabel', + label: 'Bill To', + }, + { + enableKey: 'showBilledFromAddress', + label: 'Billed From', + }, + ], + }, + { + label: 'Totals', + fields: [ + { + labelKey: 'subtotalLabel', + enableKey: 'showSubtotal', + label: 'Subtotal', + }, + { labelKey: 'totalLabel', enableKey: 'showTotal', label: 'Total' }, + ], + }, + { + label: 'Statements', + fields: [ + { + enableKey: 'showCustomerNote', + labelKey: 'customerNoteLabel', + label: 'Customer Note', + }, + { + enableKey: 'showTermsConditions', + labelKey: 'termsConditionsLabel', + label: 'Terms & Conditions', + }, + ], + }, +]; diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts index 8b9ccc54c..d9257b0a8 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts @@ -9,10 +9,11 @@ export interface ReceiptCustomizeValues extends BrandingTemplateValues { showCompanyLogo?: boolean; companyLogo?: string; - // Top details. + // Receipt Number showReceiptNumber?: boolean; receiptNumberLabel?: string; + // Receipt Date. showReceiptDate?: boolean; receiptDateLabel?: string; @@ -21,7 +22,7 @@ export interface ReceiptCustomizeValues extends BrandingTemplateValues { // Addresses showBilledFromAddress?: boolean; - showBillingToAddress?: boolean; + showBilledToAddress?: boolean; billedToLabel?: string; // Entries @@ -30,17 +31,19 @@ export interface ReceiptCustomizeValues extends BrandingTemplateValues { itemRateLabel?: string; itemTotalLabel?: string; - // Totals + // Subtotal showSubtotal?: boolean; subtotalLabel?: string; + // Total showTotal?: boolean; totalLabel?: string; - // Statements + // Terms & Conditions termsConditionsLabel?: string; showTermsConditions?: boolean; + // Statement customerNoteLabel?: string; showCustomerNote?: boolean; }