QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10: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

14
packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
View File

@@ -84,20 +84,18 @@ function EstimateDetailActionsBar({
<NavbarDivider />
</Can>
<Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="envelope" />}
text={'Send Mail'}
onClick={handleMailEstimate}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" />}
text={<T id={'print'} />}
onClick={handlePrintEstimate}
/>
</Can>
<Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
<Button
className={Classes.MINIMAL}
text={'Mail'}
onClick={handleMailEstimate}
/>
<NavbarDivider />
</Can>
<Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>

6
packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx
View File

@@ -123,18 +123,18 @@ function InvoiceDetailActionsBar({
</Can>
<Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
<Button
text={'Mail'}
text={'Send Mail'}
icon={<Icon icon="envelope" />}
onClick={handleMailInvoice}
className={Classes.MINIMAL}
/>
</Can>
<Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" />}
text={<T id={'print'} />}
onClick={handlePrintInvoice}
/>
<NavbarDivider />
</Can>
<Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
<Button

14
packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
View File

@@ -86,19 +86,19 @@ function PaymentReceiveActionsBar({
<NavbarDivider />
</Can>
<Can I={PaymentReceiveAction.View} a={AbilitySubject.PaymentReceive}>
<Button
className={Classes.MINIMAL}
text={'Send Mail'}
icon={<Icon icon="envelope" />}
onClick={handleMailPaymentReceive}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" />}
text={<T id={'print'} />}
onClick={handlePrintPaymentReceive}
/>
</Can>
<Can I={PaymentReceiveAction.View} a={AbilitySubject.PaymentReceive}>
<Button
className={Classes.MINIMAL}
text={'Mail'}
onClick={handleMailPaymentReceive}
/>
<NavbarDivider />
</Can>
<Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
<Button

15
packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
View File

@@ -63,7 +63,7 @@ function ReceiptDetailActionBar({
};
const handleReceiptMail = () => {
openDialog(DialogsName.ReceiptMail, { receiptId });
}
};
return (
<DrawerActionsBar>
@@ -78,6 +78,12 @@ function ReceiptDetailActionBar({
<NavbarDivider />
</Can>
<Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
<Button
className={Classes.MINIMAL}
text={'Send Mail'}
icon={<Icon icon="envelope" />}
onClick={handleReceiptMail}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" />}
@@ -85,13 +91,6 @@ function ReceiptDetailActionBar({
onClick={safeCallback(onPrintReceipt)}
/>
</Can>
<Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
<Button
className={Classes.MINIMAL}
text={'Mail'}
onClick={handleReceiptMail}
/>
</Can>
<Can I={SaleReceiptAction.Delete} a={AbilitySubject.Receipt}>
<Button
className={Classes.MINIMAL}

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')}

134
packages/webapp/src/containers/SendMailNotification/SendMailNotificationForm.tsx
View File

@@ -1,36 +1,118 @@
// @ts-nocheck
import { Form } from 'formik';
import { Form, useFormikContext } from 'formik';
import { FFormGroup, FInputGroup, FMultiSelect } from '@/components';
import styled from 'styled-components';
import { Button, Classes, Intent } from '@blueprintjs/core';
import { saveInvoke } from '@/utils';
interface SendMailNotificationFormProps {
onClose?: () => void;
}
export function SendMailNotificationForm({
onClose,
}: SendMailNotificationFormProps) {
const { isSubmitting } = useFormikContext();
const handleClose = () => {
saveInvoke(onClose);
};
export function SendMailNotificationForm() {
return (
<Form>
<FFormGroup label={'From'} name={'from'} inline={true} fastField={true}>
<FMultiSelect
items={[]}
name={'from'}
placeholder=""
popoverProps={{ minimal: true }}
/>
</FFormGroup>
<div className={Classes.DIALOG_BODY}>
<HeaderBox>
<FFormGroup
label={'From'}
name={'from'}
inline={true}
fastField={true}
>
<FMultiSelect
items={[]}
name={'from'}
placeholder=""
popoverProps={{ minimal: true, fill: true }}
fill={true}
/>
</FFormGroup>
<FFormGroup label={'To'} name={'to'} inline={true} fastField={true}>
<FMultiSelect
items={[]}
name={'to'}
placeholder=""
popoverProps={{ minimal: true }}
/>
</FFormGroup>
<FFormGroup label={'To'} name={'to'} inline={true} fastField={true}>
<FMultiSelect
items={[]}
name={'to'}
placeholder=""
popoverProps={{ minimal: true, fill: true }}
fill={true}
/>
</FFormGroup>
<FFormGroup
label={'Subject'}
name={'subject'}
inline={true}
fastField={true}
>
<FInputGroup name={'subject'} />
</FFormGroup>
<FFormGroup
label={'Subject'}
name={'subject'}
inline={true}
fastField={true}
>
<FInputGroup name={'subject'} fill={true} />
</FFormGroup>
</HeaderBox>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
disabled={isSubmitting}
onClick={handleClose}
style={{ minWidth: '65px' }}
>
Close
</Button>
<Button
intent={Intent.PRIMARY}
loading={isSubmitting}
style={{ minWidth: '75px' }}
type="submit"
>
Send
</Button>
</div>
</div>
</Form>
);
}
const HeaderBox = styled('div')`
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border: 1px solid #dddfe9;
padding: 15px;
.bp4-form-group {
margin: 0;
padding-top: 12px;
padding-bottom: 12px;
&:not(:last-of-type) {
border-bottom: 1px solid #dddfe9;
}
&:first-of-type {
padding-top: 0;
}
&:last-of-type {
padding-bottom: 0;
}
}
.bp4-form-content {
flex: 1 0;
}
.bp4-label {
min-width: 65px;
color: #738091;
}
.bp4-input {
}
`;

12
packages/webapp/src/static/json/icons.tsx
View File

@@ -561,8 +561,14 @@ export default {
},
'content-copy': {
path: [
'M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z'
'M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z',
],
viewBox: '0 0 16 16'
}
viewBox: '0 0 16 16',
},
envelope: {
path: [
'M0 4.01v11.91l6.27-6.27L0 4.01zm18.91-1.03H1.09L10 10.97l8.91-7.99zm-5.18 6.66L20 15.92V4.01l-6.27 5.63zm-3.23 2.9c-.13.12-.31.19-.5.19s-.37-.07-.5-.19l-2.11-1.89-6.33 6.33h17.88l-6.33-6.33-2.11 1.89z',
],
viewBox: '0 0 20 20',
},
};