feat: optimize branding templates customiing

2026-02-16 12:50:38 +00:00 · 2024-09-14 19:32:16 +02:00
parent 28319c2cdc
commit d690c6a3fe
13 changed files with 209 additions and 45 deletions
--- 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,
--- 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<string>;
@@ -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}
          />
--- 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 = () => {
--- 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({
        </PaperTemplate.TermsList>

        <Group spacing={10}>
-          <PaperTemplate.Address items={billedToAddress} />
-          <PaperTemplate.Address items={billedFromAddress} />
+          {showBilledFromAddress && (
+            <PaperTemplate.Address
+              items={[<strong>{companyName}</strong>, ...billedFromAddress]}
+            />
+          )}
+          {showBilledToAddress && (
+            <PaperTemplate.Address items={billedToAddress} />
+          )}
        </Group>

        <Stack spacing={0}>
@@ -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}
          />
--- 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',
      },
--- 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({
              <PaperTemplate.TotalLine
                label={subtotalLabel}
                amount={subtotal}
+                border={PaperTemplateTotalBorder.Gray}
              />
            )}
            {showDiscount && (
@@ -253,7 +254,12 @@ export function InvoicePaperTemplate({
              </>
            )}
            {showTotal && (
-              <PaperTemplate.TotalLine label={totalLabel} amount={total} />
+              <PaperTemplate.TotalLine
+                label={totalLabel}
+                amount={total}
+                border={PaperTemplateTotalBorder.Dark}
+                style={{ fontWeight: 500 }}
+              />
            )}
            {showPaymentMade && (
              <PaperTemplate.TotalLine
@@ -265,6 +271,8 @@ export function InvoicePaperTemplate({
              <PaperTemplate.TotalLine
                label={balanceDueLabel}
                amount={balanceDue}
+                border={PaperTemplateTotalBorder.Dark}
+                style={{ fontWeight: 500 }}
              />
            )}
          </PaperTemplate.Totals>
--- 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<Record<string, any>>;
 }

@@ -54,7 +59,9 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
      <thead>
        <tr>
          {columns.map((col, index) => (
-            <th key={index}>{col.label}</th>
+            <th key={index} align={col.align}>
+              {col.label}
+            </th>
          ))}
        </tr>
      </thead>
@@ -63,7 +70,9 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
        {data.map((_data: any) => (
          <tr>
            {columns.map((column, index) => (
-              <td key={index}>{get(_data, column.accessor)}</td>
+              <td align={column.align} key={index}>
+                {get(_data, column.accessor)}
+              </td>
            ))}
          </tr>
        ))}
@@ -72,18 +81,34 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
  );
 };

+export enum PaperTemplateTotalBorder {
+  Gray = 'gray',
+  Dark = 'dark',
+}
+
 PaperTemplate.Totals = ({ children }: { children: React.ReactNode }) => {
-  return <div className={styles.totals}>{children}</div>;
+  return <div className={clsx(styles.totals)}>{children}</div>;
 };
 PaperTemplate.TotalLine = ({
  label,
  amount,
+  border,
+  style,
 }: {
  label: string;
  amount: string;
+  border?: PaperTemplateTotalBorder;
+  style?: any;
 }) => {
  return (
-    <div className={clsx(styles.totalsItem, styles.totalBottomGrayBordered)}>
+    <div
+      className={clsx(styles.totalsItem, {
+        [styles.totalBottomBordered]: border === PaperTemplateTotalBorder.Dark,
+        [styles.totalBottomGrayBordered]:
+          border === PaperTemplateTotalBorder.Gray,
+      })}
+      style={style}
+    >
      <div className={styles.totalsItemLabel}>{label}</div>
      <div className={styles.totalsItemAmount}>{amount}</div>
    </div>
--- 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({
        </PaperTemplate.TermsList>

        <Group spacing={10}>
-          {showBillingToAddress && (
-            <PaperTemplate.Address items={billedToAddress} />
-          )}
          {showBilledFromAddress && (
-            <PaperTemplate.Address items={billedFromAddress} />
+            <PaperTemplate.Address
+              items={[<strong>{companyName}</strong>, ...billedFromAddress]}
+            />
+          )}
+          {showBillingToAddress && (
+            <PaperTemplate.Address
+              items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
+            />
          )}
        </Group>

@@ -122,8 +129,12 @@ export function PaymentReceivedPaperTemplate({
          <PaperTemplate.Table
            columns={[
              { label: 'Invoice #', accessor: 'invoiceNumber' },
-              { label: 'Invoice Amount', accessor: 'invoiceAmount' },
-              { label: 'Paid Amount', accessor: 'paidAmount' },
+              {
+                label: 'Invoice Amount',
+                accessor: 'invoiceAmount',
+                align: 'right',
+              },
+              { label: 'Paid Amount', accessor: 'paidAmount', align: 'right' },
            ]}
            data={lines}
          />
@@ -132,10 +143,16 @@ export function PaymentReceivedPaperTemplate({
              <PaperTemplate.TotalLine
                label={subtotalLabel}
                amount={subtotal}
+                border={PaperTemplateTotalBorder.Gray}
              />
            )}
            {showTotal && (
-              <PaperTemplate.TotalLine label={totalLabel} amount={total} />
+              <PaperTemplate.TotalLine
+                label={totalLabel}
+                amount={total}
+                border={PaperTemplateTotalBorder.Dark}
+                style={{ fontWeight: 500 }}
+              />
            )}
          </PaperTemplate.Totals>
        </Stack>
--- 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 = () => {
--- 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() {
        </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>
  );
 }
--- 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<string>;
  billedFromAddress?: Array<string>;
+  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}
            </PaperTemplate.TermsItem>
          )}
-
          {showReceiptDate && (
            <PaperTemplate.TermsItem label={receiptDateLabel}>
              {receiptDate}
@@ -116,8 +135,16 @@ export function ReceiptPaperTemplate({
        </PaperTemplate.TermsList>

        <Group spacing={10}>
-          <PaperTemplate.Address items={billedToAddress} />
-          <PaperTemplate.Address items={billedFromAddress} />
+          {showBilledFromAddress && (
+            <PaperTemplate.Address
+              items={[<strong>{companyName}</strong>, ...billedFromAddress]}
+            />
+          )}
+          {showBilledToAddress && (
+            <PaperTemplate.Address
+              items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
+            />
+          )}
        </Group>

        <Stack spacing={0}>
@@ -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}
          />
--- 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',
+      },
+    ],
+  },
+];
--- 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;
 }