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