-
Terms & Conditions
-
- It is a long established fact that a reader will be distracted by the
- readable content of a page when looking at its layout.
+ {showTermsConditions && (
+
+
{termsConditionsLabel}
+
{termsConditions}
-
-
-
-
Statement
-
- It is a long established fact that a reader will be distracted by the
- readable content of a page when looking at its layout.
+ )}
+ {showStatement && (
+
+
{statementLabel}
+
{statement}
-
+ )}
);
}
+
+const withFormikProps =
(
+ Component: React.ComponentType
,
+) => {
+ return (props: Omit) => {
+ const { values } = useFormikContext();
+
+ return ;
+ };
+};
+
+export const InvoicePaperTemplate = R.compose(withFormikProps)(
+ InvoicePaperTemplateRoot,
+);
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/constants.ts b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/constants.ts
new file mode 100644
index 000000000..ac4a03dae
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/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',
+ },
+ ],
+ },
+];
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts
new file mode 100644
index 000000000..6985bafb4
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts
@@ -0,0 +1,58 @@
+export interface InvoiceCustomizeValues {
+ // 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;
+}
diff --git a/packages/webapp/src/utils/sanitize-hex-color.ts b/packages/webapp/src/utils/sanitize-hex-color.ts
new file mode 100644
index 000000000..e89bb76de
--- /dev/null
+++ b/packages/webapp/src/utils/sanitize-hex-color.ts
@@ -0,0 +1,3 @@
+export function sanitizeToHexColor(input: string) {
+ return input;
+}
-