feat: optimize branding templates customiing

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

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