QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 13:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add send mail icon

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2023-12-26 22:57:41 +02:00
parent de1b7f132c
commit c46948049c
26 changed files with 369 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx
View File

@@ -23,6 +23,7 @@ function EstimateMailDialog({
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
style={{ width: 600 }}
>
<DialogSuspense>
<EstimateMailDialogContent
@@ -33,4 +34,5 @@ function EstimateMailDialog({
</Dialog>
);
}
export default compose(withDialogRedux())(EstimateMailDialog);

1
packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogBoot.tsx
View File

@@ -26,6 +26,7 @@ function EstimateMailDialogBoot({
useSaleEstimateDefaultOptions(estimateId);
const provider = {
saleEstimateId: estimateId,
mailOptions,
isMailOptionsLoading,
};

44
packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx
View File

@@ -1,8 +1,13 @@
// @ts-nocheck
import { Formik } from 'formik';
import * as R from 'ramda';
import { castArray } from 'lodash';
import { useEstimateMailDialogBoot } from './EstimateMailDialogBoot';
import { transformToForm } from '@/utils';
import { SendMailNotificationForm } from '@/containers/SendMailNotification';
import { castArray } from 'lodash';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
import { useSendSaleEstimateMail } from '@/hooks/query';
const initialFormValues = {
from: [],
@@ -11,8 +16,20 @@ const initialFormValues = {
message: '',
};
export function EstimateMailDialogForm() {
const { mailOptions } = useEstimateMailDialogBoot();
interface EstimateMailFormValues {
from: string[];
to: string[];
subject: string;
message: string;
attachEstimate: boolean;
}
function EstimateMailDialogFormRoot(
// #withDialogClose
closeDialog,
) {
const { mutateAsync: sendEstimateMail } = useSendSaleEstimateMail();
const { mailOptions, saleEstimateId } = useEstimateMailDialogBoot();
const initialValues = {
...initialFormValues,
@@ -20,12 +37,29 @@ export function EstimateMailDialogForm() {
from: mailOptions.from ? castArray(mailOptions.from) : [],
to: mailOptions.to ? castArray(mailOptions.to) : [],
};
// Handle the form submitting.
const handleSubmit = (values: EstimateMailFormValues, { setSubmitting }) => {
setSubmitting(true);
sendEstimateMail([saleEstimateId, values])
.then(() => {
setSubmitting(false);
})
.catch((error) => {
setSubmitting(false);
});
};
const handleSubmit = () => {};
const handleClose = () => {
closeDialog(DialogsName.EstimateMail);
};
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
<SendMailNotificationForm />
<SendMailNotificationForm onClose={handleClose} />
</Formik>
);
}
export const EstimateMailDialogForm = R.compose(withDialogActions)(
EstimateMailDialogFormRoot,
);

7
packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx
View File

@@ -22,6 +22,7 @@ import { useEstimatesListContext } from './EstimatesListProvider';
import { useMemorizedColumnsWidths } from '@/hooks';
import { compose } from '@/utils';
import { DRAWERS } from '@/constants/drawers';
import { DialogsName } from '@/constants/dialogs';
/**
* Estimates datatable.
@@ -100,6 +101,11 @@ function EstimatesDataTable({
openDrawer(DRAWERS.ESTIMATE_DETAILS, { estimateId: cell.row.original.id });
};
// Handle mail send estimate.
const handleMailSendEstimate = ({ id }) => {
openDialog(DialogsName.EstimateMail, { estimateId: id });
}
// Local storage memorizing columns widths.
const [initialColumnsWidths, , handleColumnResizing] =
useMemorizedColumnsWidths(TABLES.ESTIMATES);
@@ -153,6 +159,7 @@ function EstimatesDataTable({
onConvert: handleConvertToInvoice,
onViewDetails: handleViewDetailEstimate,
onPrint: handlePrintEstimate,
onSendMail: handleMailSendEstimate,
}}
/>
</DashboardContentTable>

6
packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx
View File

@@ -64,6 +64,7 @@ export function ActionsMenu({
onConvert,
onViewDetails,
onPrint,
onSendMail
},
}) {
return (
@@ -129,6 +130,11 @@ export function ActionsMenu({
</Choose>
</Can>
<Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
<MenuItem
icon={<Icon icon={'envelope'} iconSize={16} />}
text={'Send Mail'}
onClick={safeCallback(onSendMail, original)}
/>
<MenuItem
icon={<Icon icon={'print-16'} iconSize={16} />}
text={intl.get('print')}

1
packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialog.tsx
View File

@@ -23,6 +23,7 @@ function InvoiceMailDialog({
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
style={{ width: 600 }}
>
<DialogSuspense>
<InvoiceMailDialogContent

1
packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogBoot.tsx
View File

@@ -26,6 +26,7 @@ function InvoiceMailDialogBoot({
useSaleInvoiceDefaultOptions(invoiceId);
const provider = {
saleInvoiceId: invoiceId,
mailOptions,
isMailOptionsLoading,
};

44
packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx
View File

@@ -1,8 +1,13 @@
// @ts-nocheck
import { Formik } from 'formik';
import { castArray } from 'lodash';
import * as R from 'ramda';
import { SendMailNotificationForm } from '@/containers/SendMailNotification';
import { useInvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
import { transformToForm } from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
import { useSendSaleInvoiceMail } from '@/hooks/query';
const initialFormValues = {
from: [],
@@ -10,8 +15,21 @@ const initialFormValues = {
subject: '',
message: '',
};
export function InvoiceMailDialogForm() {
const { mailOptions } = useInvoiceMailDialogBoot();
interface InvoiceMailFormValues {
from: string[];
to: string[];
subject: string;
message: string;
attachInvoice: boolean;
}
function InvoiceMailDialogFormRoot({
// #withDialogActions
closeDialog,
}) {
const { mailOptions, saleInvoiceId } = useInvoiceMailDialogBoot();
const { mutateAsync: sendInvoiceMail } = useSendSaleInvoiceMail();
const initialValues = {
...initialFormValues,
@@ -19,11 +37,29 @@ export function InvoiceMailDialogForm() {
from: mailOptions.from ? castArray(mailOptions.from) : [],
to: mailOptions.to ? castArray(mailOptions.to) : [],
};
const handleSubmit = () => {};
// Handle the form submitting.
const handleSubmit = (values: InvoiceMailFormValues, { setSubmitting }) => {
setSubmitting(true);
sendInvoiceMail([saleInvoiceId, values])
.then(() => {
setSubmitting(false);
})
.catch(() => {
setSubmitting(false);
});
};
// Handle the close button click.
const handleClose = () => {
closeDialog(DialogsName.InvoiceMail);
};
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
<SendMailNotificationForm />
<SendMailNotificationForm onClose={handleClose} />
</Formik>
);
}
export const InvoiceMailDialogForm = R.compose(withDialogActions)(
InvoiceMailDialogFormRoot,
);

7
packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx
View File

@@ -26,6 +26,7 @@ import { useInvoicesListContext } from './InvoicesListProvider';
import { compose } from '@/utils';
import { DRAWERS } from '@/constants/drawers';
import { DialogsName } from '@/constants/dialogs';
/**
* Invoices datatable.
@@ -98,6 +99,11 @@ function InvoicesDataTable({
openDialog('invoice-pdf-preview', { invoiceId: id });
};
// Handle send mail invoice.
const handleSendMailInvoice = ({ id }) => {
openDialog(DialogsName.InvoiceMail, { invoiceId: id });
};
// Handle cell click.
const handleCellClick = (cell, event) => {
openDrawer(DRAWERS.INVOICE_DETAILS, { invoiceId: cell.row.original.id });
@@ -157,6 +163,7 @@ function InvoicesDataTable({
onViewDetails: handleViewDetailInvoice,
onPrint: handlePrintInvoice,
onConvert: handleConvertToCreitNote,
onSendMail: handleSendMailInvoice
}}
/>
</DashboardContentTable>

7
packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
View File

@@ -128,6 +128,7 @@ export function ActionsMenu({
onQuick,
onViewDetails,
onPrint,
onSendMail
},
row: { original },
}) {
@@ -150,7 +151,6 @@ export function ActionsMenu({
text={intl.get('invoice.convert_to_credit_note')}
onClick={safeCallback(onConvert, original)}
/>
<If condition={!original.is_delivered}>
<MenuItem
icon={<Icon icon="send" iconSize={16} />}
@@ -169,6 +169,11 @@ export function ActionsMenu({
</If>
</Can>
<Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
<MenuItem
icon={<Icon icon={'envelope'} iconSize={16} />}
text={'Send Mail'}
onClick={safeCallback(onSendMail, original)}
/>
<MenuItem
icon={<Icon icon={'print-16'} iconSize={16} />}
text={intl.get('print')}

1
packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog.tsx
View File

@@ -23,6 +23,7 @@ function PaymentMailDialog({
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
style={{ width: 600 }}
>
<DialogSuspense>
<PaymentMailDialogContent

48
packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx
View File

@@ -1,8 +1,13 @@
import { Formik } from 'formik';
// @ts-nocheck
import { Formik, FormikBag } from 'formik';
import { castArray } from 'lodash';
import * as R from 'ramda';
import { SendMailNotificationForm } from '@/containers/SendMailNotification';
import { usePaymentMailDialogBoot } from './PaymentMailDialogBoot';
import { transformToForm } from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
import { useSendPaymentReceiveMail } from '@/hooks/query';
const initialFormValues = {
from: [],
@@ -10,8 +15,20 @@ const initialFormValues = {
subject: '',
message: '',
};
export function PaymentMailDialogForm() {
const { mailOptions } = usePaymentMailDialogBoot();
interface PaymentMailFormValue {
from: string[];
to: string[];
subject: string;
message: string;
}
export function PaymentMailDialogFormRoot({
// #withDialogActions
closeDialog,
}) {
const { mailOptions, paymentId } = usePaymentMailDialogBoot();
const { mutateAsync: sendPaymentMail } = useSendPaymentReceiveMail();
const initialValues = {
...initialFormValues,
@@ -19,11 +36,32 @@ export function PaymentMailDialogForm() {
from: mailOptions.from ? castArray(mailOptions.from) : [],
to: mailOptions.to ? castArray(mailOptions.to) : [],
};
const handleSubmit = () => {};
// Handles the form submitting.
const handleSubmit = (
values: PaymentMailFormValue,
{ setSubmitting }: FormikBag<PaymentMailFormValue>,
) => {
setSubmitting(true);
sendPaymentMail([paymentId, values])
.then(() => {
setSubmitting(false);
})
.catch((error) => {
setSubmitting(false);
});
};
const handleClose = () => {
closeDialog(DialogsName.PaymentMail);
};
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
<SendMailNotificationForm />
<SendMailNotificationForm onClose={handleClose} />
</Formik>
);
}
export const PaymentMailDialogForm = R.compose(withDialogActions)(
PaymentMailDialogFormRoot,
);

15
packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.tsx
View File

@@ -17,12 +17,14 @@ import withPaymentReceives from './withPaymentReceives';
import withPaymentReceivesActions from './withPaymentReceivesActions';
import withAlertsActions from '@/containers/Alert/withAlertActions';
import withDrawerActions from '@/containers/Drawer/withDrawerActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import withSettings from '@/containers/Settings/withSettings';
import { usePaymentReceivesColumns, ActionsMenu } from './components';
import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
import { useMemorizedColumnsWidths } from '@/hooks';
import { DRAWERS } from '@/constants/drawers';
import { DialogsName } from '@/constants/dialogs';
/**
* Payment receives datatable.
@@ -31,15 +33,15 @@ function PaymentReceivesDataTable({
// #withPaymentReceivesActions
setPaymentReceivesTableState,
// #withPaymentReceives
paymentReceivesTableState,
// #withAlertsActions
openAlert,
// #withDrawerActions
openDrawer,
// #withDialogActions
openDialog,
// #withSettings
paymentReceivesTableSize,
}) {
@@ -73,6 +75,11 @@ function PaymentReceivesDataTable({
openDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS, { paymentReceiveId: id });
};
// Handle mail send payment receive.
const handleSendMailPayment = ({ id }) => {
openDialog(DialogsName.PaymentMail, { paymentReceiveId: id });
};
// Handle cell click.
const handleCellClick = (cell, event) => {
openDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS, {
@@ -129,6 +136,7 @@ function PaymentReceivesDataTable({
onDelete: handleDeletePaymentReceive,
onEdit: handleEditPaymentReceive,
onViewDetails: handleViewDetailPaymentReceive,
onSendMail: handleSendMailPayment,
}}
/>
</DashboardContentTable>
@@ -139,6 +147,7 @@ export default compose(
withPaymentReceivesActions,
withAlertsActions,
withDrawerActions,
withDialogActions,
withPaymentReceives(({ paymentReceivesTableState }) => ({
paymentReceivesTableState,
})),

12
packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/components.tsx
View File

@@ -15,14 +15,17 @@ import {
import { FormatDateCell, Money, Icon, Can } from '@/components';
import { safeCallback } from '@/utils';
import { CLASSES } from '@/constants/classes';
import { PaymentReceiveAction, AbilitySubject } from '@/constants/abilityOption';
import {
PaymentReceiveAction,
AbilitySubject,
} from '@/constants/abilityOption';
/**
* Table actions menu.
*/
export function ActionsMenu({
row: { original: paymentReceive },
payload: { onEdit, onDelete, onViewDetails },
payload: { onEdit, onDelete, onViewDetails, onSendMail },
}) {
return (
<Menu>
@@ -31,6 +34,11 @@ export function ActionsMenu({
text={intl.get('view_details')}
onClick={safeCallback(onViewDetails, paymentReceive)}
/>
<MenuItem
icon={<Icon icon={'envelope'} iconSize={16} />}
text={'Send Mail'}
onClick={safeCallback(onSendMail, paymentReceive)}
/>
<Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
<MenuDivider />
<MenuItem

1
packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog.tsx
View File

@@ -23,6 +23,7 @@ function ReceiptMailDialog({
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
style={{ width: 600 }}
>
<DialogSuspense>
<ReceiptMailDialogContent

1
packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogBoot.tsx
View File

@@ -27,6 +27,7 @@ function ReceiptMailDialogBoot({
useSaleReceiptDefaultOptions(receiptId);
const provider = {
saleReceiptId: receiptId,
mailOptions,
isMailOptionsLoading,
};

43
packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx
View File

@@ -1,8 +1,13 @@
import { Formik } from 'formik';
// @ts-nocheck
import { Formik, FormikBag } from 'formik';
import { castArray } from 'lodash';
import * as R from 'ramda';
import { SendMailNotificationForm } from '@/containers/SendMailNotification';
import { useReceiptMailDialogBoot } from './ReceiptMailDialogBoot';
import { transformToForm } from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
import { useSendSaleReceiptMail } from '@/hooks/query';
const initialFormValues = {
from: [],
@@ -10,8 +15,16 @@ const initialFormValues = {
subject: '',
message: '',
};
export function ReceiptMailDialogForm() {
const { mailOptions } = useReceiptMailDialogBoot();
interface ReceiptMailFormValues {
from: string[];
to: string[];
subject: string;
message: string;
}
function ReceiptMailDialogFormRoot({ closeDialog }) {
const { mailOptions, saleReceiptId } = useReceiptMailDialogBoot();
const { mutateAsync: sendReceiptMail } = useSendSaleReceiptMail();
const initialValues = {
...initialFormValues,
@@ -19,11 +32,31 @@ export function ReceiptMailDialogForm() {
from: mailOptions.from ? castArray(mailOptions.from) : [],
to: mailOptions.to ? castArray(mailOptions.to) : [],
};
const handleSubmit = () => {};
const handleSubmit = (
values: ReceiptMailFormValues,
{ setSubmitting }: FormikBag<ReceiptMailFormValues>,
) => {
setSubmitting(true);
sendReceiptMail([saleReceiptId, values])
.then(() => {
setSubmitting(false);
})
.catch((error) => {
setSubmitting(false);
});
};
const handleClose = () => {
closeDialog(DialogsName.ReceiptMail);
};
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
<SendMailNotificationForm />
<SendMailNotificationForm onClose={handleClose} />
</Formik>
);
}
export const ReceiptMailDialogForm = R.compose(withDialogActions)(
ReceiptMailDialogFormRoot,
);

1
packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx
View File

@@ -140,7 +140,6 @@ function ReceiptActionsBar({
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
text={<T id={'export'} />}
/>
<NavbarDivider />
<DashboardRowsHeightButton
initialValue={receiptsTableSize}

7
packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.tsx
View File

@@ -24,6 +24,7 @@ import { useReceiptsListContext } from './ReceiptsListProvider';
import { useReceiptsTableColumns, ActionsMenu } from './components';
import { useMemorizedColumnsWidths } from '@/hooks';
import { DRAWERS } from '@/constants/drawers';
import { DialogsName } from '@/constants/dialogs';
/**
* Sale receipts datatable.
@@ -86,6 +87,11 @@ function ReceiptsDataTable({
openDialog('receipt-pdf-preview', { receiptId: id });
};
// Handle send mail receipt.
const handleSendMailReceipt = ({ id }) => {
openDialog(DialogsName.ReceiptMail, { receiptId: id });
};
// Local storage memorizing columns widths.
const [initialColumnsWidths, , handleColumnResizing] =
useMemorizedColumnsWidths(TABLES.RECEIPTS);
@@ -141,6 +147,7 @@ function ReceiptsDataTable({
onClose: handleCloseReceipt,
onViewDetails: handleViewDetailReceipt,
onPrint: handlePrintInvoice,
onSendMail: handleSendMailReceipt,
}}
/>
</DashboardContentTable>

7
packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
View File

@@ -24,7 +24,7 @@ import { SaleReceiptAction, AbilitySubject } from '@/constants/abilityOption';
* @returns {React.JSX}
*/
export function ActionsMenu({
payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
payload: { onEdit, onDelete, onClose, onSendMail, onViewDetails, onPrint },
row: { original: receipt },
}) {
return (
@@ -51,6 +51,11 @@ export function ActionsMenu({
</If>
</Can>
<Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
<MenuItem
icon={<Icon icon={'envelope'} iconSize={16} />}
text={'Send Mail'}
onClick={safeCallback(onSendMail, receipt)}
/>
<MenuItem
icon={<Icon icon={'print-16'} iconSize={16} />}
text={intl.get('print')}