feat: wip estimate, receipt, payment received customize

2026-02-18 13:50: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/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);