feat: paper template customize

2026-02-16 04:40:32 +00:00 · 2024-09-10 21:54:37 +02:00
parent 77a1e35ff4
commit 716dec799a
19 changed files with 269 additions and 293 deletions
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeFieldsGroup.tsx
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeFieldsGroup.tsx
@@ -0,0 +1,40 @@
+// @ts-nocheck
+import { FInputGroup, FSwitch, Group, Stack } from '@/components';
+import { CLASSES } from '@/constants';
+import { InputGroupProps, SwitchProps } from '@blueprintjs/core';
+
+export function ElementCustomizeFieldsGroup({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Stack spacing={20}>
+      <h4 className={CLASSES.TEXT_MUTED} style={{ fontWeight: 600 }}>
+        {label}
+      </h4>
+
+      <Stack spacing={14}>{children}</Stack>
+    </Stack>
+  );
+}
+
+export function ElementCustomizeContentItemFieldGroup({
+  inputGroupProps,
+  switchProps,
+}: {
+  inputGroupProps: InputGroupProps;
+  switchProps?: SwitchProps;
+}) {
+  return (
+    <Group spacing={14} position={'apart'}>
+      <FSwitch {...inputGroupProps} fastField />
+
+      {switchProps?.name && (
+        <FInputGroup {...switchProps} style={{ maxWidth: 150 }} fastField />
+      )}
+    </Group>
+  );
+}
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
@@ -1,13 +1,12 @@
-import React from 'react';
 import { Box } from '@/components';
 import { Classes } from '@blueprintjs/core';
-// import { InvoicePaperTemplate } from './InvoicePaperTemplate';
 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';
+import { useFormikContext } from 'formik';

 export default function CreditNoteCustomizeContent() {
  const handleFormSubmit = (values: CreditNoteCustomizeValues) => {};
@@ -19,7 +18,7 @@ export default function CreditNoteCustomizeContent() {
        onSubmit={handleFormSubmit}
      >
        <ElementCustomize.PaperTemplate>
-          <CreditNotePaperTemplate />
+          <CreditNotePaperTemplateFormConnected />
        </ElementCustomize.PaperTemplate>

        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
@@ -37,3 +36,9 @@ export default function CreditNoteCustomizeContent() {
    </Box>
  );
 }
+
+function CreditNotePaperTemplateFormConnected() {
+  const { values } = useFormikContext<CreditNoteCustomizeValues>();
+
+  return <CreditNotePaperTemplate {...values} />;
+}
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx
@@ -18,7 +18,7 @@ export function CreditNoteCustomizeGeneralField() {
        <FFormGroup
          name={'primaryColor'}
          label={'Primary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
          inline
          fastField
        >
@@ -32,7 +32,7 @@ export function CreditNoteCustomizeGeneralField() {
        <FFormGroup
          name={'secondaryColor'}
          label={'Secondary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
          inline
          fastField
        >
@@ -47,7 +47,7 @@ export function CreditNoteCustomizeGeneralField() {
          <FSwitch
            name={'showCompanyLogo'}
            label={'Display company logo in the paper'}
-            // className={styles.showCompanyLogoField}
+            style={{ fontSize: 14 }}
            large
            fastField
          />
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx
@@ -7,6 +7,7 @@ import { EstimateCustomizeContentFields } from './EstimateCustomizeFieldsContent
 import { EstimatePaperTemplate } from './EstimatePaperTemplate';
 import { EstimateCustomizeValues } from './types';
 import { initialValues } from './constants';
+import { useFormikContext } from 'formik';

 export default function EstimateCustomizeContent() {
  const handleFormSubmit = (values: EstimateCustomizeValues) => {};
@@ -18,7 +19,7 @@ export default function EstimateCustomizeContent() {
        onSubmit={handleFormSubmit}
      >
        <ElementCustomize.PaperTemplate>
-          <EstimatePaperTemplate />
+          <EstimatePaperTemplateFormConnected />
        </ElementCustomize.PaperTemplate>

        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
@@ -36,3 +37,9 @@ export default function EstimateCustomizeContent() {
    </Box>
  );
 }
+
+function EstimatePaperTemplateFormConnected() {
+  const { values } = useFormikContext<EstimateCustomizeValues>();
+
+  return <EstimatePaperTemplate {...values} />;
+}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
@@ -19,7 +19,7 @@ export function EstimateCustomizeGeneralField() {
        <FFormGroup
          name={'primaryColor'}
          label={'Primary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
          inline
          fastField
        >
@@ -33,7 +33,7 @@ export function EstimateCustomizeGeneralField() {
        <FFormGroup
          name={'secondaryColor'}
          label={'Secondary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
          inline
          fastField
        >
@@ -48,7 +48,7 @@ export function EstimateCustomizeGeneralField() {
          <FSwitch
            name={'showCompanyLogo'}
            label={'Display company logo in the paper'}
-            // className={styles.showCompanyLogoField}
+            style={{ fontSize: 14 }}
            large
            fastField
          />
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
@@ -1,10 +1,32 @@
 import { Group, Stack } from '@/components';
-import { PaperTemplate, PaperTemplateProps } from '../../Invoices/InvoiceCustomize/PaperTemplate';
+import {
+  PaperTemplate,
+  PaperTemplateProps,
+} from '../../Invoices/InvoiceCustomize/PaperTemplate';

 export interface EstimatePaperTemplateProps extends PaperTemplateProps {
+  estimateNumebr?: string;
+  estimateNumberLabel?: string;
+  showEstimateNumber?: boolean;
+
+  expirationDate?: string;
+  showExpirationDate?: boolean;
+  expirationDateLabel?: string;
+
+  estimateDateLabel?: string;
+  showEstimateDate?: boolean;
+  estimateDate?: string;
+
+  companyName?: string;
+
+  // Address
+  showBilledToAddress?: boolean;
  billedToAddress?: Array<string>;
+
+  showBilledFromAddress?: boolean;
  billedFromAddress?: Array<string>;

+  // Totals
  total?: string;
  showTotal?: boolean;
  totalLabel?: string;
@@ -13,6 +35,7 @@ export interface EstimatePaperTemplateProps extends PaperTemplateProps {
  showSubtotal?: boolean;
  subtotalLabel?: string;

+  // Statements
  showCustomerNote?: boolean;
  customerNote?: string;
  customerNoteLabel?: string;
@@ -28,18 +51,6 @@ export interface EstimatePaperTemplateProps extends PaperTemplateProps {
    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({
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts
@@ -1,4 +1,3 @@
-
 export const initialValues = {
  // Colors
  primaryColor: '#2c3dd8',
@@ -13,8 +12,8 @@ export const initialValues = {
  showEstimateNumber: true,
  estimateNumberLabel: 'Estimate number',

-  showDateIssue: true,
-  dateIssueLabel: 'Date of Issue',
+  estimateDateLabel: 'Date of Issue',
+  showEstimateDate: true,

  showExpirationDate: true,
  expirationDateLabel: 'Expiration Date',
@@ -37,24 +36,17 @@ export const initialValues = {
  showSubtotal: true,
  subtotalLabel: 'Subtotal',

-  showDiscount: true,
-  discountLabel: 'Discount',
-
-  showTaxes: true,
-
  showTotal: true,
  totalLabel: 'Total',

-  // Footer paragraphs.
-  termsConditionsLabel: 'Terms & Conditions',
+  // Statements
+  showCustomerNote: true,
+  customerNoteLabel: 'Customer Note',
+
  showTermsConditions: true,
-
-  statementLabel: 'Statement',
-  showStatement: true,
+  termsConditionsLabel: 'Terms & Conditions',
 };

-
-
 export const fieldsGroups = [
  {
    label: 'Header',
@@ -65,8 +57,8 @@ export const fieldsGroups = [
        label: 'Estimate No.',
      },
      {
-        labelKey: 'dateIssueLabel',
-        enableKey: 'showDateIssue',
+        labelKey: 'estimateDateLabel',
+        enableKey: 'showEstimateDate',
        label: 'Issue Date',
      },
      {
@@ -93,12 +85,6 @@ export const fieldsGroups = [
        enableKey: 'showSubtotal',
        label: 'Subtotal',
      },
-      {
-        labelKey: 'discountLabel',
-        enableKey: 'showDiscount',
-        label: 'Discount',
-      },
-      { enableKey: 'showTaxes', label: 'Taxes' },
      { labelKey: 'totalLabel', enableKey: 'showTotal', label: 'Total' },
    ],
  },
@@ -111,8 +97,8 @@ export const fieldsGroups = [
        label: 'Terms & Conditions',
      },
      {
-        labelKey: 'statementLabel',
-        enableKey: 'showStatement',
+        labelKey: 'customerNoteLabel',
+        enableKey: 'showCustomerNote',
        label: 'Statement',
        labelPlaceholder: 'Statement',
      },
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts
@@ -8,14 +8,14 @@ export interface EstimateCustomizeValues {
  companyLogo?: string;

  // Top details.
-  showInvoiceNumber?: boolean;
-  invoiceNumberLabel?: string;
+  estimateNumberLabel?: string;
+  showEstimateNumber?: boolean;

-  showDateIssue?: boolean;
-  dateIssueLabel?: string;
+  showExpirationDate?: boolean;
+  expirationDateLabel?: string;

-  showDueDate?: boolean;
-  dueDateLabel?: string;
+  estimateDateLabel?: string;
+  showEstimateDate?: boolean;

  // Company name
  companyName?: string;
@@ -35,24 +35,13 @@ export interface EstimateCustomizeValues {
  showSubtotal?: boolean;
  subtotalLabel?: string;

-  showDiscount?: boolean;
-  discountLabel?: string;
-
-  showTaxes?: boolean;
-
  showTotal?: boolean;
  totalLabel?: string;

-  paymentMadeLabel?: string;
-  showPaymentMade?: boolean;
+  // Statements
+  showCustomerNote?: boolean;
+  customerNoteLabel?: string;

-  dueAmountLabel?: string;
-  showDueAmount?: boolean;
-
-  // Footer paragraphs.
-  termsConditionsLabel?: string;
  showTermsConditions?: boolean;
-
-  statementLabel?: string;
-  showStatement?: boolean;
+  termsConditionsLabel?: string;
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
@@ -3,7 +3,6 @@ import { Classes, Text } from '@blueprintjs/core';
 import { FFormGroup, FSwitch, Group, Stack } from '@/components';
 import { FColorInput } from '@/components/Forms/FColorInput';
 import { CreditCardIcon } from '@/icons/CreditCardIcon';
-import styles from './InvoiceCustomizeFields.module.scss';

 export function InvoiceCustomizeGeneralField() {
  return (
@@ -20,7 +19,7 @@ export function InvoiceCustomizeGeneralField() {
        <FFormGroup
          name={'primaryColor'}
          label={'Primary Color'}
-          className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
          inline
          fastField
        >
@@ -34,7 +33,7 @@ export function InvoiceCustomizeGeneralField() {
        <FFormGroup
          name={'secondaryColor'}
          label={'Secondary Color'}
-          className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
          inline
          fastField
        >
@@ -49,7 +48,7 @@ export function InvoiceCustomizeGeneralField() {
          <FSwitch
            name={'showCompanyLogo'}
            label={'Display company logo in the paper'}
-            className={styles.showCompanyLogoField}
+            style={{ fontSize: 14 }}
            large
            fastField
          />
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCutomizeContentFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCutomizeContentFields.tsx
@@ -1,8 +1,11 @@
 // @ts-nocheck
-import { FInputGroup, FSwitch, Group, Stack } from '@/components';
-import { CLASSES } from '@/constants';
+import { Stack } from '@/components';
 import { Classes } from '@blueprintjs/core';
 import { fieldsGroups } from './constants';
+import {
+  ElementCustomizeFieldsGroup,
+  ElementCustomizeContentItemFieldGroup,
+} from '@/containers/ElementCustomize/ElementCustomizeFieldsGroup';

 export function InvoiceCustomizeContentFields() {
  return (
@@ -20,25 +23,20 @@ export function InvoiceCustomizeContentFields() {

      <Stack>
        {fieldsGroups.map((group) => (
-          <>
-            <h4 className={CLASSES.TEXT_MUTED} style={{ fontWeight: 600 }}>
-              {group.label}
-            </h4>
-            <Stack spacing={14}>
-              {group.fields.map((item, index) => (
-                <Group spacing={14} position={'apart'} key={index}>
-                  <FSwitch name={item.enableKey} label={item.label} fastField />
-                  {item.labelKey && (
-                    <FInputGroup
-                      name={item.labelKey}
-                      style={{ maxWidth: 150 }}
-                      fastField
-                    />
-                  )}
-                </Group>
-              ))}
-            </Stack>
-          </>
+          <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/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss
@@ -22,7 +22,6 @@
 }

 .details {
-  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 4px;
@@ -40,7 +39,6 @@
 .addressRoot{
  display: flex;
  flex-direction: row;
-  margin-bottom: 25px;
 }

 .addressBillTo{
@@ -101,7 +99,6 @@
 .totals{
  display: flex;
  flex-direction: column;
-  margin-bottom: 40px;
  margin-left: auto;
  width: 300px;
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
@@ -2,6 +2,9 @@ import clsx from 'classnames';
 import * as R from 'ramda';
 import { useFormikContext } from 'formik';
 import styles from './InvoicePaperTemplate.module.scss';
+import { PaperTemplate } from './PaperTemplate';
+import { Group, Stack } from '@/components';
+import React from 'react';

 interface PapaerLine {
  item?: string;
@@ -85,15 +88,14 @@ interface PaperTemplateProps {
  lines?: Array<PapaerLine>;
  taxes?: Array<PaperTax>;

-  billedFromAddres?: Array<string>;
-  billedToAddress?: Array<string>;
+  billedFromAddres?: Array<string | React.ReactNode>;
+  billedToAddress?: Array<string | React.ReactNode>;
 }

 function InvoicePaperTemplateRoot({
  primaryColor,
  secondaryColor,

-  bigtitle = 'Invoice',
  companyName = 'Bigcapital Technology, Inc.',

  showCompanyLogo = true,
@@ -183,156 +185,109 @@ function InvoicePaperTemplateRoot({
  ],
 }: PaperTemplateProps) {
  return (
-    <div className={styles.root}>
-      <style>{`:root { --invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor}; }`}</style>
-
-      <div>
-        <h1 className={styles.bigTitle}>{bigtitle}</h1>
-
-        {showCompanyLogo && (
-          <div className={styles.logoWrap}>
-            <img alt="" src={companyLogo} />
-          </div>
-        )}
-      </div>
-
-      <div className={styles.details}>
-        {showInvoiceNumber && (
-          <div className={styles.detail}>
-            <div className={styles.detailLabel}>{invoiceNumberLabel}</div>
-            <div>{invoiceNumber}</div>
-          </div>
-        )}
-        {showDateIssue && (
-          <div className={styles.detail}>
-            <div className={styles.detailLabel}>{dateIssueLabel}</div>
-            <div>{dateIssue}</div>
-          </div>
-        )}
-        {showDueDate && (
-          <div className={styles.detail}>
-            <div className={styles.detailLabel}>{dueDateLabel}</div>
-            <div>{dueDate}</div>
-          </div>
-        )}
-      </div>
-
-      <div className={styles.addressRoot}>
-        {showBilledFromAddress && (
-          <div className={styles.addressBillTo}>
-            <strong>{companyName}</strong> <br />
-            {billedFromAddres.map((text, index) => (
-              <div key={index}>{text}</div>
-            ))}
-          </div>
-        )}
-
-        {showBillingToAddress && (
-          <div className={styles.addressFrom}>
-            <strong>{billedToLabel}</strong> <br />
-            {billedToAddress.map((text, index) => (
-              <div key={index}>{text}</div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <table className={styles.table}>
-        <thead>
-          <tr>
-            <th>{lineItemLabel}</th>
-            <th>{lineDescriptionLabel}</th>
-            <th className={styles.rate}>{lineRateLabel}</th>
-            <th className={styles.total}>{lineTotalLabel}</th>
-          </tr>
-        </thead>
-
-        <tbody className={styles.tableBody}>
-          {lines.map((line, index) => (
-            <tr key={index}>
-              <td>{line.item}</td>
-              <td>{line.description}</td>
-              <td className={styles.rate}>
-                {line.quantity} X {line.rate}
-              </td>
-              <td className={styles.total}>{line.total}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      <div style={{ display: 'flex' }}>
-        <div className={styles.totals}>
-          {showSubtotal && (
-            <div
-              className={clsx(
-                styles.totalsItem,
-                styles.totalBottomGrayBordered,
-              )}
-            >
-              <div className={styles.totalsItemLabel}>{subtotalLabel}</div>
-              <div className={styles.totalsItemAmount}>{subtotal}</div>
-            </div>
+    <PaperTemplate
+      primaryColor={primaryColor}
+      secondaryColor={secondaryColor}
+      showCompanyLogo={showCompanyLogo}
+      companyLogo={companyLogo}
+      bigtitle={'Invoice'}
+    >
+      <Stack spacing={24}>
+        <PaperTemplate.TermsList>
+          {showInvoiceNumber && (
+            <PaperTemplate.TermsItem label={invoiceNumberLabel}>
+              {invoiceNumber}
+            </PaperTemplate.TermsItem>
          )}
-
-          {showDiscount && (
-            <div className={styles.totalsItem}>
-              <div className={styles.totalsItemLabel}>{discountLabel}</div>
-              <div className={styles.totalsItemAmount}>{discount}</div>
-            </div>
+          {showDateIssue && (
+            <PaperTemplate.TermsItem label={dateIssueLabel}>
+              {dateIssue}
+            </PaperTemplate.TermsItem>
          )}
-
-          {showTaxes && (
-            <>
-              {taxes.map((tax, index) => (
-                <div key={index} className={styles.totalsItem}>
-                  <div className={styles.totalsItemLabel}>{tax.label}</div>
-                  <div className={styles.totalsItemAmount}>{tax.amount}</div>
-                </div>
-              ))}
-            </>
+          {showDueDate && (
+            <PaperTemplate.TermsItem label={dueDateLabel}>
+              {dueDate}
+            </PaperTemplate.TermsItem>
          )}
+        </PaperTemplate.TermsList>

-          {showTotal && (
-            <div
-              className={clsx(styles.totalsItem, styles.totalBottomBordered)}
-            >
-              <div className={styles.totalsItemLabel}>{totalLabel}</div>
-              <div className={styles.totalsItemAmount}>{total}</div>
-            </div>
+        <Group spacing={10}>
+          {showBilledFromAddress && (
+            <PaperTemplate.Address
+              items={[<strong>{companyName}</strong>, ...billedFromAddres]}
+            />
          )}
-
-          {showPaymentMade && (
-            <div className={styles.totalsItem}>
-              <div className={styles.totalsItemLabel}>{paymentMadeLabel}</div>
-              <div className={styles.totalsItemAmount}>{paymentMade}</div>
-            </div>
+          {showBillingToAddress && (
+            <PaperTemplate.Address items={billedToAddress} />
          )}
+        </Group>

-          {showBalanceDue && (
-            <div
-              className={clsx(styles.totalsItem, styles.totalBottomBordered)}
-            >
-              <div className={styles.totalsItemLabel}>{balanceDueLabel}</div>
-              <div className={styles.totalsItemAmount}>{balanceDue}</div>
-            </div>
+        <Stack spacing={0}>
+          <PaperTemplate.Table
+            columns={[
+              { label: lineItemLabel, accessor: 'item' },
+              { label: lineDescriptionLabel, accessor: 'description' },
+              { label: lineRateLabel, accessor: 'rate' },
+              { label: lineTotalLabel, accessor: 'total' },
+            ]}
+            data={lines}
+          />
+          <PaperTemplate.Totals>
+            {showSubtotal && (
+              <PaperTemplate.TotalLine
+                label={subtotalLabel}
+                amount={subtotal}
+              />
+            )}
+            {showDiscount && (
+              <PaperTemplate.TotalLine
+                label={discountLabel}
+                amount={discount}
+              />
+            )}
+            {showTaxes && (
+              <>
+                {taxes.map((tax, index) => (
+                  <PaperTemplate.TotalLine
+                    key={index}
+                    label={tax.label}
+                    amount={tax.amount}
+                  />
+                ))}
+              </>
+            )}
+            {showTotal && (
+              <PaperTemplate.TotalLine label={totalLabel} amount={total} />
+            )}
+            {showPaymentMade && (
+              <PaperTemplate.TotalLine
+                label={paymentMadeLabel}
+                amount={paymentMade}
+              />
+            )}
+            {showBalanceDue && (
+              <PaperTemplate.TotalLine
+                label={balanceDueLabel}
+                amount={balanceDue}
+              />
+            )}
+          </PaperTemplate.Totals>
+        </Stack>
+
+        <Stack spacing={0}>
+          {showTermsConditions && (
+            <PaperTemplate.Statement label={termsConditionsLabel}>
+              {termsConditions}
+            </PaperTemplate.Statement>
          )}
-        </div>
-      </div>
-
-      {showTermsConditions && (
-        <div className={styles.paragraph}>
-          <div className={styles.paragraphLabel}>{termsConditionsLabel}</div>
-          <div>{termsConditions}</div>
-        </div>
-      )}
-      {showStatement && (
-        <div className={styles.paragraph}>
-          <div className={styles.paragraphLabel}>{statementLabel}</div>
-          <div>{statement}</div>
-        </div>
-      )}
-    </div>
+          {showStatement && (
+            <PaperTemplate.Statement label={statementLabel}>
+              {statement}
+            </PaperTemplate.Statement>
+          )}
+        </Stack>
+      </Stack>
+    </PaperTemplate>
  );
 }

--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
@@ -94,7 +94,11 @@ PaperTemplate.MutedText = () => {};

 PaperTemplate.Text = () => {};

-PaperTemplate.Address = ({ items }: { items: Array<string> }) => {
+PaperTemplate.Address = ({
+  items,
+}: {
+  items: Array<string | React.ReactNode>;
+}) => {
  return (
    <Stack spacing={0}>
      {items.map((item, index) => (
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Box } from '@/components';
+import { useFormikContext } from 'formik';
 import { Classes } from '@blueprintjs/core';
+import { Box } from '@/components';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { PaymentReceivedCustomizeGeneralField } from './PaymentReceivedCustomizeFieldsGeneral';
 import { PaymentReceivedCustomizeContentFields } from './PaymentReceivedCustomizeFieldsContent';
@@ -18,7 +19,7 @@ export default function PaymentReceivedCustomizeContent() {
        onSubmit={handleFormSubmit}
      >
        <ElementCustomize.PaperTemplate>
-          <PaymentReceivedPaperTemplate />
+          <PaymentReceivedPaperTemplateFormConnected />
        </ElementCustomize.PaperTemplate>

        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
@@ -36,3 +37,9 @@ export default function PaymentReceivedCustomizeContent() {
    </Box>
  );
 }
+
+function PaymentReceivedPaperTemplateFormConnected() {
+  const { values } = useFormikContext<PaymentReceivedCustomizeValues>();
+
+  return <PaymentReceivedPaperTemplate {...values} />;
+}
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
@@ -19,7 +19,7 @@ export function PaymentReceivedCustomizeGeneralField() {
        <FFormGroup
          name={'primaryColor'}
          label={'Primary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
          inline
          fastField
        >
@@ -33,7 +33,7 @@ export function PaymentReceivedCustomizeGeneralField() {
        <FFormGroup
          name={'secondaryColor'}
          label={'Secondary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
          inline
          fastField
        >
@@ -48,7 +48,7 @@ export function PaymentReceivedCustomizeGeneralField() {
          <FSwitch
            name={'showCompanyLogo'}
            label={'Display company logo in the paper'}
-            // className={styles.showCompanyLogoField}
+            style={{ fontSize: 14 }}
            large
            fastField
          />
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx
@@ -6,6 +6,7 @@ import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent';
 import { ReceiptPaperTemplate } from './ReceiptPaperTemplate';
 import { ReceiptCustomizeValues } from './types';
 import { initialValues } from './constants';
+import { useFormikContext } from 'formik';

 export default function ReceiptCustomizeContent() {
  const handleFormSubmit = (values: ReceiptCustomizeValues) => {};
@@ -17,7 +18,7 @@ export default function ReceiptCustomizeContent() {
        onSubmit={handleFormSubmit}
      >
        <ElementCustomize.PaperTemplate>
-          <ReceiptPaperTemplate />
+          <ReceiptPaperTemplateFormConnected />
        </ElementCustomize.PaperTemplate>

        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
@@ -35,3 +36,9 @@ export default function ReceiptCustomizeContent() {
    </Box>
  );
 }
+
+function ReceiptPaperTemplateFormConnected() {
+  const { values } = useFormikContext<ReceiptCustomizeValues>();
+
+  return <ReceiptPaperTemplate {...values} />;
+}
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx
@@ -2,7 +2,6 @@
 import { Classes } from '@blueprintjs/core';
 import { FFormGroup, FSwitch, Stack } from '@/components';
 import { FColorInput } from '@/components/Forms/FColorInput';
-// import styles from './InvoiceCustomizeFields.module.scss';

 export function ReceiptCustomizeGeneralField() {
  return (
@@ -19,7 +18,7 @@ export function ReceiptCustomizeGeneralField() {
        <FFormGroup
          name={'primaryColor'}
          label={'Primary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
          inline
          fastField
        >
@@ -33,7 +32,7 @@ export function ReceiptCustomizeGeneralField() {
        <FFormGroup
          name={'secondaryColor'}
          label={'Secondary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
          inline
          fastField
        >
@@ -48,7 +47,7 @@ export function ReceiptCustomizeGeneralField() {
          <FSwitch
            name={'showCompanyLogo'}
            label={'Display company logo in the paper'}
-            // className={styles.showCompanyLogoField}
+            style={{ fontSize: 14 }}
            large
            fastField
          />
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts
@@ -10,13 +10,10 @@ export const initialValues = {

  // Top details.
  showReceiptNumber: true,
-  receiptNumberLabel: 'Invoice number',
+  receiptNumberLabel: 'Receipt number',

-  showDateIssue: true,
-  dateIssueLabel: 'Date of Issue',
-
-  showDueDate: true,
-  dueDateLabel: 'Due Date',
+  showReceiptDate: true,
+  receiptDateLabel: 'Date of Issue',

  // Company name
  companyName: 'Bigcapital Technology, Inc.',
@@ -36,24 +33,13 @@ export const initialValues = {
  showSubtotal: true,
  subtotalLabel: 'Subtotal',

-  showDiscount: true,
-  discountLabel: 'Discount',
-
-  showTaxes: true,
-
  showTotal: true,
  totalLabel: 'Total',

-  paymentMadeLabel: 'Payment Made',
-  showPaymentMade: true,
-
-  dueAmountLabel: 'Due Amount',
-  showDueAmount: true,
-
  // Footer paragraphs.
  termsConditionsLabel: 'Terms & Conditions',
  showTermsConditions: true,

-  statementLabel: 'Statement',
-  showStatement: true,
+  customerNoteLabel: 'Customer Note',
+  showCustomerNote: true,
 };
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts
@@ -8,14 +8,11 @@ export interface ReceiptCustomizeValues {
  companyLogo?: string;

  // Top details.
-  showInvoiceNumber?: boolean;
-  invoiceNumberLabel?: string;
+  showReceiptNumber?: boolean;
+  receiptNumberLabel?: string;

-  showDateIssue?: boolean;
-  dateIssueLabel?: string;
-
-  showDueDate?: boolean;
-  dueDateLabel?: string;
+  showReceiptDate?: boolean;
+  receiptDateLabel?: string;

  // Company name
  companyName?: string;
@@ -35,24 +32,13 @@ export interface ReceiptCustomizeValues {
  showSubtotal?: boolean;
  subtotalLabel?: string;

-  showDiscount?: boolean;
-  discountLabel?: string;
-
-  showTaxes?: boolean;
-
  showTotal?: boolean;
  totalLabel?: string;

-  paymentMadeLabel?: string;
-  showPaymentMade?: boolean;
-
-  dueAmountLabel?: string;
-  showDueAmount?: boolean;
-
-  // Footer paragraphs.
+  // Statements
  termsConditionsLabel?: string;
  showTermsConditions?: boolean;

-  statementLabel?: string;
-  showStatement?: boolean;
+  customerNoteLabel?: string;
+  showCustomerNote?: boolean;
 }