feat: add notify via SMS Form.

This commit is contained in:
elforjani13
2021-11-07 16:40:02 +02:00
parent 6dcb98a438
commit 7706d2992c
28 changed files with 577 additions and 155 deletions

View File

@@ -20,7 +20,10 @@ 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';
import NotifyInvoiceViaSMSDialog from '../containers/Dialogs/NotifyInvoiceViaSMSDialog';
import NotifyReceiptViaSMSDialog from '../containers/Dialogs/NotifyReceiptViaSMSDialog';
import NotifyEstimateViaSMSDialog from '../containers/Dialogs/NotifyEstimateViaSMSDialog';
import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog'
import SMSMessageDialog from '../containers/Dialogs/SMSMessageDialog';
/**
@@ -47,7 +50,10 @@ export default function DialogsContainer() {
<ReceiptPdfPreviewDialog dialogName={'receipt-pdf-preview'} />
<MoneyInDialog dialogName={'money-in'} />
<MoneyOutDialog dialogName={'money-out'} />
<NotifyContactViaSMSDialog dialogName={'notify-via-sms'} />
<NotifyInvoiceViaSMSDialog dialogName={'notify-invoice-via-sms'} />
<NotifyReceiptViaSMSDialog dialogName={'notify-receipt-via-sms'} />
<NotifyEstimateViaSMSDialog dialogName={'notify-estimate-via-sms'} />
<NotifyPaymentReceiveViaSMSDialog dialogName={'notify-payment-via-sms'} />
<BadDebtDialog dialogName={'write-off-bad-debt'} />
<SMSMessageDialog dialogName={'sms-message-form'} />
</div>

View File

@@ -1,23 +0,0 @@
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,
invoice,
}) {
return (
<NotifyContactViaSMSFormProvider
invoiceId={invoice}
dialogName={dialogName}
>
<NotifyContactViaSMSForm />
</NotifyContactViaSMSFormProvider>
);
}

View File

@@ -1,16 +0,0 @@
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 (
<Form>
<NotifyContactViaSMSFormFields />
<NotifyContactViaSMSFormFloatingActions />
</Form>
);
}

View File

@@ -1,47 +0,0 @@
import React from 'react';
import { DialogContent } from 'components';
import {
useInvoice,
useCreateNotifyInvoiceBySMS,
useInvocieSMSDetails,
} from 'hooks/query';
const NotifyContactViaSMSContext = React.createContext();
/**
* Notify contact via SMS provider.
*/
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,
createNotifyInvoiceBySMSMutate,
};
return (
<DialogContent isLoading={isInvoiceLoading || isInvoiceSMSDetailLoading}>
<NotifyContactViaSMSContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useNotifyContactViaSMSContext = () =>
React.useContext(NotifyContactViaSMSContext);
export { NotifyContactViaSMSFormProvider, useNotifyContactViaSMSContext };

View File

@@ -0,0 +1,18 @@
import React from 'react';
import { NotifyEstimateViaSMSFormProvider } from './NotifyEstimateViaSMSFormProvider';
import NotifyEstimateViaSMSForm from './NotifyEstimateViaSMSForm';
export default function NotifyEstimateViaSMSDialogContent({
// #ownProps
dialogName,
estimate,
}) {
return (
<NotifyEstimateViaSMSFormProvider
estimateId={estimate}
dialogName={dialogName}
>
<NotifyEstimateViaSMSForm />
</NotifyEstimateViaSMSFormProvider>
);
}

View File

@@ -0,0 +1,49 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Intent } from '@blueprintjs/core';
import { AppToaster } from 'components';
import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
import { useEstimateViaSMSContext } from './NotifyEstimateViaSMSFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
function NotifyEstimateViaSMSForm({
// #withDialogActions
closeDialog,
}) {
const { dialogName, estimateId } = useEstimateViaSMSContext();
// Handles the form submit.
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);
};
};
return (
<NotifyViaSMSForm
NotificationDetail={{}}
NotificationName={dialogName}
onSubmit={handleFormSubmit}
/>
);
}
export default compose(withDialogActions)(NotifyEstimateViaSMSForm);

View File

@@ -0,0 +1,30 @@
import React from 'react';
import { DialogContent } from 'components';
// import { } from 'hooks/query';
const NotifyEstimateViaSMSContext = React.createContext();
function NotifyEstimateViaSMSFormProvider({
estimateId,
dialogName,
...props
}) {
// State provider.
const provider = {
estimateId,
dialogName,
};
return (
<DialogContent
// isLoading={}
>
<NotifyEstimateViaSMSContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useEstimateViaSMSContext = () =>
React.useContext(NotifyEstimateViaSMSContext);
export { NotifyEstimateViaSMSFormProvider, useEstimateViaSMSContext };

View File

@@ -0,0 +1,36 @@
import React from 'react';
import { FormattedMessage as T } from 'components';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const NotifyEstimateViaSMSDialogContent = React.lazy(() =>
import('./NotifyEstimateViaSMSDialogContent'),
);
function NotifyEstimateViaSMSDialog({
dialogName,
payload: { estimateId },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
className={'dialog--notify-vis-sms'}
>
<DialogSuspense>
<NotifyEstimateViaSMSDialogContent
dialogName={dialogName}
estimate={estimateId}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(NotifyEstimateViaSMSDialog);

View File

@@ -0,0 +1,19 @@
import React from 'react';
import { NotifyInvoiceViaSMSFormProvider } from './NotifyInvoiceViaSMSFormProvider';
import NotifyInvoiceViaSMSForm from './NotifyInvoiceViaSMSForm';
export default function NotifyInvoiceViaSMSDialogContent({
// #ownProps
dialogName,
invoice,
}) {
return (
<NotifyInvoiceViaSMSFormProvider
invoiceId={invoice}
dialogName={dialogName}
>
<NotifyInvoiceViaSMSForm />
</NotifyInvoiceViaSMSFormProvider>
);
}

View File

@@ -1,42 +1,28 @@
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 NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
import { useNotifyInvoiceViaSMSContext } from './NotifyInvoiceViaSMSFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
import { transformToForm, compose } from 'utils';
const defaultInitialValues = {
customer_name: '',
customer_personal_phone: '',
sms_message: '',
};
function NotifyContactViaSMSForm({
/**
* Notify Invoice Via SMS Form.
*/
function NotifyInvoiceViaSMSForm({
// #withDialogActions
closeDialog,
}) {
const {
createNotifyInvoiceBySMSMutate,
invoiceId,
invoiceSMSDetail,
dialogName,
createNotifyInvoiceBySMSMutate,
} = useNotifyContactViaSMSContext();
// Initial form values
const initialValues = {
...defaultInitialValues,
...transformToForm(invoiceSMSDetail, defaultInitialValues),
};
} = useNotifyInvoiceViaSMSContext();
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
@@ -63,12 +49,12 @@ function NotifyContactViaSMSForm({
};
return (
<Formik
validationSchema={CreateNotifyContactViaSMSFormSchema}
initialValues={initialValues}
<NotifyViaSMSForm
NotificationDetail={invoiceSMSDetail}
NotificationName={dialogName}
onSubmit={handleFormSubmit}
component={NotifyContactViaSMSFormContent}
/>
);
}
export default compose(withDialogActions)(NotifyContactViaSMSForm);
export default compose(withDialogActions)(NotifyInvoiceViaSMSForm);

View File

@@ -0,0 +1,35 @@
import React from 'react';
import { DialogContent } from 'components';
import { useCreateNotifyInvoiceBySMS, useInvocieSMSDetails } from 'hooks/query';
const NotifyInvoiceViaSMSContext = React.createContext();
function NotifyInvoiceViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
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,
createNotifyInvoiceBySMSMutate,
};
return (
<DialogContent isLoading={isInvoiceSMSDetailLoading}>
<NotifyInvoiceViaSMSContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useNotifyInvoiceViaSMSContext = () =>
React.useContext(NotifyInvoiceViaSMSContext);
export { NotifyInvoiceViaSMSFormProvider, useNotifyInvoiceViaSMSContext };

View File

@@ -3,16 +3,13 @@ import React from 'react';
import { FormattedMessage as T } from 'components';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'redux';
import { compose } from 'utils';
const NotifyContactViaSMSDialogContent = React.lazy(() =>
import('./NotifyContactViaSMSContent'),
const NotifyInvoiceViaSMSDialogContent = React.lazy(() =>
import('./NotifyInvoiceViaSMSDialogContent'),
);
/**
* Notify contact via SMS.
*/
function NotifyContactViaSMSDialog({
function NotifyInvoiceViaSMSDialog({
dialogName,
payload: { invoiceId },
isOpen,
@@ -27,7 +24,7 @@ function NotifyContactViaSMSDialog({
className={'dialog--notify-vis-sms'}
>
<DialogSuspense>
<NotifyContactViaSMSDialogContent
<NotifyInvoiceViaSMSDialogContent
dialogName={dialogName}
invoice={invoiceId}
/>
@@ -35,5 +32,4 @@ function NotifyContactViaSMSDialog({
</Dialog>
);
}
export default compose(withDialogRedux())(NotifyContactViaSMSDialog);
export default compose(withDialogRedux())(NotifyInvoiceViaSMSDialog);

View File

@@ -0,0 +1,33 @@
import React from 'react';
import { DialogContent } from 'components';
// import { useCreateNotifyInvoiceBySMS, useInvocieSMSDetails } from 'hooks/query';
const NotifyPaymentReceiveViaSMSContext = React.createContext();
function NotifyPaymentReceiveViaFormProvider({
paymentReceiveId,
dialogName,
...props
}) {
// State provider.
const provider = {
paymentReceiveId,
dialogName,
};
return (
<DialogContent
// isLoading={}
>
<NotifyPaymentReceiveViaSMSContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useNotifyPaymentReceiveViaSMSContext = () =>
React.useContext(NotifyPaymentReceiveViaSMSContext);
export {
NotifyPaymentReceiveViaFormProvider,
useNotifyPaymentReceiveViaSMSContext,
};

View File

@@ -0,0 +1,19 @@
import React from 'react';
import { NotifyPaymentReceiveViaFormProvider } from './NotifyPaymentReceiveViaFormProvider';
import NotifyPaymentReceiveViaSMSForm from './NotifyPaymentReceiveViaSMSForm';
export default function NotifyPaymentReceiveViaSMSContent({
// #ownProps
dialogName,
paymentReceive,
}) {
return (
<NotifyPaymentReceiveViaFormProvider
paymentReceiveId={paymentReceive}
dialogName={dialogName}
>
<NotifyPaymentReceiveViaSMSForm />
</NotifyPaymentReceiveViaFormProvider>
);
}

View File

@@ -0,0 +1,52 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Intent } from '@blueprintjs/core';
import { AppToaster } from 'components';
import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
import { useNotifyPaymentReceiveViaSMSContext } from './NotifyPaymentReceiveViaFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Notify Payment Recive Via SMS Form.
*/
function NotifyPaymentReceiveViaSMSForm({
// #withDialogActions
closeDialog,
}) {
const { dialogName, paymentReceiveId } =
useNotifyPaymentReceiveViaSMSContext();
// Handles the form submit.
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);
};
};
return (
<NotifyViaSMSForm
NotificationDetail={{}}
NotificationName={dialogName}
onSubmit={handleFormSubmit}
/>
);
}
export default compose(withDialogActions)(NotifyPaymentReceiveViaSMSForm);

View File

@@ -0,0 +1,34 @@
import React from 'react';
import { FormattedMessage as T } from 'components';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const NotifyPaymentReceiveViaSMSDialogContent = React.lazy(() =>
import('./NotifyPaymentReceiveViaSMSContent'),
);
function NotifyPaymentReciveViaSMSDialog({
dialogName,
payload: { paymentReceiveId },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
className={'dialog--notify-vis-sms'}
>
<DialogSuspense>
<NotifyPaymentReceiveViaSMSDialogContent
dialogName={dialogName}
paymnetReceive={paymentReceiveId}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(NotifyPaymentReciveViaSMSDialog);

View File

@@ -0,0 +1,19 @@
import React from 'react';
import { NotifyReceiptViaSMSFormProvider } from './NotifyReceiptViaSMSFormProvider';
import NotifyReceiptViaSMSForm from './NotifyReceiptViaSMSForm';
export default function NotifyReceiptViaSMSDialogContent({
// #ownProps
dialogName,
receipt,
}) {
return (
<NotifyReceiptViaSMSFormProvider
receiptId={receipt}
dialogName={dialogName}
>
<NotifyReceiptViaSMSForm />
</NotifyReceiptViaSMSFormProvider>
);
}

View File

@@ -0,0 +1,52 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Intent } from '@blueprintjs/core';
import { AppToaster } from 'components';
import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
import { useNotifyReceiptViaSMSContext } from './NotifyReceiptViaSMSFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Notify Receipt Via SMS Form.
*/
function NotifyReceiptViaSMSForm({
// #withDialogActions
closeDialog,
}) {
const { dialogName, receiptId } = useNotifyReceiptViaSMSContext();
// Handles the form submit.
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);
};
};
return (
<NotifyViaSMSForm
NotificationDetail={{}}
NotificationName={dialogName}
onSubmit={handleFormSubmit}
/>
);
}
export default compose(withDialogActions)(NotifyReceiptViaSMSForm);

View File

@@ -0,0 +1,28 @@
import React from 'react';
import { DialogContent } from 'components';
// import { useCreateNotifyInvoiceBySMS, useInvocieSMSDetails } from 'hooks/query';
const NotifyReceiptViaSMSContext = React.createContext();
function NotifyReceiptViaSMSFormProvider({ receiptId, dialogName, ...props }) {
// Create notfiy receipt via sms mutations.
// State provider.
const provider = {
receiptId,
dialogName,
};
return (
<DialogContent
// isLoading={}
>
<NotifyReceiptViaSMSContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useNotifyReceiptViaSMSContext = () =>
React.useContext(NotifyReceiptViaSMSContext);
export { NotifyReceiptViaSMSFormProvider, useNotifyReceiptViaSMSContext };

View File

@@ -0,0 +1,35 @@
import React from 'react';
import { FormattedMessage as T } from 'components';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const NotifyReceiptViaSMSDialogContent = React.lazy(() =>
import('./NotifyReceiptViaSMSDialogContent'),
);
function NotifyReceiptViaSMSDialog({
dialogName,
payload: { receiptId },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
className={'dialog--notify-vis-sms'}
>
<DialogSuspense>
<NotifyReceiptViaSMSDialogContent
dialogName={dialogName}
receipt={receiptId}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(NotifyReceiptViaSMSDialog);

View File

@@ -15,7 +15,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
import { compose } from 'utils';
@@ -51,6 +51,10 @@ function EstimateDetailActionsBar({
const handlePrintEstimate = () => {
openDialog('estimate-pdf-preview', { estimateId });
};
// Handle notify via SMS.
const handleNotifyViaSMS = () => {
openDialog('notify-estimate-via-sms', { estimateId });
};
return (
<DashboardActionsBar>
@@ -75,6 +79,12 @@ function EstimateDetailActionsBar({
intent={Intent.DANGER}
onClick={handleDeleteEstimate}
/>
<NavbarDivider />
<MoreMenuItems
payload={{
onNotifyViaSMS: handleNotifyViaSMS,
}}
/>
</NavbarGroup>
</DashboardActionsBar>
);

View File

@@ -67,7 +67,7 @@ function InvoiceDetailActionsBar({
};
// Handle notify via SMS.
const handleNotifyViaSMS = () => {
openDialog('notify-via-sms', { invoiceId });
openDialog('notify-invoice-via-sms', { invoiceId });
};
// Handle cancele write-off invoice.

View File

@@ -16,7 +16,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
import { compose } from 'utils';
@@ -29,6 +29,9 @@ function PaymentReceiveActionsBar({
// #withDrawerActions
closeDrawer,
// #withDialogActions
openDialog,
}) {
const history = useHistory();
@@ -46,6 +49,11 @@ function PaymentReceiveActionsBar({
openAlert('payment-receive-delete', { paymentReceiveId });
};
// Handle notify via SMS.
const handleNotifyViaSMS = () => {
openDialog('notify-payment-via-sms', { paymentReceiveId });
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -63,6 +71,12 @@ function PaymentReceiveActionsBar({
intent={Intent.DANGER}
onClick={handleDeletePaymentReceive}
/>
<NavbarDivider />
<MoreMenuItems
payload={{
onNotifyViaSMS: handleNotifyViaSMS,
}}
/>
</NavbarGroup>
</DashboardActionsBar>
);

View File

@@ -14,7 +14,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
import { safeCallback, compose } from 'utils';
@@ -46,6 +46,11 @@ function ReceiptDetailActionBar({
const onPrintReceipt = () => {
openDialog('receipt-pdf-preview', { receiptId });
};
// Handle notify via SMS.
const handleNotifyViaSMS = () => {
openDialog('notify-receipt-via-sms', { receiptId });
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -69,6 +74,12 @@ function ReceiptDetailActionBar({
intent={Intent.DANGER}
onClick={safeCallback(onDeleteReceipt)}
/>
<NavbarDivider />
<MoreMenuItems
payload={{
onNotifyViaSMS: handleNotifyViaSMS,
}}
/>
</NavbarGroup>
</DashboardActionsBar>
);

View File

@@ -0,0 +1,42 @@
import React from 'react';
import { Formik, Form } from 'formik';
import 'style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss';
import { CreateNotifyViaSMSFormSchema } from './NotifyViaSMSForm.schema';
import NotifyViaSMSFormFields from './NotifyViaSMSFormFields';
import NotifyViaSMSFormFloatingActions from './NotifyViaSMSFormFloatingActions';
import { transformToForm, saveInvoke } from 'utils';
const defaultInitialValues = {
customer_name: '',
customer_personal_phone: '',
sms_message: '',
};
/**
* Notify Via SMS Form.
*/
function NotifyViaSMSForm({ onSubmit, NotificationDetail, NotificationName }) {
// Initial form values
const initialValues = {
...defaultInitialValues,
...transformToForm(NotificationDetail, defaultInitialValues),
};
return (
<Formik
validationSchema={CreateNotifyViaSMSFormSchema}
initialValues={initialValues}
onSubmit={onSubmit}
>
<Form>
<NotifyViaSMSFormFields />
<NotifyViaSMSFormFloatingActions dialogName={NotificationName} />
</Form>
</Formik>
);
}
export default NotifyViaSMSForm;

View File

@@ -8,4 +8,4 @@ const Schema = Yup.object().shape({
sms_message: Yup.string().required().trim().max(DATATYPES_LENGTH.TEXT),
});
export const CreateNotifyContactViaSMSFormSchema = Schema;
export const CreateNotifyViaSMSFormSchema = Schema;

View File

@@ -2,25 +2,13 @@ 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 { Classes, FormGroup, TextArea, 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() {
function NotifyViaSMSFormFields() {
return (
<div className={Classes.DIALOG_BODY}>
{/* ----------- Send Notification to ----------- */}
@@ -88,4 +76,4 @@ function NotifyContactViaSMSFormFields() {
);
}
export default NotifyContactViaSMSFormFields;
export default NotifyViaSMSFormFields;

View File

@@ -1,21 +1,20 @@
import React from 'react';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { useNotifyContactViaSMSContext } from './NotifyContactViaSMSFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
function NotifyContactViaSMSFormFloatingActions({
function NotifyViaSMSFormFloatingActions({
// #withDialogActions
closeDialog,
dialogName,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
const { dialogName } = useNotifyContactViaSMSContext();
// Handle close button click.
const handleCancelBtnClick = () => {
closeDialog(dialogName);
@@ -39,7 +38,4 @@ function NotifyContactViaSMSFormFloatingActions({
</div>
);
}
export default compose(withDialogActions)(
NotifyContactViaSMSFormFloatingActions,
);
export default compose(withDialogActions)(NotifyViaSMSFormFloatingActions);