mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
feat: notify by SMS.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import '../../../style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
|
||||
import 'style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
|
||||
import { NotifyContactViaSMSFormProvider } from './NotifyContactViaSMSFormProvider';
|
||||
import NotifyContactViaSMSForm from './NotifyContactViaSMSForm';
|
||||
|
||||
@@ -10,9 +10,13 @@ import NotifyContactViaSMSForm from './NotifyContactViaSMSForm';
|
||||
export default function NotifyContactViaSMSContent({
|
||||
// #ownProps
|
||||
dialogName,
|
||||
invoice,
|
||||
}) {
|
||||
return (
|
||||
<NotifyContactViaSMSFormProvider dialogName={dialogName}>
|
||||
<NotifyContactViaSMSFormProvider
|
||||
invoiceId={invoice}
|
||||
dialogName={dialogName}
|
||||
>
|
||||
<NotifyContactViaSMSForm />
|
||||
</NotifyContactViaSMSFormProvider>
|
||||
);
|
||||
|
||||
@@ -13,27 +13,54 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { transformToForm, compose } from 'utils';
|
||||
|
||||
const defaultInitialValues = {
|
||||
name: '',
|
||||
phone: '',
|
||||
note: '',
|
||||
customer_name: '',
|
||||
customer_personal_phone: '',
|
||||
sms_message: '',
|
||||
};
|
||||
|
||||
function NotifyContactViaSMSForm({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
const { dialogName } = useNotifyContactViaSMSContext();
|
||||
const {
|
||||
invoiceId,
|
||||
invoiceSMSDetail,
|
||||
dialogName,
|
||||
createNotifyInvoiceBySMSMutate,
|
||||
} = useNotifyContactViaSMSContext();
|
||||
|
||||
// Initial form values
|
||||
const initialValues = {
|
||||
...defaultInitialValues,
|
||||
...transformToForm(invoiceSMSDetail, defaultInitialValues),
|
||||
};
|
||||
|
||||
// Handles the form submit.
|
||||
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {};
|
||||
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
|
||||
// Handle request response success.
|
||||
const onSuccess = (response) => {
|
||||
AppToaster.show({
|
||||
message: intl.get('notify_via_sms.dialog.success_message'),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
closeDialog(dialogName);
|
||||
};
|
||||
|
||||
// Handle request response errors.
|
||||
const onError = ({
|
||||
response: {
|
||||
data: { errors },
|
||||
},
|
||||
}) => {
|
||||
setSubmitting(false);
|
||||
};
|
||||
createNotifyInvoiceBySMSMutate([invoiceId, values])
|
||||
.then(onSuccess)
|
||||
.catch(onError);
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
|
||||
@@ -3,9 +3,9 @@ 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),
|
||||
customer_name: Yup.string().required(),
|
||||
customer_personal_phone: Yup.number().required(),
|
||||
sms_message: Yup.string().required().trim().max(DATATYPES_LENGTH.TEXT),
|
||||
});
|
||||
|
||||
export const CreateNotifyContactViaSMSFormSchema = Schema;
|
||||
|
||||
@@ -24,48 +24,60 @@ function NotifyContactViaSMSFormFields() {
|
||||
return (
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
{/* ----------- Send Notification to ----------- */}
|
||||
<FastField name={'customer_id'}>
|
||||
<FastField name={'customer_name'}>
|
||||
{({ 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'} />}
|
||||
helperText={<ErrorMessage name={'customer_name'} />}
|
||||
>
|
||||
<InputGroup intent={inputIntent({ error, touched })} {...field} />
|
||||
<InputGroup
|
||||
intent={inputIntent({ error, touched })}
|
||||
disabled={true}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ----------- Phone number ----------- */}
|
||||
<FastField name={'phone'}>
|
||||
<FastField name={'customer_personal_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)}
|
||||
helperText={<ErrorMessage name="customer_personal_phone" />}
|
||||
className={classNames(
|
||||
'form-group--customer_personal_phone',
|
||||
CLASSES.FILL,
|
||||
)}
|
||||
>
|
||||
<InputGroup intent={inputIntent({ error, touched })} {...field} />
|
||||
<InputGroup
|
||||
intent={inputIntent({ error, touched })}
|
||||
disabled={true}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ----------- Message Text ----------- */}
|
||||
<FastField name={'note'}>
|
||||
<FastField name={'sms_message'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'notify_via_sms.dialog.message_text'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={'form-group--note'}
|
||||
className={'form-group--sms_message'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'note'} />}
|
||||
helperText={<ErrorMessage name={'sms_message'} />}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
large={true}
|
||||
disabled={true}
|
||||
intent={inputIntent({ error, touched })}
|
||||
{...field}
|
||||
/>
|
||||
|
||||
@@ -1,27 +1,41 @@
|
||||
import React from 'react';
|
||||
import { DialogContent } from 'components';
|
||||
import { useCustomers } from 'hooks/query';
|
||||
import {
|
||||
useInvoice,
|
||||
useCreateNotifyInvoiceBySMS,
|
||||
useInvocieSMSDetails,
|
||||
} 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();
|
||||
function NotifyContactViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
|
||||
// Handle fetch invoice data.
|
||||
const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
|
||||
enabled: !!invoiceId,
|
||||
});
|
||||
|
||||
const { data: invoiceSMSDetail, isLoading: isInvoiceSMSDetailLoading } =
|
||||
useInvocieSMSDetails(invoiceId, {
|
||||
enabled: !!invoiceId,
|
||||
});
|
||||
|
||||
// Create notfiy invoice by sms mutations.
|
||||
const { mutateAsync: createNotifyInvoiceBySMSMutate } =
|
||||
useCreateNotifyInvoiceBySMS();
|
||||
|
||||
// State provider.
|
||||
const provider = {
|
||||
invoiceId,
|
||||
invoiceSMSDetail,
|
||||
dialogName,
|
||||
customers,
|
||||
createNotifyInvoiceBySMSMutate,
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogContent isLoading={isCustomersLoading}>
|
||||
<DialogContent isLoading={isInvoiceLoading || isInvoiceSMSDetailLoading}>
|
||||
<NotifyContactViaSMSContext.Provider value={provider} {...props} />
|
||||
</DialogContent>
|
||||
);
|
||||
|
||||
@@ -12,18 +12,25 @@ const NotifyContactViaSMSDialogContent = React.lazy(() =>
|
||||
/**
|
||||
* Notify contact via SMS.
|
||||
*/
|
||||
function NotifyContactViaSMSDialog({ dialogName, payload, isOpen }) {
|
||||
function NotifyContactViaSMSDialog({
|
||||
dialogName,
|
||||
payload: { invoiceId },
|
||||
isOpen,
|
||||
}) {
|
||||
return (
|
||||
<Dialog
|
||||
name={dialogName}
|
||||
title={'Notify via SMS'}
|
||||
title={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
|
||||
isOpen={isOpen}
|
||||
canEscapeJeyClose={true}
|
||||
autoFocus={true}
|
||||
className={'dialog--notify-vis-sms'}
|
||||
>
|
||||
<DialogSuspense>
|
||||
<NotifyContactViaSMSDialogContent dialogName={dialogName} />
|
||||
<NotifyContactViaSMSDialogContent
|
||||
dialogName={dialogName}
|
||||
invoice={invoiceId}
|
||||
/>
|
||||
</DialogSuspense>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user