From 317adfa0de0e726b49d35af10d0531fcf0323fdf Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 10 Sep 2024 17:06:17 +0200 Subject: [PATCH] feat: wip estimate, receipt, payment received customize --- .../src/components/DrawersContainer.tsx | 2 + packages/webapp/src/constants/drawers.ts | 4 +- .../CreditNoteCustomizeContent.tsx | 37 ++++- .../CreditNoteCustomizeGeneralFields.tsx | 58 ++++++++ .../CreditNoteCutomizeContentFields.tsx | 22 +++ .../CreditNoteCustomize/constants.ts | 59 ++++++++ .../CreditNotes/CreditNoteCustomize/types.ts | 5 + .../EstimateCustomizeContent.tsx | 36 ++++- .../EstimateCustomizeFieldsContent.tsx | 46 ++++++ .../EstimateCustomizeFieldsGeneral.tsx | 59 ++++++++ .../Estimates/EstimateCustomize/constants.ts | 121 ++++++++++++++++ .../Estimates/EstimateCustomize/types.ts | 58 ++++++++ .../PaymentReceivedCustomizeContent.tsx | 37 +++++ .../PaymentReceivedCustomizeDrawer.tsx | 32 +++++ .../PaymentReceivedCustomizeFieldsContent.tsx | 22 +++ .../PaymentReceivedCustomizeFieldsGeneral.tsx | 59 ++++++++ .../PaymentReceivedCustomize/constants.ts | 134 ++++++++++++++++++ .../PaymentReceivedCustomize/types.ts | 58 ++++++++ .../PaymentsReceivedActionsBar.tsx | 34 +++++ .../ReceiptCustomizeContent.tsx | 36 ++++- .../ReceiptCustomizeFieldsContent.tsx | 22 +++ .../ReceiptCustomizeFieldsGeneral.tsx | 59 ++++++++ .../Receipts/ReceiptCustomize/constants.ts | 59 ++++++++ .../Sales/Receipts/ReceiptCustomize/types.ts | 58 ++++++++ 24 files changed, 1113 insertions(+), 4 deletions(-) create mode 100644 packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx create mode 100644 packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCutomizeContentFields.tsx create mode 100644 packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts create mode 100644 packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts create mode 100644 packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsContent.tsx create mode 100644 packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx create mode 100644 packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts create mode 100644 packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts create mode 100644 packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx create mode 100644 packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer.tsx create mode 100644 packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsContent.tsx create mode 100644 packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx create mode 100644 packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts create mode 100644 packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts create mode 100644 packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsContent.tsx create mode 100644 packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx create mode 100644 packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts create mode 100644 packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts diff --git a/packages/webapp/src/components/DrawersContainer.tsx b/packages/webapp/src/components/DrawersContainer.tsx index 344c4712d..3e28d06af 100644 --- a/packages/webapp/src/components/DrawersContainer.tsx +++ b/packages/webapp/src/components/DrawersContainer.tsx @@ -29,6 +29,7 @@ import { ReceiptCustomizeDrawer } from '@/containers/Sales/Receipts/ReceiptCusto import { CreditNoteCustomizeDrawer } from '@/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer'; import { DRAWERS } from '@/constants/drawers'; +import { PaymentReceivedCustomizeDrawer } from '@/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer'; /** * Drawers container of the dashboard. */ @@ -72,6 +73,7 @@ export default function DrawersContainer() { + ); } diff --git a/packages/webapp/src/constants/drawers.ts b/packages/webapp/src/constants/drawers.ts index 43bca2f59..928d9c189 100644 --- a/packages/webapp/src/constants/drawers.ts +++ b/packages/webapp/src/constants/drawers.ts @@ -29,5 +29,7 @@ export enum DRAWERS { ESTIMATE_CUSTOMIZE = 'ESTIMATE_CUSTOMIZE', PAYMENT_RECEIPT_CUSTOMIZE = 'PAYMENT_RECEIPT_CUSTOMIZE', RECEIPT_CUSTOMIZE = 'RECEIPT_CUSTOMIZE', - CREDIT_NOTE_CUSTOMIZE = 'CREDIT_NOTE_CUSTOMIZE' + CREDIT_NOTE_CUSTOMIZE = 'CREDIT_NOTE_CUSTOMIZE', + PAYMENT_RECEIVED_CUSTOMIZE = 'PAYMENT_RECEIVED_CUSTOMIZE' + } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx index 8065e7479..6d26b5bd5 100644 --- 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

asdasd

; + const handleFormSubmit = (values: CreditNoteCustomizeValues) => {}; + + return ( + + + initialValues={initialValues} + onSubmit={handleFormSubmit} + > + + {/* */} + + + + + + + + + + + + asdfasdfdsaf #3 + + + + ); } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx new file mode 100644 index 000000000..41f06a231 --- /dev/null +++ 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 ( + + +

General Branding

+

+ Set your invoice details to be automatically applied every timeyou + create a new invoice. +

+ + + + + + + + + + + + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCutomizeContentFields.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCutomizeContentFields.tsx new file mode 100644 index 000000000..9bd40caf6 --- /dev/null +++ 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 ( + + +

General Branding

+

+ Set your invoice details to be automatically applied every timeyou + create a new invoice. +

+ + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts new file mode 100644 index 000000000..2524d1e88 --- /dev/null +++ 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, +}; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts new file mode 100644 index 000000000..22067f1ce --- /dev/null +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts @@ -0,0 +1,5 @@ + + +export interface CreditNoteCustomizeValues { + +} \ No newline at end of file diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx index e208e0b2e..38f8fbe43 100644 --- 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

Hello World

; + const handleFormSubmit = (values: EstimateCustomizeValues) => {}; + + return ( + + + initialValues={initialValues} + onSubmit={handleFormSubmit} + > + {/* + + */} + + + + + + + + + + + asdfasdfdsaf #3 + + + + ); } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsContent.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsContent.tsx new file mode 100644 index 000000000..3acec44a7 --- /dev/null +++ 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 ( + + +

General Branding

+

+ Set your invoice details to be automatically applied every time
you + create a new invoice. +

+ + + + {fieldsGroups.map((group) => ( + <> +

+ {group.label} +

+ + {group.fields.map((item, index) => ( + + + {item.labelKey && ( + + )} + + ))} + + + ))} + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx new file mode 100644 index 000000000..707a0b44f --- /dev/null +++ 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 ( + + +

General Branding

+

+ Set your invoice details to be automatically applied every time
you + create a new invoice. +

+ + + + + + + + + + + + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts new file mode 100644 index 000000000..ad6b6f8d4 --- /dev/null +++ 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', + }, + ], + }, +]; diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts new file mode 100644 index 000000000..7dbf7182a --- /dev/null +++ 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; +} diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx new file mode 100644 index 000000000..75afcdf12 --- /dev/null +++ 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 ( + + + initialValues={initialValues} + onSubmit={handleFormSubmit} + > + {/* + + */} + + + + + + + + + + + asdfasdfdsaf #3 + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer.tsx new file mode 100644 index 000000000..78ba99dba --- /dev/null +++ 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 ( + + + + + + ); +} + +export const PaymentReceivedCustomizeDrawer = R.compose(withDrawers())( + PaymentReceivedCustomizeDrawerRoot, +); diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsContent.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsContent.tsx new file mode 100644 index 000000000..94519a9b6 --- /dev/null +++ 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 ( + + +

General Branding

+

+ Set your invoice details to be automatically applied every timeyou + create a new invoice. +

+ + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx new file mode 100644 index 000000000..8f3158263 --- /dev/null +++ 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 ( + + +

General Branding

+

+ Set your invoice details to be automatically applied every timeyou + create a new invoice. +

+ + + + + + + + + + + + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts new file mode 100644 index 000000000..ac4a03dae --- /dev/null +++ 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', + }, + ], + }, +]; diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts new file mode 100644 index 000000000..9e5f89170 --- /dev/null +++ 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; +} diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedActionsBar.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedActionsBar.tsx index ae981ed96..eca4dc208 100644 --- 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 ( @@ -170,6 +184,25 @@ function PaymentsReceivedActionsBar({ + + + + } + > +