mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
feat: SMS notification module.
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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``;
|
||||
|
||||
@@ -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],
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user