feat: notify by SMS.

This commit is contained in:
elforjani13
2021-11-06 21:47:17 +02:00
parent 2bd4c5f724
commit d26ef01afc
17 changed files with 307 additions and 106 deletions

View File

@@ -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>
);

View File

@@ -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

View File

@@ -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;

View File

@@ -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}
/>

View File

@@ -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>
);

View File

@@ -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>
);