feat: SMS notification module.

This commit is contained in:
a.bouhuolia
2021-11-09 11:08:47 +02:00
parent 8daefb6946
commit 4b5e06f50c
9 changed files with 100 additions and 18 deletions

View File

@@ -11,6 +11,11 @@ import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
const notificationType = {
key: 'sale-estimate-details',
label: 'Sale estimate details',
};
function NotifyEstimateViaSMSForm({
// #withDialogActions
closeDialog,
@@ -51,10 +56,19 @@ function NotifyEstimateViaSMSForm({
.catch(onError);
};
const initialValues = {
...estimateSMSDetail,
};
// Handle the form cancel.
const handleFormCancel = () => {
closeDialog(dialogName);
};
return (
<NotifyViaSMSForm
NotificationDetail={estimateSMSDetail}
NotificationName={dialogName}
initialValues={initialValues}
notificationTypes={notificationType}
onCancel={handleFormCancel}
onSubmit={handleFormSubmit}
/>
);

View File

@@ -80,10 +80,19 @@ function NotifyInvoiceViaSMSForm({
setNotificationType(values.notification_key);
}
};
// Momerize the notification types.
const notificationTypes = React.useMemo(
() => [
{ key: 'details', label: 'Invoice details' },
{ key: 'reminder', label: 'Invoice reminder' },
],
[],
);
return (
<NotifyViaSMSForm
initialValues={initialValues}
notificationTypes={notificationTypes}
onSubmit={handleFormSubmit}
onCancel={handleFormCancel}
onValuesChange={handleValuesChange}

View File

@@ -11,6 +11,11 @@ import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
const notificationType = {
key: 'payment-receive-details',
label: 'Payment receive thank you.',
};
/**
* Notify Payment Recive Via SMS Form.
*/
@@ -53,12 +58,23 @@ function NotifyPaymentReceiveViaSMSForm({
.then(onSuccess)
.catch(onError);
};
// Handle the form cancel.
const handleFormCancel = () => {
closeDialog(dialogName);
};
// Form initial values.
const initialValues = React.useMemo(
() => ({ ...paymentReceiveMSDetail }),
[paymentReceiveMSDetail],
);
return (
<NotifyViaSMSForm
NotificationDetail={paymentReceiveMSDetail}
NotificationName={dialogName}
initialValues={initialValues}
notificationTypes={notificationType}
onSubmit={handleFormSubmit}
onCancel={handleFormCancel}
/>
);
}

View File

@@ -11,6 +11,11 @@ import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
const notificationType = {
key: 'sale-receipt-details',
label: 'Sale receipt details',
};
/**
* Notify Receipt Via SMS Form.
*/
@@ -51,12 +56,24 @@ function NotifyReceiptViaSMSForm({
.then(onSuccess)
.catch(onError);
};
// Handle the form cancel.
const handleFormCancel = () => {
closeDialog(dialogName);
};
// Initial values.
const initialValues = React.useMemo(
() => ({
...receiptSMSDetail,
}),
[receiptSMSDetail],
);
return (
<NotifyViaSMSForm
NotificationDetail={receiptSMSDetail}
NotificationName={dialogName}
initialValues={initialValues}
notificationTypes={notificationType}
onSubmit={handleFormSubmit}
onCancel={handleFormCancel}
/>
);
}

View File

@@ -4,11 +4,15 @@ import { useCreateNotifyReceiptBySMS, useReceiptSMSDetail } from 'hooks/query';
const NotifyReceiptViaSMSContext = React.createContext();
/**
*
*/
function NotifyReceiptViaSMSFormProvider({ receiptId, dialogName, ...props }) {
// Create notfiy receipt via sms mutations.
// Create notfiy receipt via SMS mutations.
const { mutateAsync: createNotifyReceiptBySMSMutate } =
useCreateNotifyReceiptBySMS();
// Retrieve the receipt SMS notification details.
const { data: receiptSMSDetail, isLoading: isReceiptSMSDetailLoading } =
useReceiptSMSDetail(receiptId, {
enabled: !!receiptId,

View File

@@ -1,4 +1,5 @@
import React from 'react';
import { castArray } from 'lodash';
import { Formik, Form, useFormikContext } from 'formik';
import styled from 'styled-components';
import { Classes } from '@blueprintjs/core';
@@ -34,7 +35,6 @@ function SMSMessagePreviewSection() {
return (
<SMSPreviewSectionRoot>
<SMSMessagePreview message={sms_message} />
<SMSPreviewSectionNote>
<strong>Note</strong>: Note: One SMS unit can contain a maximum of 160
characters. <strong>{messagesUnits}</strong> SMS units will be used to
@@ -49,6 +49,7 @@ function SMSMessagePreviewSection() {
*/
function NotifyViaSMSForm({
initialValues: initialValuesComponent,
notificationTypes,
onSubmit,
onCancel,
onValuesChange,
@@ -58,6 +59,11 @@ function NotifyViaSMSForm({
...defaultInitialValues,
...transformToForm(initialValuesComponent, defaultInitialValues),
};
// Ensure always returns array.
const formattedNotificationTypes = React.useMemo(
() => castArray(notificationTypes),
[notificationTypes],
);
return (
<Formik
@@ -69,8 +75,11 @@ function NotifyViaSMSForm({
<div className={Classes.DIALOG_BODY}>
<NotifyContent>
<NotifyFieldsSection>
<NotifyViaSMSFormFields />
<NotifyViaSMSFormFields
notificationTypes={formattedNotificationTypes}
/>
</NotifyFieldsSection>
<SMSMessagePreviewSection />
</NotifyContent>
</div>

View File

@@ -2,6 +2,7 @@ import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { FormGroup, InputGroup } from '@blueprintjs/core';
import classNames from 'classnames';
import styled from 'styled-components';
import {
ListSelect,
@@ -11,14 +12,9 @@ import {
import { CLASSES } from 'common/classes';
import { inputIntent } from 'utils';
const notificationTypes = [
{ key: 'details', label: 'Invoice details' },
{ key: 'reminder', label: 'Invoice reminder' },
];
export default function NotifyViaSMSFormFields() {
export default function NotifyViaSMSFormFields({ notificationTypes }) {
return (
<div>
<NotifyViaSMSFormFieldsRoot>
<FastField name={'notification_key'}>
{({ form, meta: { error, touched } }) => (
<FormGroup
@@ -37,6 +33,7 @@ export default function NotifyViaSMSFormFields() {
onItemSelect={(notification) => {
form.setFieldValue('notification_key', notification.key);
}}
disabled={notificationTypes.length < 2}
/>
</FormGroup>
)}
@@ -82,6 +79,8 @@ export default function NotifyViaSMSFormFields() {
</FormGroup>
)}
</FastField>
</div>
</NotifyViaSMSFormFieldsRoot>
);
}
const NotifyViaSMSFormFieldsRoot = styled.div``;

View File

@@ -190,6 +190,9 @@ export function useRefreshEstimates() {
};
}
/**
*
*/
export function useCreateNotifyEstimateBySMS(props) {
const queryClient = useQueryClient();
const apiRequest = useApiRequest();
@@ -210,6 +213,13 @@ export function useCreateNotifyEstimateBySMS(props) {
);
}
/**
*
* @param {*} estimateId
* @param {*} props
* @param {*} requestProps
* @returns
*/
export function useEstimateSMSDetail(estimateId, props, requestProps) {
return useRequestQuery(
[t.SALE_ESTIMATE_SMS_DETAIL, estimateId],

View File

@@ -170,8 +170,12 @@ export function useSettingEditSMSNotification(props) {
(values) => apiRequest.post(`settings/sms-notification`, values),
{
onSuccess: () => {
// Invalidate
queryClient.invalidateQueries([t.SETTING_SMS_NOTIFICATIONS]);
queryClient.invalidateQueries(t.SALE_INVOICE_SMS_DETAIL);
queryClient.invalidateQueries(t.SALE_RECEIPT_SMS_DETAIL);
queryClient.invalidateQueries(t.PAYMENT_RECEIVE_SMS_DETAIL);
queryClient.invalidateQueries(t.SALE_ESTIMATE_SMS_DETAIL);
},
...props,
},