diff --git a/src/common/classes.js b/src/common/classes.js index f20587caa..bea33a718 100644 --- a/src/common/classes.js +++ b/src/common/classes.js @@ -66,6 +66,7 @@ const CLASSES = { PREFERENCES_PAGE_INSIDE_CONTENT_USERS: 'preferences-page__inside-content--users', PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies', PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant', + PREFERENCES_PAGE_INSIDE_CONTENT_SMS_INTEGRATION: 'preferences-page__inside-content--sms-integration', FINANCIAL_REPORT_INSIDER: 'dashboard__insider--financial-report', diff --git a/src/components/DataTableCells/SwitchFieldCell.js b/src/components/DataTableCells/SwitchFieldCell.js index 0e9635439..df5bb0e89 100644 --- a/src/components/DataTableCells/SwitchFieldCell.js +++ b/src/components/DataTableCells/SwitchFieldCell.js @@ -31,7 +31,7 @@ const SwitchEditableCell = ({ > + ); } diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js new file mode 100644 index 000000000..134a42f48 --- /dev/null +++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js @@ -0,0 +1,20 @@ +import React from 'react'; + +import '../../../style/pages/SMSMessage/SMSMessage.scss'; +import { SMSMessageDialogProvider } from './SMSMessageDialogProvider'; +import SMSMessageForm from './SMSMessageForm'; + +export default function SMSMessageDialogContent({ + // #ownProps + dialogName, + notificationkey, +}) { + return ( + + + + ); +} diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js new file mode 100644 index 000000000..28c6b180f --- /dev/null +++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { DialogContent } from 'components'; +import { + useSettingEditSMSNotification, + useSettingSMSNotification, +} from 'hooks/query'; + +const SMSMessageDialogContext = React.createContext(); + +/** + * SMS Message dialog provider. + */ +function SMSMessageDialogProvider({ notificationkey, dialogName, ...props }) { + // Edit SMS message notification mutations. + const { mutateAsync: editSMSNotificationMutate } = + useSettingEditSMSNotification(); + + const { data: smsNotification, isLoading: isSMSNotificationLoading } = + useSettingSMSNotification(notificationkey); + + // provider. + const provider = { + dialogName, + smsNotification, + editSMSNotificationMutate, + }; + + return ( + + + + ); +} + +const useSMSMessageDialogContext = () => + React.useContext(SMSMessageDialogContext); + +export { SMSMessageDialogProvider, useSMSMessageDialogContext }; diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js new file mode 100644 index 000000000..3a98f36a6 --- /dev/null +++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js @@ -0,0 +1,79 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { Formik } from 'formik'; +import { omit } from 'lodash'; +import { Intent } from '@blueprintjs/core'; + +import { AppToaster } from 'components'; + +import SMSMessageFormContent from './SMSMessageFormContent'; +import { CreateSMSMessageFormSchema } from './SMSMessageForm.schema'; +import { useSMSMessageDialogContext } from './SMSMessageDialogProvider'; + +import withDialogActions from 'containers/Dialog/withDialogActions'; + +import { compose, transformToForm } from 'utils'; + +const defaultInitialValues = { + notification_key: '', + is_notification_enabled: '', + message_text: '', +}; + +/** + * SMS Message form. + */ +function SMSMessageForm({ + // #withDialogActions + closeDialog, +}) { + const { dialogName, smsNotification, editSMSNotificationMutate } = + useSMSMessageDialogContext(); + + // Initial form values. + const initialValues = { + ...defaultInitialValues, + ...transformToForm(smsNotification, defaultInitialValues), + notification_key: smsNotification.key, + message_text: smsNotification.sms_message, + }; + + // Handles the form submit. + const handleFormSubmit = (values, { setSubmitting, setErrors }) => { + const form = { + ...omit(values, ['is_notification_enabled', 'sms_message']), + notification_key: smsNotification.key, + }; + + // Handle request response success. + const onSuccess = (response) => { + AppToaster.show({ + message: intl.get('sms_message.dialog.success_message'), + intent: Intent.SUCCESS, + }); + closeDialog(dialogName); + }; + + // Handle request response errors. + const onError = ({ + response: { + data: { errors }, + }, + }) => { + setSubmitting(false); + }; + + editSMSNotificationMutate(form).then(onSuccess).catch(onError); + }; + + return ( + + ); +} + +export default compose(withDialogActions)(SMSMessageForm); diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.schema.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.schema.js new file mode 100644 index 000000000..441e73381 --- /dev/null +++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.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({ + notification_key: Yup.string().required(), + is_notification_enabled: Yup.boolean(), + message_text: Yup.string().min(3).max(DATATYPES_LENGTH.TEXT), +}); + +export const CreateSMSMessageFormSchema = Schema; diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js new file mode 100644 index 000000000..52c417b24 --- /dev/null +++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Form } from 'formik'; + +import SMSMessageFormFields from './SMSMessageFormFields'; +import SMSMessageFormFloatingActions from './SMSMessageFormFloatingActions'; + +/** + * SMS message form content. + */ +export default function SMSMessageFormContent() { + return ( +
+ + + + ); +} diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js new file mode 100644 index 000000000..fd4c54c0c --- /dev/null +++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js @@ -0,0 +1,31 @@ +import React from 'react'; + +import { FastField, Field, ErrorMessage } from 'formik'; +import { Classes, FormGroup, TextArea } from '@blueprintjs/core'; +import { FormattedMessage as T, FieldRequiredHint } from 'components'; +import { inputIntent } from 'utils'; + +export default function SMSMessageFormFields() { + return ( +
+ {/* ----------- Message Text ----------- */} + + {({ field, meta: { error, touched } }) => ( + } + className={'form-group--message_text'} + intent={inputIntent({ error, touched })} + helperText={} + > +