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 notify via SMS.

Browse Source
This commit is contained in:
elforjani13
2021-11-04 15:46:14 +02:00
parent d94d28f709
commit 46f6380fe6
12 changed files with 335 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/DialogsContainer.js
View File

@@ -20,6 +20,7 @@ import ReceiptPdfPreviewDialog from '../containers/Dialogs/ReceiptPdfPreviewDial
import MoneyInDialog from '../containers/Dialogs/MoneyInDialog';
import MoneyOutDialog from '../containers/Dialogs/MoneyOutDialog';
import BadDebtDialog from '../containers/Dialogs/BadDebtDialog';
import NotifyContactViaSMSDialog from '../containers/Dialogs/NotifyContactViaSMSDialog';
/**
* Dialogs container.
@@ -45,6 +46,7 @@ export default function DialogsContainer() {
<ReceiptPdfPreviewDialog dialogName={'receipt-pdf-preview'} />
<MoneyInDialog dialogName={'money-in'} />
<MoneyOutDialog dialogName={'money-out'} />
<NotifyContactViaSMSDialog dialogName={'notify-via-sms'} />
<BadDebtDialog dialogName={'write-off-bad-debt'} />
</div>
);

19
src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import '../../../style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
import { NotifyContactViaSMSFormProvider } from './NotifyContactViaSMSFormProvider';
import NotifyContactViaSMSForm from './NotifyContactViaSMSForm';
/**
* Notify contact via SMS.
*/
export default function NotifyContactViaSMSContent({
// #ownProps
dialogName,
}) {
return (
<NotifyContactViaSMSFormProvider dialogName={dialogName}>
<NotifyContactViaSMSForm />
</NotifyContactViaSMSFormProvider>
);
}

47
src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js Normal file
View File

@@ -0,0 +1,47 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Formik } from 'formik';
import { Intent } from '@blueprintjs/core';
import { AppToaster } from 'components';
import { CreateNotifyContactViaSMSFormSchema } from './NotifyContactViaSMSForm.schema';
import NotifyContactViaSMSFormContent from './NotifyContactViaSMSFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
import { compose } from 'utils';
const defaultInitialValues = {
name: '',
phone: '',
note: '',
};
function NotifyContactViaSMSForm({
// #withDialogActions
closeDialog,
}) {
const { dialogName } = useNotifyContactViaSMSContext();
// Initial form values
const initialValues = {
...defaultInitialValues,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {};
return (
<Formik
validationSchema={CreateNotifyContactViaSMSFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={NotifyContactViaSMSFormContent}
/>
);
}
export default compose(withDialogActions)(NotifyContactViaSMSForm);

11
src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js Normal file
View File

@@ -0,0 +1,11 @@
import * as Yup from 'yup';
import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({
customer_id: Yup.string().required(),
phone: Yup.number().required(),
note: Yup.string().required().trim().max(DATATYPES_LENGTH.TEXT),
});
export const CreateNotifyContactViaSMSFormSchema = Schema;

16
src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import { Form } from 'formik';
import NotifyContactViaSMSFormFields from './NotifyContactViaSMSFormFields';
import NotifyContactViaSMSFormFloatingActions from './NotifyContactViaSMSFormFloatingActions';
/**
* Nofity contact via SMS form content.
*/
export default function NotifyContactViaSMSFormContent() {
return (
<Form>
<NotifyContactViaSMSFormFields />
<NotifyContactViaSMSFormFloatingActions />
</Form>
);
}

79
src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js Normal file
View File

@@ -0,0 +1,79 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { FormattedMessage as T } from 'components';
import { useAutofocus } from 'hooks';
import {
Classes,
FormGroup,
TextArea,
Intent,
InputGroup,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { inputIntent } from 'utils';
import { FieldRequiredHint } from 'components';
import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
/**
* Notify contact via SMS fields.
*/
function NotifyContactViaSMSFormFields() {
return (
<div className={Classes.DIALOG_BODY}>
{/* ----------- Send Notification to ----------- */}
<FastField name={'customer_id'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'notify_via_sms.dialog.send_notification_to'} />}
className={classNames('form-group--customer-name', CLASSES.FILL)}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'customer_id'} />}
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
{/* ----------- Phone number ----------- */}
<FastField name={'phone'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'phone_number'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="phone" />}
className={classNames('form-group--phone', CLASSES.FILL)}
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
{/* ----------- Message Text ----------- */}
<FastField name={'note'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'notify_via_sms.dialog.message_text'} />}
labelInfo={<FieldRequiredHint />}
className={'form-group--note'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'note'} />}
>
<TextArea
growVertically={true}
large={true}
intent={inputIntent({ error, touched })}
{...field}
/>
</FormGroup>
)}
</FastField>
</div>
);
}
export default NotifyContactViaSMSFormFields;

45
src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFloatingActions.js Normal file
View File

@@ -0,0 +1,45 @@
import React from 'react';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'components';
import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
function NotifyContactViaSMSFormFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
const { dialogName } = useNotifyContactViaSMSContext();
// Handle close button click.
const handleCancelBtnClick = () => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
loading={isSubmitting}
style={{ minWidth: '75px' }}
type="submit"
>
{<T id={'send'} />}
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(
NotifyContactViaSMSFormFloatingActions,
);

33
src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormProvider.js Normal file
View File

@@ -0,0 +1,33 @@
import React from 'react';
import { DialogContent } from 'components';
import { useCustomers } from 'hooks/query';
const NotifyContactViaSMSContext = React.createContext();
/**
* Notify contact via SMS provider.
*/
function NotifyContactViaSMSFormProvider({ dialogName, ...props }) {
// Fetches customers list.
const {
data: { customers },
isLoading: isCustomersLoading,
} = useCustomers();
// State provider.
const provider = {
dialogName,
customers,
};
return (
<DialogContent isLoading={isCustomersLoading}>
<NotifyContactViaSMSContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useNotifyContactViaSMSContext = () =>
React.useContext(NotifyContactViaSMSContext);
export { NotifyContactViaSMSFormProvider, useNotifyContactViaSMSContext };

32
src/containers/Dialogs/NotifyContactViaSMSDialog/index.js Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import { FormattedMessage as T } from 'components';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'redux';
const NotifyContactViaSMSDialogContent = React.lazy(() =>
import('./NotifyContactViaSMSContent'),
);
/**
* Notify contact via SMS.
*/
function NotifyContactViaSMSDialog({ dialogName, payload, isOpen }) {
return (
<Dialog
name={dialogName}
title={'Notify via SMS'}
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
className={'dialog--notify-vis-sms'}
>
<DialogSuspense>
<NotifyContactViaSMSDialogContent dialogName={dialogName} />
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(NotifyContactViaSMSDialog);

11
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
View File

@@ -76,6 +76,10 @@ function InvoiceDetailActionsBar({
const handleBadDebtInvoice = () => {
openDialog('write-off-bad-debt', { invoiceId });
};
// Handle notify via SMS.
const handleNotifyViaSMS = () => {
openDialog('notify-via-sms', {});
};
// Handle cancele write-off invoice.
const handleCancelBadDebtInvoice = () => {
@@ -117,8 +121,11 @@ function InvoiceDetailActionsBar({
<NavbarDivider />
<BadDebtMenuItem
invoice={invoice}
onAlert={handleCancelBadDebtInvoice}
onDialog={handleBadDebtInvoice}
payload={{
onBadDebt: handleBadDebtInvoice,
onCancelBadDebt: handleCancelBadDebtInvoice,
onNotifyViaSMS: handleNotifyViaSMS,
}}
/>
</NavbarGroup>
</DashboardActionsBar>

13
src/containers/Drawers/InvoiceDetailDrawer/utils.js
View File

@@ -58,7 +58,10 @@ export const useInvoiceReadonlyEntriesColumns = () =>
[],
);
export const BadDebtMenuItem = ({ invoice, onDialog, onAlert }) => {
export const BadDebtMenuItem = ({
invoice,
payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS },
}) => {
return (
<Popover
minimal={true}
@@ -73,16 +76,20 @@ export const BadDebtMenuItem = ({ invoice, onDialog, onAlert }) => {
<Choose.When condition={!invoice.is_writtenoff}>
<MenuItem
text={<T id={'bad_debt.dialog.bad_debt'} />}
onClick={onDialog}
onClick={onBadDebt}
/>
</Choose.When>
<Choose.When condition={invoice.is_writtenoff}>
<MenuItem
onClick={onAlert}
onClick={onCancelBadDebt}
text={<T id={'bad_debt.dialog.cancel_bad_debt'} />}
/>
</Choose.When>
</Choose>
<MenuItem
onClick={onNotifyViaSMS}
text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
/>
</Menu>
}
>

32
src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss Normal file
View File

@@ -0,0 +1,32 @@
.dialog--notify-vis-sms {
max-width: 350px;
max-height: 450px;
.bp3-dialog-body {
.bp3-form-group {
margin-bottom: 15px;
margin-top: 15px;
label.bp3-label {
margin-bottom: 3px;
font-size: 13px;
}
}
.form-group {
&--note {
.bp3-form-content {
textarea {
width: 100%;
min-width: 100%;
font-size: 14px;
}
}
}
}
}
.bp3-dialog-footer {
padding-top: 10px;
}
}