feat: wip estimate, receipt, payment received customize

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

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

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

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

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts

@@ -0,0 +1,5 @@
+
+
+export interface CreditNoteCustomizeValues {
+  
+}