feat: optimize branding templates customiing

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,

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: 'Rate', accessor: 'rate', align: 'right' },
-              { label: 'Total', accessor: 'total' },
+              { label: 'Total', accessor: 'total', align: 'right' },
             ]}
             data={lines}
           />

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 = () => {

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} />
+          {showBilledFromAddress && (
-          <PaperTemplate.Address items={billedFromAddress} />
+            <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: 'Rate', accessor: 'rate', align: 'right' },
-              { label: 'Total', accessor: 'total' },
+              { label: 'Total', accessor: 'total', align: 'right' },
             ]}
             data={lines}
           />

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',
       },

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: lineRateLabel, accessor: 'rate', align: 'right' },
-              { label: lineTotalLabel, accessor: 'total' },
+              { 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>

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>

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>

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 = () => {

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

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} />
+          {showBilledFromAddress && (
-          <PaperTemplate.Address items={billedFromAddress} />
+            <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: 'Rate', accessor: 'rate', align: 'right' },
-              { label: 'Total', accessor: 'total' },
+              { label: 'Total', accessor: 'total', align: 'right' },
             ]}
             data={lines}
           />

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

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