feat: wip estimate, receipt, payment received customize

2026-02-17 13:20:31 +00:00 · 2024-09-10 17:06:17 +02:00
parent f0dfc3d1b0
commit 317adfa0de
24 changed files with 1113 additions and 4 deletions
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
@@ -1,3 +1,38 @@
+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 { CreditNoteCustomizeValues } from './types';
+import { initialValues } from './constants';
+
 export default function CreditNoteCustomizeContent() {
-  return <h1>asdasd</h1>;
+  const handleFormSubmit = (values: CreditNoteCustomizeValues) => {};
+
+  return (
+    <Box className={Classes.DRAWER_BODY}>
+      <ElementCustomize<CreditNoteCustomizeValues>
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        <ElementCustomize.PaperTemplate>
+          {/* <InvoicePaperTemplate /> */}
+        </ElementCustomize.PaperTemplate>
+
+        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
+          <CreditNoteCustomizeGeneralField />
+        </ElementCustomize.FieldsTab>
+
+        <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+          <CreditNoteCustomizeContentFields />
+        </ElementCustomize.FieldsTab>
+
+        <ElementCustomize.FieldsTab id={'totals'} label={'Totals'}>
+          asdfasdfdsaf #3
+        </ElementCustomize.FieldsTab>
+      </ElementCustomize>
+    </Box>
+  );
 }
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx
@@ -0,0 +1,58 @@
+// @ts-nocheck
+import { Classes } from '@blueprintjs/core';
+import { FFormGroup, FSwitch, Stack } from '@/components';
+import { FColorInput } from '@/components/Forms/FColorInput';
+
+export function CreditNoteCustomizeGeneralField() {
+  return (
+    <Stack style={{ padding: 20, flex: '1 1 auto' }}>
+      <Stack spacing={0}>
+        <h2 style={{ fontSize: 16, marginBottom: 10 }}>General Branding</h2>
+        <p className={Classes.TEXT_MUTED}>
+          Set your invoice details to be automatically applied every timeyou
+          create a new invoice.
+        </p>
+      </Stack>
+
+      <Stack spacing={0}>
+        <FFormGroup
+          name={'primaryColor'}
+          label={'Primary Color'}
+          // className={styles.fieldGroup}
+          inline
+          fastField
+        >
+          <FColorInput
+            name={'primaryColor'}
+            inputProps={{ style: { maxWidth: 120 } }}
+            fastField
+          />
+        </FFormGroup>
+
+        <FFormGroup
+          name={'secondaryColor'}
+          label={'Secondary Color'}
+          // className={styles.fieldGroup}
+          inline
+          fastField
+        >
+          <FColorInput
+            name={'secondaryColor'}
+            inputProps={{ style: { maxWidth: 120 } }}
+            fastField
+          />
+        </FFormGroup>
+
+        <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
+          <FSwitch
+            name={'showCompanyLogo'}
+            label={'Display company logo in the paper'}
+            // className={styles.showCompanyLogoField}
+            large
+            fastField
+          />
+        </FFormGroup>
+      </Stack>
+    </Stack>
+  );
+}
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCutomizeContentFields.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCutomizeContentFields.tsx
@@ -0,0 +1,22 @@
+// @ts-nocheck
+import { Stack } from '@/components';
+import { Classes } from '@blueprintjs/core';
+
+export function CreditNoteCustomizeContentFields() {
+  return (
+    <Stack
+      spacing={10}
+      style={{ padding: 20, paddingBottom: 40, flex: '1 1 auto' }}
+    >
+      <Stack spacing={10}>
+        <h3>General Branding</h3>
+        <p className={Classes.TEXT_MUTED}>
+          Set your invoice details to be automatically applied every timeyou
+          create a new invoice.
+        </p>
+      </Stack>
+
+      <Stack></Stack>
+    </Stack>
+  );
+}
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts
@@ -0,0 +1,59 @@
+export const initialValues = {
+  // Colors
+  primaryColor: '#2c3dd8',
+  secondaryColor: '#2c3dd8',
+
+  // Company logo.
+  showCompanyLogo: true,
+  companyLogo:
+    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+
+  // Top details.
+  showInvoiceNumber: true,
+  invoiceNumberLabel: 'Invoice number',
+
+  showDateIssue: true,
+  dateIssueLabel: 'Date of Issue',
+
+  showDueDate: true,
+  dueDateLabel: 'Due Date',
+
+  // Company name
+  companyName: 'Bigcapital Technology, Inc.',
+
+  // Addresses
+  showBilledFromAddress: true,
+  showBillingToAddress: true,
+  billedToLabel: 'Billed To',
+
+  // Entries
+  itemNameLabel: 'Item',
+  itemDescriptionLabel: 'Description',
+  itemRateLabel: 'Rate',
+  itemTotalLabel: 'Total',
+
+  // Totals
+  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,
+};
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts
@@ -0,0 +1,5 @@
+
+
+export interface CreditNoteCustomizeValues {
+  
+}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx
@@ -1,3 +1,37 @@
+import React from 'react';
+import { Box } from '@/components';
+import { Classes } from '@blueprintjs/core';
+import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
+import { EstimateCustomizeGeneralField } from './EstimateCustomizeFieldsGeneral';
+import { EstimateCustomizeContentFields } from './EstimateCustomizeFieldsContent';
+import { EstimateCustomizeValues } from './types';
+import { initialValues } from './constants';
+
 export default function EstimateCustomizeContent() {
-  return <h1>Hello World</h1>;
+  const handleFormSubmit = (values: EstimateCustomizeValues) => {};
+
+  return (
+    <Box className={Classes.DRAWER_BODY}>
+      <ElementCustomize<EstimateCustomizeValues>
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        {/* <ElementCustomize.PaperTemplate>
+          <InvoicePaperTemplate />
+        </ElementCustomize.PaperTemplate> */}
+
+        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
+          <EstimateCustomizeGeneralField />
+        </ElementCustomize.FieldsTab>
+
+        <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+          <EstimateCustomizeContentFields />
+        </ElementCustomize.FieldsTab>
+
+        <ElementCustomize.FieldsTab id={'totals'} label={'Totals'}>
+          asdfasdfdsaf #3
+        </ElementCustomize.FieldsTab>
+      </ElementCustomize>
+    </Box>
+  );
 }
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsContent.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsContent.tsx
@@ -0,0 +1,46 @@
+// @ts-nocheck
+import { FInputGroup, FSwitch, Group, Stack } from '@/components';
+import { CLASSES } from '@/constants';
+import { Classes } from '@blueprintjs/core';
+import { fieldsGroups } from './constants';
+
+export function EstimateCustomizeContentFields() {
+  return (
+    <Stack
+      spacing={10}
+      style={{ padding: 20, paddingBottom: 40, flex: '1 1 auto' }}
+    >
+      <Stack spacing={10}>
+        <h3>General Branding</h3>
+        <p className={Classes.TEXT_MUTED}>
+          Set your invoice details to be automatically applied every time you
+          create a new invoice.
+        </p>
+      </Stack>
+
+      <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>
+          </>
+        ))}
+      </Stack>
+    </Stack>
+  );
+}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
@@ -0,0 +1,59 @@
+// @ts-nocheck
+import { Classes, Text } from '@blueprintjs/core';
+import { FFormGroup, FSwitch, Group, Stack } from '@/components';
+import { FColorInput } from '@/components/Forms/FColorInput';
+// import styles from './InvoiceCustomizeFields.module.scss';
+
+export function EstimateCustomizeGeneralField() {
+  return (
+    <Stack style={{ padding: 20, flex: '1 1 auto' }}>
+      <Stack spacing={0}>
+        <h2 style={{ fontSize: 16, marginBottom: 10 }}>General Branding</h2>
+        <p className={Classes.TEXT_MUTED}>
+          Set your invoice details to be automatically applied every time you
+          create a new invoice.
+        </p>
+      </Stack>
+
+      <Stack spacing={0}>
+        <FFormGroup
+          name={'primaryColor'}
+          label={'Primary Color'}
+          // className={styles.fieldGroup}
+          inline
+          fastField
+        >
+          <FColorInput
+            name={'primaryColor'}
+            inputProps={{ style: { maxWidth: 120 } }}
+            fastField
+          />
+        </FFormGroup>
+
+        <FFormGroup
+          name={'secondaryColor'}
+          label={'Secondary Color'}
+          // className={styles.fieldGroup}
+          inline
+          fastField
+        >
+          <FColorInput
+            name={'secondaryColor'}
+            inputProps={{ style: { maxWidth: 120 } }}
+            fastField
+          />
+        </FFormGroup>
+
+        <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
+          <FSwitch
+            name={'showCompanyLogo'}
+            label={'Display company logo in the paper'}
+            // className={styles.showCompanyLogoField}
+            large
+            fastField
+          />
+        </FFormGroup>
+      </Stack>
+    </Stack>
+  );
+}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts
@@ -0,0 +1,121 @@
+
+export const initialValues = {
+  // Colors
+  primaryColor: '#2c3dd8',
+  secondaryColor: '#2c3dd8',
+
+  // Company logo.
+  showCompanyLogo: true,
+  companyLogo:
+    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+
+  // Top details.
+  showEstimateNumber: true,
+  estimateNumberLabel: 'Estimate number',
+
+  showDateIssue: true,
+  dateIssueLabel: 'Date of Issue',
+
+  showExpirationDate: true,
+  expirationDateLabel: 'Expiration Date',
+
+  // Company name
+  companyName: 'Bigcapital Technology, Inc.',
+
+  // Addresses
+  showBilledFromAddress: true,
+  showBillingToAddress: true,
+  billedToLabel: 'Billed To',
+
+  // Entries
+  itemNameLabel: 'Item',
+  itemDescriptionLabel: 'Description',
+  itemRateLabel: 'Rate',
+  itemTotalLabel: 'Total',
+
+  // Totals
+  showSubtotal: true,
+  subtotalLabel: 'Subtotal',
+
+  showDiscount: true,
+  discountLabel: 'Discount',
+
+  showTaxes: true,
+
+  showTotal: true,
+  totalLabel: 'Total',
+
+  // Footer paragraphs.
+  termsConditionsLabel: 'Terms & Conditions',
+  showTermsConditions: true,
+
+  statementLabel: 'Statement',
+  showStatement: true,
+};
+
+
+
+export const fieldsGroups = [
+  {
+    label: 'Header',
+    fields: [
+      {
+        labelKey: 'estimateNumberLabel',
+        enableKey: 'showEstimateeNumber',
+        label: 'Estimate No.',
+      },
+      {
+        labelKey: 'dateIssueLabel',
+        enableKey: 'showDateIssue',
+        label: 'Issue Date',
+      },
+      {
+        labelKey: 'expirationDateLabel',
+        enableKey: 'expirationDueDate',
+        label: 'Expiration Date',
+      },
+      {
+        enableKey: 'showBillingToAddress',
+        labelKey: 'billedToLabel',
+        label: 'Bill To',
+      },
+      {
+        enableKey: 'showBilledFromAddress',
+        label: 'Billed From',
+      },
+    ],
+  },
+  {
+    label: 'Totals',
+    fields: [
+      {
+        labelKey: 'subtotalLabel',
+        enableKey: 'showSubtotal',
+        label: 'Subtotal',
+      },
+      {
+        labelKey: 'discountLabel',
+        enableKey: 'showDiscount',
+        label: 'Discount',
+      },
+      { enableKey: 'showTaxes', label: 'Taxes' },
+      { labelKey: 'totalLabel', enableKey: 'showTotal', label: 'Total' },
+    ],
+  },
+  {
+    label: 'Footer',
+    fields: [
+      {
+        labelKey: 'termsConditionsLabel',
+        enableKey: 'showTermsConditions',
+        label: 'Terms & Conditions',
+      },
+      {
+        labelKey: 'statementLabel',
+        enableKey: 'showStatement',
+        label: 'Statement',
+        labelPlaceholder: 'Statement',
+      },
+    ],
+  },
+];
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts
@@ -0,0 +1,58 @@
+export interface EstimateCustomizeValues {
+  // Colors
+  primaryColor?: string;
+  secondaryColor?: string;
+
+  // Company Logo
+  showCompanyLogo?: boolean;
+  companyLogo?: string;
+
+  // Top details.
+  showInvoiceNumber?: boolean;
+  invoiceNumberLabel?: string;
+
+  showDateIssue?: boolean;
+  dateIssueLabel?: string;
+
+  showDueDate?: boolean;
+  dueDateLabel?: string;
+
+  // Company name
+  companyName?: string;
+
+  // Addresses
+  showBilledFromAddress?: boolean;
+  showBillingToAddress?: boolean;
+  billedToLabel?: string;
+
+  // Entries
+  itemNameLabel?: string;
+  itemDescriptionLabel?: string;
+  itemRateLabel?: string;
+  itemTotalLabel?: string;
+
+  // Totals
+  showSubtotal?: boolean;
+  subtotalLabel?: string;
+
+  showDiscount?: boolean;
+  discountLabel?: string;
+
+  showTaxes?: boolean;
+
+  showTotal?: boolean;
+  totalLabel?: string;
+
+  paymentMadeLabel?: string;
+  showPaymentMade?: boolean;
+
+  dueAmountLabel?: string;
+  showDueAmount?: boolean;
+
+  // Footer paragraphs.
+  termsConditionsLabel?: string;
+  showTermsConditions?: boolean;
+
+  statementLabel?: string;
+  showStatement?: boolean;
+}
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Box } from '@/components';
+import { Classes } from '@blueprintjs/core';
+import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
+import { PaymentReceivedCustomizeGeneralField } from './PaymentReceivedCustomizeFieldsGeneral';
+import { PaymentReceivedCustomizeContentFields } from './PaymentReceivedCustomizeFieldsContent';
+import { PaymentReceivedCustomizeValues } from './types';
+import { initialValues } from './constants';
+
+export default function PaymentReceivedCustomizeContent() {
+  const handleFormSubmit = (values: PaymentReceivedCustomizeValues) => {};
+
+  return (
+    <Box className={Classes.DRAWER_BODY}>
+      <ElementCustomize<PaymentReceivedCustomizeValues>
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        {/* <ElementCustomize.PaperTemplate>
+          <InvoicePaperTemplate />
+        </ElementCustomize.PaperTemplate> */}
+
+        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
+          <PaymentReceivedCustomizeGeneralField />
+        </ElementCustomize.FieldsTab>
+
+        <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+          <PaymentReceivedCustomizeContentFields />
+        </ElementCustomize.FieldsTab>
+
+        <ElementCustomize.FieldsTab id={'totals'} label={'Totals'}>
+          asdfasdfdsaf #3
+        </ElementCustomize.FieldsTab>
+      </ElementCustomize>
+    </Box>
+  );
+}
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer.tsx
@@ -0,0 +1,32 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+const PaymentReceivedCustomizeContent = React.lazy(
+  () => import('./PaymentReceivedCustomizeContent'),
+);
+
+/**
+ * PaymentReceived customize drawer.
+ * @returns {React.ReactNode}
+ */
+function PaymentReceivedCustomizeDrawerRoot({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: {},
+}) {
+  return (
+    <Drawer isOpen={isOpen} name={name} size={'100%'}>
+      <DrawerSuspense>
+        <PaymentReceivedCustomizeContent />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export const PaymentReceivedCustomizeDrawer = R.compose(withDrawers())(
+  PaymentReceivedCustomizeDrawerRoot,
+);
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsContent.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsContent.tsx
@@ -0,0 +1,22 @@
+// @ts-nocheck
+import { Stack } from '@/components';
+import { Classes } from '@blueprintjs/core';
+
+export function PaymentReceivedCustomizeContentFields() {
+  return (
+    <Stack
+      spacing={10}
+      style={{ padding: 20, paddingBottom: 40, flex: '1 1 auto' }}
+    >
+      <Stack spacing={10}>
+        <h3>General Branding</h3>
+        <p className={Classes.TEXT_MUTED}>
+          Set your invoice details to be automatically applied every timeyou
+          create a new invoice.
+        </p>
+      </Stack>
+
+      <Stack></Stack>
+    </Stack>
+  );
+}
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
@@ -0,0 +1,59 @@
+// @ts-nocheck
+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 PaymentReceivedCustomizeGeneralField() {
+  return (
+    <Stack style={{ padding: 20, flex: '1 1 auto' }}>
+      <Stack spacing={0}>
+        <h2 style={{ fontSize: 16, marginBottom: 10 }}>General Branding</h2>
+        <p className={Classes.TEXT_MUTED}>
+          Set your invoice details to be automatically applied every timeyou
+          create a new invoice.
+        </p>
+      </Stack>
+
+      <Stack spacing={0}>
+        <FFormGroup
+          name={'primaryColor'}
+          label={'Primary Color'}
+          // className={styles.fieldGroup}
+          inline
+          fastField
+        >
+          <FColorInput
+            name={'primaryColor'}
+            inputProps={{ style: { maxWidth: 120 } }}
+            fastField
+          />
+        </FFormGroup>
+
+        <FFormGroup
+          name={'secondaryColor'}
+          label={'Secondary Color'}
+          // className={styles.fieldGroup}
+          inline
+          fastField
+        >
+          <FColorInput
+            name={'secondaryColor'}
+            inputProps={{ style: { maxWidth: 120 } }}
+            fastField
+          />
+        </FFormGroup>
+
+        <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
+          <FSwitch
+            name={'showCompanyLogo'}
+            label={'Display company logo in the paper'}
+            // className={styles.showCompanyLogoField}
+            large
+            fastField
+          />
+        </FFormGroup>
+      </Stack>
+    </Stack>
+  );
+}
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts
@@ -0,0 +1,134 @@
+export const initialValues = {
+  // Colors
+  primaryColor: '#2c3dd8',
+  secondaryColor: '#2c3dd8',
+
+  // Company logo.
+  showCompanyLogo: true,
+  companyLogo:
+    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+
+  // Top details.
+  showInvoiceNumber: true,
+  invoiceNumberLabel: 'Invoice number',
+
+  showDateIssue: true,
+  dateIssueLabel: 'Date of Issue',
+
+  showDueDate: true,
+  dueDateLabel: 'Due Date',
+
+  // Company name
+  companyName: 'Bigcapital Technology, Inc.',
+
+  // Addresses
+  showBilledFromAddress: true,
+  showBillingToAddress: true,
+  billedToLabel: 'Billed To',
+
+  // Entries
+  itemNameLabel: 'Item',
+  itemDescriptionLabel: 'Description',
+  itemRateLabel: 'Rate',
+  itemTotalLabel: 'Total',
+
+  // Totals
+  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,
+};
+
+export const fieldsGroups = [
+  {
+    label: 'Header',
+    fields: [
+      {
+        labelKey: 'invoiceNumberLabel',
+        enableKey: 'showInvoiceNumber',
+        label: 'Invoice No.',
+      },
+      {
+        labelKey: 'dateIssueLabel',
+        enableKey: 'showDateIssue',
+        label: 'Issue Date',
+      },
+      {
+        labelKey: 'dueDateLabel',
+        enableKey: 'showDueDate',
+        label: 'Due Date',
+      },
+      {
+        enableKey: 'showBillingToAddress',
+        labelKey: 'billedToLabel',
+        label: 'Bill To',
+      },
+      {
+        enableKey: 'showBilledFromAddress',
+        label: 'Billed From',
+      },
+    ],
+  },
+  {
+    label: 'Totals',
+    fields: [
+      {
+        labelKey: 'subtotalLabel',
+        enableKey: 'showSubtotal',
+        label: 'Subtotal',
+      },
+      {
+        labelKey: 'discountLabel',
+        enableKey: 'showDiscount',
+        label: 'Discount',
+      },
+      { enableKey: 'showTaxes', label: 'Taxes' },
+      { labelKey: 'totalLabel', enableKey: 'showTotal', label: 'Total' },
+      {
+        labelKey: 'paymentMadeLabel',
+        enableKey: 'showPaymentMade',
+        label: 'Payment Made',
+      },
+      {
+        labelKey: 'dueAmountLabel',
+        enableKey: 'showDueAmount',
+        label: 'Due Amount',
+      },
+    ],
+  },
+  {
+    label: 'Footer',
+    fields: [
+      {
+        labelKey: 'termsConditionsLabel',
+        enableKey: 'showTermsConditions',
+        label: 'Terms & Conditions',
+      },
+      {
+        labelKey: 'statementLabel',
+        enableKey: 'showStatement',
+        label: 'Statement',
+        labelPlaceholder: 'Statement',
+      },
+    ],
+  },
+];
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts
@@ -0,0 +1,58 @@
+export interface PaymentReceivedCustomizeValues {
+  // Colors
+  primaryColor?: string;
+  secondaryColor?: string;
+
+  // Company Logo
+  showCompanyLogo?: boolean;
+  companyLogo?: string;
+
+  // Top details.
+  showInvoiceNumber?: boolean;
+  invoiceNumberLabel?: string;
+
+  showDateIssue?: boolean;
+  dateIssueLabel?: string;
+
+  showDueDate?: boolean;
+  dueDateLabel?: string;
+
+  // Company name
+  companyName?: string;
+
+  // Addresses
+  showBilledFromAddress?: boolean;
+  showBillingToAddress?: boolean;
+  billedToLabel?: string;
+
+  // Entries
+  itemNameLabel?: string;
+  itemDescriptionLabel?: string;
+  itemRateLabel?: string;
+  itemTotalLabel?: string;
+
+  // Totals
+  showSubtotal?: boolean;
+  subtotalLabel?: string;
+
+  showDiscount?: boolean;
+  discountLabel?: string;
+
+  showTaxes?: boolean;
+
+  showTotal?: boolean;
+  totalLabel?: string;
+
+  paymentMadeLabel?: string;
+  showPaymentMade?: boolean;
+
+  dueAmountLabel?: string;
+  showDueAmount?: boolean;
+
+  // Footer paragraphs.
+  termsConditionsLabel?: string;
+  showTermsConditions?: boolean;
+
+  statementLabel?: string;
+  showStatement?: boolean;
+}
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedActionsBar.tsx
@@ -7,6 +7,11 @@ import {
  NavbarGroup,
  Intent,
  Alignment,
+  Popover,
+  Menu,
+  MenuItem,
+  PopoverInteractionKind,
+  Position,
 } from '@blueprintjs/core';

 import { useHistory } from 'react-router-dom';
@@ -38,6 +43,8 @@ import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-

 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Payment receives actions bar.
@@ -57,6 +64,9 @@ function PaymentsReceivedActionsBar({

  // #withDialogActions
  openDialog,
+
+  // #withDrawerActions
+  openDrawer,
 }) {
  // History context.
  const history = useHistory();
@@ -101,6 +111,10 @@ function PaymentsReceivedActionsBar({
  const handlePrintBtnClick = () => {
    downloadExportPdf({ resource: 'PaymentReceive' });
  };
+  // Handle the customize button click.
+  const handleCustomizeBtnClick = () => {
+    openDrawer(DRAWERS.PAYMENT_RECEIVED_CUSTOMIZE);
+  };

  return (
    <DashboardActionsBar>
@@ -170,6 +184,25 @@ function PaymentsReceivedActionsBar({
        <NavbarDivider />
      </NavbarGroup>
      <NavbarGroup align={Alignment.RIGHT}>
+        <Popover
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_RIGHT}
+          modifiers={{
+            offset: { offset: '0, 4' },
+          }}
+          content={
+            <Menu>
+              <MenuItem
+                onClick={handleCustomizeBtnClick}
+                text={'Customize Invoice'}
+              />
+            </Menu>
+          }
+        >
+          <Button icon={<Icon icon="cog-16" iconSize={16} />} minimal={true} />
+        </Popover>
+        <NavbarDivider />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon="refresh-16" iconSize={14} />}
@@ -191,4 +224,5 @@ export default compose(
    paymentReceivesTableSize: paymentReceiveSettings?.tableSize,
  })),
  withDialogActions,
+  withDrawerActions,
 )(PaymentsReceivedActionsBar);
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx
@@ -1,3 +1,37 @@
+import React from 'react';
+import { Box } from '@/components';
+import { Classes } from '@blueprintjs/core';
+import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
+import { ReceiptCustomizeGeneralField } from './ReceiptCustomizeFieldsGeneral';
+import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent';
+import { ReceiptCustomizeValues } from './types';
+import { initialValues } from './constants';
+
 export default function ReceiptCustomizeContent() {
-  return <h1>asdasdasd</h1>;
+  const handleFormSubmit = (values: ReceiptCustomizeValues) => {};
+
+  return (
+    <Box className={Classes.DRAWER_BODY}>
+      <ElementCustomize<ReceiptCustomizeValues>
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        {/* <ElementCustomize.PaperTemplate>
+          <InvoicePaperTemplate />
+        </ElementCustomize.PaperTemplate> */}
+
+        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
+          <ReceiptCustomizeGeneralField />
+        </ElementCustomize.FieldsTab>
+
+        <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+          <ReceiptCustomizeFieldsContent />
+        </ElementCustomize.FieldsTab>
+
+        <ElementCustomize.FieldsTab id={'totals'} label={'Totals'}>
+          asdfasdfdsaf #3
+        </ElementCustomize.FieldsTab>
+      </ElementCustomize>
+    </Box>
+  );
 }
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsContent.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsContent.tsx
@@ -0,0 +1,22 @@
+// @ts-nocheck
+import { Stack } from '@/components';
+import { Classes } from '@blueprintjs/core';
+
+export function ReceiptCustomizeFieldsContent() {
+  return (
+    <Stack
+      spacing={10}
+      style={{ padding: 20, paddingBottom: 40, flex: '1 1 auto' }}
+    >
+      <Stack spacing={10}>
+        <h3>General Branding</h3>
+        <p className={Classes.TEXT_MUTED}>
+          Set your invoice details to be automatically applied every timeyou
+          create a new invoice.
+        </p>
+      </Stack>
+
+      <Stack></Stack>
+    </Stack>
+  );
+}
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx
@@ -0,0 +1,59 @@
+// @ts-nocheck
+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 (
+    <Stack style={{ padding: 20, flex: '1 1 auto' }}>
+      <Stack spacing={0}>
+        <h2 style={{ fontSize: 16, marginBottom: 10 }}>General Branding</h2>
+        <p className={Classes.TEXT_MUTED}>
+          Set your invoice details to be automatically applied every timeyou
+          create a new invoice.
+        </p>
+      </Stack>
+
+      <Stack spacing={0}>
+        <FFormGroup
+          name={'primaryColor'}
+          label={'Primary Color'}
+          // className={styles.fieldGroup}
+          inline
+          fastField
+        >
+          <FColorInput
+            name={'primaryColor'}
+            inputProps={{ style: { maxWidth: 120 } }}
+            fastField
+          />
+        </FFormGroup>
+
+        <FFormGroup
+          name={'secondaryColor'}
+          label={'Secondary Color'}
+          // className={styles.fieldGroup}
+          inline
+          fastField
+        >
+          <FColorInput
+            name={'secondaryColor'}
+            inputProps={{ style: { maxWidth: 120 } }}
+            fastField
+          />
+        </FFormGroup>
+
+        <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
+          <FSwitch
+            name={'showCompanyLogo'}
+            label={'Display company logo in the paper'}
+            // className={styles.showCompanyLogoField}
+            large
+            fastField
+          />
+        </FFormGroup>
+      </Stack>
+    </Stack>
+  );
+}
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts
@@ -0,0 +1,59 @@
+export const initialValues = {
+  // Colors
+  primaryColor: '#2c3dd8',
+  secondaryColor: '#2c3dd8',
+
+  // Company logo.
+  showCompanyLogo: true,
+  companyLogo:
+    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+
+  // Top details.
+  showReceiptNumber: true,
+  receiptNumberLabel: 'Invoice number',
+
+  showDateIssue: true,
+  dateIssueLabel: 'Date of Issue',
+
+  showDueDate: true,
+  dueDateLabel: 'Due Date',
+
+  // Company name
+  companyName: 'Bigcapital Technology, Inc.',
+
+  // Addresses
+  showBilledFromAddress: true,
+  showBillingToAddress: true,
+  billedToLabel: 'Billed To',
+
+  // Entries
+  itemNameLabel: 'Item',
+  itemDescriptionLabel: 'Description',
+  itemRateLabel: 'Rate',
+  itemTotalLabel: 'Total',
+
+  // Totals
+  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,
+};
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts
@@ -0,0 +1,58 @@
+export interface ReceiptCustomizeValues {
+  // Colors
+  primaryColor?: string;
+  secondaryColor?: string;
+
+  // Company Logo
+  showCompanyLogo?: boolean;
+  companyLogo?: string;
+
+  // Top details.
+  showInvoiceNumber?: boolean;
+  invoiceNumberLabel?: string;
+
+  showDateIssue?: boolean;
+  dateIssueLabel?: string;
+
+  showDueDate?: boolean;
+  dueDateLabel?: string;
+
+  // Company name
+  companyName?: string;
+
+  // Addresses
+  showBilledFromAddress?: boolean;
+  showBillingToAddress?: boolean;
+  billedToLabel?: string;
+
+  // Entries
+  itemNameLabel?: string;
+  itemDescriptionLabel?: string;
+  itemRateLabel?: string;
+  itemTotalLabel?: string;
+
+  // Totals
+  showSubtotal?: boolean;
+  subtotalLabel?: string;
+
+  showDiscount?: boolean;
+  discountLabel?: string;
+
+  showTaxes?: boolean;
+
+  showTotal?: boolean;
+  totalLabel?: string;
+
+  paymentMadeLabel?: string;
+  showPaymentMade?: boolean;
+
+  dueAmountLabel?: string;
+  showDueAmount?: boolean;
+
+  // Footer paragraphs.
+  termsConditionsLabel?: string;
+  showTermsConditions?: boolean;
+
+  statementLabel?: string;
+  showStatement?: boolean;
+}