diff --git a/src/components/DialogsContainer.js b/src/components/DialogsContainer.js index 1a31006dc..1530c5cf7 100644 --- a/src/components/DialogsContainer.js +++ b/src/components/DialogsContainer.js @@ -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() { + ); diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js new file mode 100644 index 000000000..59f725294 --- /dev/null +++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSContent.js @@ -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 ( + + + + ); +} diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js new file mode 100644 index 000000000..56b49508f --- /dev/null +++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.js @@ -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 ( + + ); +} +export default compose(withDialogActions)(NotifyContactViaSMSForm); diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js new file mode 100644 index 000000000..694f1e73c --- /dev/null +++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSForm.schema.js @@ -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; diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js new file mode 100644 index 000000000..336306f34 --- /dev/null +++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormContent.js @@ -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 ( +
+ + + + ); +} diff --git a/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js new file mode 100644 index 000000000..ca0cf59c8 --- /dev/null +++ b/src/containers/Dialogs/NotifyContactViaSMSDialog/NotifyContactViaSMSFormFields.js @@ -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 ( +
+ {/* ----------- Send Notification to ----------- */} + + {({ form, field, meta: { error, touched } }) => ( + } + className={classNames('form-group--customer-name', CLASSES.FILL)} + labelInfo={} + intent={inputIntent({ error, touched })} + helperText={} + > + + + )} + + + {/* ----------- Phone number ----------- */} + + {({ form, field, meta: { error, touched } }) => ( + } + labelInfo={} + intent={inputIntent({ error, touched })} + helperText={} + className={classNames('form-group--phone', CLASSES.FILL)} + > + + + )} + + + {/* ----------- Message Text ----------- */} + + {({ field, meta: { error, touched } }) => ( + } + labelInfo={} + className={'form-group--note'} + intent={inputIntent({ error, touched })} + helperText={} + > +