From 716dec799a30711b20e1ddce3cfecaeba4ede8d7 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 10 Sep 2024 21:54:37 +0200
Subject: [PATCH] feat: paper template customize

---
 .../ElementCustomizeFieldsGroup.tsx           |  40 +++
 .../CreditNoteCustomizeContent.tsx            |  11 +-
 .../CreditNoteCustomizeGeneralFields.tsx      |   6 +-
 .../EstimateCustomizeContent.tsx              |   9 +-
 .../EstimateCustomizeFieldsGeneral.tsx        |   6 +-
 .../EstimatePaperTemplate.tsx                 |  37 ++-
 .../Estimates/EstimateCustomize/constants.ts  |  36 +--
 .../Estimates/EstimateCustomize/types.ts      |  31 +--
 .../InvoiceCustomizeGeneralFields.tsx         |   7 +-
 .../InvoiceCutomizeContentFields.tsx          |  40 ++-
 .../InvoicePaperTemplate.module.scss          |   3 -
 .../InvoiceCustomize/InvoicePaperTemplate.tsx | 245 +++++++-----------
 .../InvoiceCustomize/PaperTemplate.tsx        |   6 +-
 .../PaymentReceivedCustomizeContent.tsx       |  11 +-
 .../PaymentReceivedCustomizeFieldsGeneral.tsx |   6 +-
 .../ReceiptCustomizeContent.tsx               |   9 +-
 .../ReceiptCustomizeFieldsGeneral.tsx         |   7 +-
 .../Receipts/ReceiptCustomize/constants.ts    |  24 +-
 .../Sales/Receipts/ReceiptCustomize/types.ts  |  28 +-
 19 files changed, 269 insertions(+), 293 deletions(-)
 create mode 100644 packages/webapp/src/containers/ElementCustomize/ElementCustomizeFieldsGroup.tsx

diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeFieldsGroup.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeFieldsGroup.tsx
new file mode 100644
index 000000000..0e406f4f2
--- /dev/null
+++ 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>
+  );
+}
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
index f2893cd60..4ff664f89 100644
--- 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} />;
+}
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx
index 41f06a231..9c8b84c7c 100644
--- 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
           />
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx
index dc11aa27a..15250b8e7 100644
--- 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} />;
+}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
index 707a0b44f..b1fcc0d81 100644
--- 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
           />
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
index 3e76564bd..5432e5d45 100644
--- 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({
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts
index ad6b6f8d4..3f63a4685 100644
--- 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',
       },
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts
index 7dbf7182a..d51cc8304 100644
--- 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;
 }
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
index 43397bd64..39c0a3c3f 100644
--- 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
           />
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCutomizeContentFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCutomizeContentFields.tsx
index fd1188d20..98c4cbfe9 100644
--- 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>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss
index 9cc71dcb1..2d562e31a 100644
--- 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;
 }
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
index 7fb69d58b..4eae081a5 100644
--- 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>
   );
 }
 
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
index aa29523e9..fde94244d 100644
--- 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) => (
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx
index b2308e619..67a28fb31 100644
--- 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} />;
+}
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
index 8f3158263..9dbfd5feb 100644
--- 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
           />
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx
index 439f0d7dc..3b4246101 100644
--- 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} />;
+}
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx
index dede57674..93b76c78b 100644
--- 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
           />
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts
index 4a9bb97dd..45930f6ef 100644
--- 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,
 };
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts
index 712682506..f411639ea 100644
--- 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;
 }