{/*------------ Customer email -----------*/}
@@ -31,21 +30,21 @@ export default function CustomerFormAfterPrimarySection({}) {
inline={true}
>
-
+
{({ field, meta: { error, touched } }) => (
)}
-
+
{({ field, meta: { error, touched } }) => (
)}
diff --git a/src/containers/Customers/CustomerForm/CustomerFormFormik.js b/src/containers/Customers/CustomerForm/CustomerFormFormik.js
new file mode 100644
index 000000000..ff5851d20
--- /dev/null
+++ b/src/containers/Customers/CustomerForm/CustomerFormFormik.js
@@ -0,0 +1,127 @@
+import React, { useMemo } from 'react';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import AppToaster from 'components/AppToaster';
+
+import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
+
+import CustomerFormPrimarySection from './CustomerFormPrimarySection';
+import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
+import CustomersTabs from './CustomersTabs';
+import CustomerFloatingActions from './CustomerFloatingActions';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { compose, transformToForm, saveInvoke } from 'utils';
+import { useCustomerFormContext } from './CustomerFormProvider';
+import { defaultInitialValues } from './utils';
+
+import 'style/pages/Customers/Form.scss';
+
+/**
+ * Customer form.
+ */
+function CustomerFormFormik({
+ organization: { base_currency },
+
+ // #ownProps
+ initialValues: initialCustomerValues,
+ onSubmitSuccess,
+ onSubmitError,
+ onCancel,
+ className,
+}) {
+ const {
+ customer,
+ submitPayload,
+ contactDuplicate,
+ editCustomerMutate,
+ createCustomerMutate,
+ isNewMode,
+ } = useCustomerFormContext();
+
+ /**
+ * Initial values in create and edit mode.
+ */
+ const initialValues = useMemo(
+ () => ({
+ ...defaultInitialValues,
+ currency_code: base_currency,
+ ...transformToForm(contactDuplicate || customer, defaultInitialValues),
+ ...initialCustomerValues,
+ }),
+ [customer, contactDuplicate, base_currency, initialCustomerValues],
+ );
+
+ // Handles the form submit.
+ const handleFormSubmit = (values, formArgs) => {
+ const { setSubmitting, resetForm } = formArgs;
+ const formValues = { ...values };
+
+ const onSuccess = () => {
+ AppToaster.show({
+ message: intl.get(
+ isNewMode
+ ? 'the_customer_has_been_created_successfully'
+ : 'the_item_customer_has_been_edited_successfully',
+ ),
+ intent: Intent.SUCCESS,
+ });
+ setSubmitting(false);
+ resetForm();
+
+ saveInvoke(onSubmitSuccess, values, formArgs, submitPayload);
+ };
+
+ const onError = () => {
+ setSubmitting(false);
+ saveInvoke(onSubmitError, values, formArgs, submitPayload);
+ };
+
+ if (isNewMode) {
+ createCustomerMutate(formValues).then(onSuccess).catch(onError);
+ } else {
+ editCustomerMutate([customer.id, formValues])
+ .then(onSuccess)
+ .catch(onError);
+ }
+ };
+
+ return (
+
+ );
+}
+
+export default compose(withCurrentOrganization())(CustomerFormFormik);
diff --git a/src/containers/Customers/CustomerForm/CustomerFormPage.js b/src/containers/Customers/CustomerForm/CustomerFormPage.js
index 50d264d1b..5cf1d3971 100644
--- a/src/containers/Customers/CustomerForm/CustomerFormPage.js
+++ b/src/containers/Customers/CustomerForm/CustomerFormPage.js
@@ -1,20 +1,74 @@
import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
+import styled from 'styled-components';
import { DashboardCard } from 'components';
-import CustomerForm from './CustomerForm';
-import { CustomerFormProvider } from './CustomerFormProvider';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import 'style/pages/Customers/PageForm.scss';
+import CustomerFormFormik from './CustomerFormFormik';
+import {
+ CustomerFormProvider,
+ useCustomerFormContext,
+} from './CustomerFormProvider';
-export default function CustomerFormPage() {
- const { id } = useParams();
+/**
+ * Customer form page loading.
+ * @returns {JSX}
+ */
+function CustomerFormPageLoading({ children }) {
+ const { isFormLoading } = useCustomerFormContext();
return (
-
-
-
-
+
+ {children}
+
+ );
+}
+
+/**
+ * Customer form page.
+ * @returns {JSX}
+ */
+export default function CustomerFormPage() {
+ const history = useHistory();
+ const { id } = useParams();
+
+ const customerId = parseInt(id, 10);
+
+ // Handle the form submit success.
+ const handleSubmitSuccess = (values, formArgs, submitPayload) => {
+ if (!submitPayload.noRedirect) {
+ history.push('/customers');
+ }
+ };
+ // Handle the form cancel button click.
+ const handleFormCancel = () => {
+ history.goBack();
+ };
+
+ return (
+
+
+
+
+
+
);
-}
\ No newline at end of file
+}
+
+const CustomerFormPageFormik = styled(CustomerFormFormik)`
+ .page-form {
+ &__floating-actions {
+ margin-left: -40px;
+ margin-right: -40px;
+ }
+ }
+`;
+
+const CustomerDashboardInsider = styled(DashboardInsider)`
+ padding-bottom: 64px;
+`;
diff --git a/src/containers/Customers/CustomerForm/CustomerFormProvider.js b/src/containers/Customers/CustomerForm/CustomerFormProvider.js
index 64fa78685..ae678b4b8 100644
--- a/src/containers/Customers/CustomerForm/CustomerFormProvider.js
+++ b/src/containers/Customers/CustomerForm/CustomerFormProvider.js
@@ -1,6 +1,5 @@
import React, { useState, createContext } from 'react';
import { useLocation } from 'react-router-dom';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
import {
useCustomer,
useCurrencies,
@@ -24,7 +23,7 @@ function CustomerFormProvider({ customerId, ...props }) {
// Handle fetch contact duplicate details.
const { data: contactDuplicate, isLoading: isContactLoading } = useContact(
contactId,
- { enabled: !!contactId, },
+ { enabled: !!contactId },
);
// Handle fetch Currencies data table
const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
@@ -38,6 +37,9 @@ function CustomerFormProvider({ customerId, ...props }) {
// determines whether the form new or duplicate mode.
const isNewMode = contactId || !customerId;
+ const isFormLoading =
+ isCustomerLoading || isCurrenciesLoading || isContactLoading;
+
const provider = {
customerId,
customer,
@@ -48,24 +50,14 @@ function CustomerFormProvider({ customerId, ...props }) {
isCustomerLoading,
isCurrenciesLoading,
+ isFormLoading,
setSubmitPayload,
editCustomerMutate,
createCustomerMutate,
};
- return (
-
-
-
- );
+ return ;
}
const useCustomerFormContext = () => React.useContext(CustomerFormContext);
diff --git a/src/containers/Customers/CustomerForm/utils.js b/src/containers/Customers/CustomerForm/utils.js
new file mode 100644
index 000000000..d72cfb92d
--- /dev/null
+++ b/src/containers/Customers/CustomerForm/utils.js
@@ -0,0 +1,38 @@
+import moment from 'moment';
+
+
+export const defaultInitialValues = {
+ customer_type: 'business',
+ salutation: '',
+ first_name: '',
+ last_name: '',
+ company_name: '',
+ display_name: '',
+
+ email: '',
+ work_phone: '',
+ personal_phone: '',
+ website: '',
+ note: '',
+ active: true,
+
+ billing_address_country: '',
+ billing_address_1: '',
+ billing_address_2: '',
+ billing_address_city: '',
+ billing_address_state: '',
+ billing_address_postcode: '',
+ billing_address_phone: '',
+
+ shipping_address_country: '',
+ shipping_address_1: '',
+ shipping_address_2: '',
+ shipping_address_city: '',
+ shipping_address_state: '',
+ shipping_address_postcode: '',
+ shipping_address_phone: '',
+
+ opening_balance: '',
+ currency_code: '',
+ opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+};
diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSDialogContent.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSDialogContent.js
new file mode 100644
index 000000000..6384dcc1e
--- /dev/null
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSDialogContent.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { NotifyEstimateViaSMSFormProvider } from './NotifyEstimateViaSMSFormProvider';
+import NotifyEstimateViaSMSForm from './NotifyEstimateViaSMSForm';
+
+export default function NotifyEstimateViaSMSDialogContent({
+ // #ownProps
+ dialogName,
+ estimate,
+}) {
+ return (
+
+
+
+ );
+}
diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
new file mode 100644
index 000000000..13bcefe70
--- /dev/null
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSForm.js
@@ -0,0 +1,81 @@
+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 { transformErrors } from '../../../containers/NotifyViaSMS/utils';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const notificationType = {
+ key: 'sale-estimate-details',
+ label: intl.get('sms_notification.estimate_details.type'),
+};
+
+function NotifyEstimateViaSMSForm({
+ // #withDialogActions
+ closeDialog,
+}) {
+ const {
+ estimateId,
+ dialogName,
+ estimateSMSDetail,
+ createNotifyEstimateBySMSMutate,
+ } = useEstimateViaSMSContext();
+
+ const [calloutCode, setCalloutCode] = React.useState([]);
+
+ // Handles the form submit.
+ const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+ setSubmitting(true);
+
+ // Handle request response success.
+ const onSuccess = (response) => {
+ AppToaster.show({
+ message: intl.get('notify_estimate_via_sms.dialog.success_message'),
+ intent: Intent.SUCCESS,
+ });
+ closeDialog(dialogName);
+ setSubmitting(false);
+ };
+ // Handle request response errors.
+ const onError = ({
+ response: {
+ data: { errors },
+ },
+ }) => {
+ if (errors) {
+ transformErrors(errors, { setErrors, setCalloutCode });
+ }
+ setSubmitting(false);
+ };
+ createNotifyEstimateBySMSMutate([estimateId, values])
+ .then(onSuccess)
+ .catch(onError);
+ };
+
+ const initialValues = {
+ ...estimateSMSDetail,
+ notification_key: notificationType.key,
+ };
+ // Handle the form cancel.
+ const handleFormCancel = () => {
+ closeDialog(dialogName);
+ };
+
+ return (
+
+ );
+}
+
+export default compose(withDialogActions)(NotifyEstimateViaSMSForm);
diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js
new file mode 100644
index 000000000..f913bdc23
--- /dev/null
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/NotifyEstimateViaSMSFormProvider.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import {
+ useEstimateSMSDetail,
+ useCreateNotifyEstimateBySMS,
+} from 'hooks/query';
+
+const NotifyEstimateViaSMSContext = React.createContext();
+
+function NotifyEstimateViaSMSFormProvider({
+ estimateId,
+ dialogName,
+ ...props
+}) {
+ const { data: estimateSMSDetail, isLoading: isEstimateSMSDetailLoading } =
+ useEstimateSMSDetail(estimateId, {
+ enabled: !!estimateId,
+ });
+
+ // Create notfiy estimate by sms mutations.
+ const { mutateAsync: createNotifyEstimateBySMSMutate } =
+ useCreateNotifyEstimateBySMS();
+
+ // State provider.
+ const provider = {
+ estimateId,
+ dialogName,
+ estimateSMSDetail,
+ createNotifyEstimateBySMSMutate,
+ };
+
+ return (
+
+
+
+ );
+}
+
+const useEstimateViaSMSContext = () =>
+ React.useContext(NotifyEstimateViaSMSContext);
+
+export { NotifyEstimateViaSMSFormProvider, useEstimateViaSMSContext };
diff --git a/src/containers/Dialogs/NotifyEstimateViaSMSDialog/index.js b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/index.js
new file mode 100644
index 000000000..a935e5852
--- /dev/null
+++ b/src/containers/Dialogs/NotifyEstimateViaSMSDialog/index.js
@@ -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 (
+ }
+ isOpen={isOpen}
+ canEscapeJeyClose={true}
+ autoFocus={true}
+ className={'dialog--notify-vis-sms'}
+ >
+
+
+
+
+ );
+}
+
+export default compose(withDialogRedux())(NotifyEstimateViaSMSDialog);
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js
new file mode 100644
index 000000000..349312e89
--- /dev/null
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSDialogContent.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { NotifyInvoiceViaSMSFormProvider } from './NotifyInvoiceViaSMSFormProvider';
+import NotifyInvoiceViaSMSForm from './NotifyInvoiceViaSMSForm';
+
+export default function NotifyInvoiceViaSMSDialogContent({
+ // #ownProps
+ dialogName,
+ invoiceId,
+}) {
+ return (
+
+
+
+ );
+}
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
new file mode 100644
index 000000000..4ce2349fe
--- /dev/null
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSForm.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { pick } from 'lodash';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import NotifyViaSMSForm from '../../NotifyViaSMS/NotifyViaSMSForm';
+import { useNotifyInvoiceViaSMSContext } from './NotifyInvoiceViaSMSFormProvider';
+import { transformErrors } from '../../../containers/NotifyViaSMS/utils';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const transformFormValuesToRequest = (values) => {
+ return pick(values, ['notification_key']);
+};
+
+// Momerize the notification types.
+const notificationTypes = [
+ {
+ key: 'details',
+ label: intl.get('sms_notification.invoice_details.type'),
+ },
+ {
+ key: 'reminder',
+ label: intl.get('sms_notification.invoice_reminder.type'),
+ },
+];
+
+/**
+ * Notify Invoice Via SMS Form.
+ */
+function NotifyInvoiceViaSMSForm({
+ // #withDialogActions
+ closeDialog,
+}) {
+ const {
+ createNotifyInvoiceBySMSMutate,
+ invoiceId,
+ invoiceSMSDetail,
+ dialogName,
+ notificationType,
+ setNotificationType,
+ } = useNotifyInvoiceViaSMSContext();
+
+ const [calloutCode, setCalloutCode] = React.useState([]);
+
+ // Handles the form submit.
+ const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+ setSubmitting(true);
+
+ // Handle request response success.
+ const onSuccess = (response) => {
+ AppToaster.show({
+ message: intl.get('notify_invoice_via_sms.dialog.success_message'),
+ intent: Intent.SUCCESS,
+ });
+ setSubmitting(false);
+ closeDialog(dialogName);
+ };
+ // Handle request response errors.
+ const onError = ({
+ response: {
+ data: { errors },
+ },
+ }) => {
+ if (errors) {
+ transformErrors(errors, { setErrors, setCalloutCode });
+ }
+ setSubmitting(false);
+ };
+ // Transformes the form values to request.
+ const requestValues = transformFormValuesToRequest(values);
+
+ // Submits invoice SMS notification.
+ createNotifyInvoiceBySMSMutate([invoiceId, requestValues])
+ .then(onSuccess)
+ .catch(onError);
+ };
+ // Handle the form cancel.
+ const handleFormCancel = React.useCallback(() => {
+ closeDialog(dialogName);
+ }, [closeDialog, dialogName]);
+
+ const initialValues = {
+ notification_key: notificationType,
+ ...invoiceSMSDetail,
+ };
+ // Handle form values change.
+ const handleValuesChange = (values) => {
+ if (values.notification_key !== notificationType) {
+ setNotificationType(values.notification_key);
+ }
+ };
+
+ return (
+
+ );
+}
+
+export default compose(withDialogActions)(NotifyInvoiceViaSMSForm);
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
new file mode 100644
index 000000000..2d1bec964
--- /dev/null
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/NotifyInvoiceViaSMSFormProvider.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useCreateNotifyInvoiceBySMS, useInvoiceSMSDetail } from 'hooks/query';
+
+const NotifyInvoiceViaSMSContext = React.createContext();
+
+/**
+ * Invoice SMS notification provider.
+ */
+function NotifyInvoiceViaSMSFormProvider({ invoiceId, dialogName, ...props }) {
+ const [notificationType, setNotificationType] = React.useState('details');
+
+ // Retrieve the invoice sms notification message details.
+ const { data: invoiceSMSDetail, isLoading: isInvoiceSMSDetailLoading } =
+ useInvoiceSMSDetail(
+ invoiceId,
+ {
+ notification_key: notificationType,
+ },
+ {
+ enabled: !!invoiceId,
+ keepPreviousData: true,
+ },
+ );
+ // Create notfiy invoice by sms mutations.
+ const { mutateAsync: createNotifyInvoiceBySMSMutate } =
+ useCreateNotifyInvoiceBySMS();
+
+ // State provider.
+ const provider = {
+ invoiceId,
+ invoiceSMSDetail,
+ dialogName,
+ createNotifyInvoiceBySMSMutate,
+
+ notificationType,
+ setNotificationType,
+ };
+
+ return (
+
+
+
+ );
+}
+
+const useNotifyInvoiceViaSMSContext = () =>
+ React.useContext(NotifyInvoiceViaSMSContext);
+
+export { NotifyInvoiceViaSMSFormProvider, useNotifyInvoiceViaSMSContext };
diff --git a/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
new file mode 100644
index 000000000..91f0c75e6
--- /dev/null
+++ b/src/containers/Dialogs/NotifyInvoiceViaSMSDialog/index.js
@@ -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 NotifyInvoiceViaSMSDialogContent = React.lazy(() =>
+ import('./NotifyInvoiceViaSMSDialogContent'),
+);
+
+function NotifyInvoiceViaSMSDialog({
+ dialogName,
+ payload: { invoiceId },
+ isOpen,
+}) {
+ return (
+ }
+ isOpen={isOpen}
+ canEscapeJeyClose={true}
+ autoFocus={true}
+ className={'dialog--notify-vis-sms'}
+ >
+
+
+
+
+ );
+}
+
+export default compose(withDialogRedux())(NotifyInvoiceViaSMSDialog);
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js
new file mode 100644
index 000000000..46c164a0f
--- /dev/null
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaFormProvider.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import {
+ useCreateNotifyPaymentReceiveBySMS,
+ usePaymentReceiveSMSDetail,
+} from 'hooks/query';
+
+const NotifyPaymentReceiveViaSMSContext = React.createContext();
+
+function NotifyPaymentReceiveViaFormProvider({
+ paymentReceiveId,
+ dialogName,
+ ...props
+}) {
+ // Create notfiy receipt via sms mutations.
+ const { mutateAsync: createNotifyPaymentReceivetBySMSMutate } =
+ useCreateNotifyPaymentReceiveBySMS();
+
+ const {
+ data: paymentReceiveMSDetail,
+ isLoading: isPaymentReceiveSMSDetailLoading,
+ } = usePaymentReceiveSMSDetail(paymentReceiveId, {
+ enabled: !!paymentReceiveId,
+ });
+
+ // State provider.
+ const provider = {
+ paymentReceiveId,
+ dialogName,
+ paymentReceiveMSDetail,
+ createNotifyPaymentReceivetBySMSMutate,
+ };
+
+ return (
+
+
+
+ );
+}
+
+const useNotifyPaymentReceiveViaSMSContext = () =>
+ React.useContext(NotifyPaymentReceiveViaSMSContext);
+
+export {
+ NotifyPaymentReceiveViaFormProvider,
+ useNotifyPaymentReceiveViaSMSContext,
+};
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSContent.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSContent.js
new file mode 100644
index 000000000..8b1f49934
--- /dev/null
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSContent.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { NotifyPaymentReceiveViaFormProvider } from './NotifyPaymentReceiveViaFormProvider';
+import NotifyPaymentReceiveViaSMSForm from './NotifyPaymentReceiveViaSMSForm';
+
+export default function NotifyPaymentReceiveViaSMSContent({
+ // #ownProps
+ dialogName,
+ paymentReceive,
+}) {
+ return (
+
+
+
+ );
+}
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
new file mode 100644
index 000000000..42604817e
--- /dev/null
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/NotifyPaymentReceiveViaSMSForm.js
@@ -0,0 +1,87 @@
+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 { transformErrors } from '../../../containers/NotifyViaSMS/utils';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const notificationType = {
+ key: 'payment-receive-details',
+ label: intl.get('sms_notification.payment_details.type'),
+};
+
+/**
+ * Notify Payment Recive Via SMS Form.
+ */
+function NotifyPaymentReceiveViaSMSForm({
+ // #withDialogActions
+ closeDialog,
+}) {
+ const {
+ dialogName,
+ paymentReceiveId,
+ paymentReceiveMSDetail,
+ createNotifyPaymentReceivetBySMSMutate,
+ } = useNotifyPaymentReceiveViaSMSContext();
+
+ const [calloutCode, setCalloutCode] = React.useState([]);
+
+ // Handles the form submit.
+ const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+ // Handle request response success.
+ const onSuccess = (response) => {
+ AppToaster.show({
+ message: intl.get(
+ 'notify_payment_receive_via_sms.dialog.success_message',
+ ),
+ intent: Intent.SUCCESS,
+ });
+ closeDialog(dialogName);
+ };
+
+ // Handle request response errors.
+ const onError = ({
+ response: {
+ data: { errors },
+ },
+ }) => {
+ if (errors) {
+ transformErrors(errors, { setErrors, setCalloutCode });
+ }
+ setSubmitting(false);
+ };
+ createNotifyPaymentReceivetBySMSMutate([paymentReceiveId, values])
+ .then(onSuccess)
+ .catch(onError);
+ };
+ // Handle the form cancel.
+ const handleFormCancel = () => {
+ closeDialog(dialogName);
+ };
+
+ // Form initial values.
+ const initialValues = React.useMemo(
+ () => ({
+ ...paymentReceiveMSDetail,
+ notification_key: notificationType.key,
+ }),
+ [paymentReceiveMSDetail],
+ );
+
+ return (
+
+ );
+}
+export default compose(withDialogActions)(NotifyPaymentReceiveViaSMSForm);
diff --git a/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js
new file mode 100644
index 000000000..f9ce607f9
--- /dev/null
+++ b/src/containers/Dialogs/NotifyPaymentReceiveViaSMSDialog/index.js
@@ -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 (
+ }
+ isOpen={isOpen}
+ canEscapeJeyClose={true}
+ autoFocus={true}
+ className={'dialog--notify-vis-sms'}
+ >
+
+
+
+
+ );
+}
+export default compose(withDialogRedux())(NotifyPaymentReciveViaSMSDialog);
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSDialogContent.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSDialogContent.js
new file mode 100644
index 000000000..7f4e40e04
--- /dev/null
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSDialogContent.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { NotifyReceiptViaSMSFormProvider } from './NotifyReceiptViaSMSFormProvider';
+import NotifyReceiptViaSMSForm from './NotifyReceiptViaSMSForm';
+
+export default function NotifyReceiptViaSMSDialogContent({
+ // #ownProps
+ dialogName,
+ receipt,
+}) {
+ return (
+
+
+
+ );
+}
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
new file mode 100644
index 000000000..185d25301
--- /dev/null
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSForm.js
@@ -0,0 +1,85 @@
+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 { transformErrors } from '../../../containers/NotifyViaSMS/utils';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const notificationType = {
+ key: 'sale-receipt-details',
+ label: intl.get('sms_notification.receipt_details.type'),
+};
+
+/**
+ * Notify Receipt Via SMS Form.
+ */
+function NotifyReceiptViaSMSForm({
+ // #withDialogActions
+ closeDialog,
+}) {
+ const {
+ dialogName,
+ receiptId,
+ receiptSMSDetail,
+ createNotifyReceiptBySMSMutate,
+ } = useNotifyReceiptViaSMSContext();
+
+ const [calloutCode, setCalloutCode] = React.useState([]);
+
+ // Handles the form submit.
+ const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+ // Handle request response success.
+ const onSuccess = (response) => {
+ AppToaster.show({
+ message: intl.get('notify_receipt_via_sms.dialog.success_message'),
+ intent: Intent.SUCCESS,
+ });
+ closeDialog(dialogName);
+ };
+
+ // Handle request response errors.
+ const onError = ({
+ response: {
+ data: { errors },
+ },
+ }) => {
+ if (errors) {
+ transformErrors(errors, { setErrors, setCalloutCode });
+ }
+ setSubmitting(false);
+ };
+ createNotifyReceiptBySMSMutate([receiptId, values])
+ .then(onSuccess)
+ .catch(onError);
+ };
+ // Handle the form cancel.
+ const handleFormCancel = () => {
+ closeDialog(dialogName);
+ };
+ // Initial values.
+ const initialValues = React.useMemo(
+ () => ({
+ ...receiptSMSDetail,
+ notification_key: notificationType.key,
+ }),
+ [receiptSMSDetail],
+ );
+
+ return (
+
+ );
+}
+
+export default compose(withDialogActions)(NotifyReceiptViaSMSForm);
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
new file mode 100644
index 000000000..cc2a00089
--- /dev/null
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/NotifyReceiptViaSMSFormProvider.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useCreateNotifyReceiptBySMS, useReceiptSMSDetail } from 'hooks/query';
+
+const NotifyReceiptViaSMSContext = React.createContext();
+
+/**
+ *
+ */
+function NotifyReceiptViaSMSFormProvider({ receiptId, dialogName, ...props }) {
+ // 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,
+ });
+
+ // State provider.
+ const provider = {
+ receiptId,
+ dialogName,
+ receiptSMSDetail,
+ createNotifyReceiptBySMSMutate,
+ };
+
+ return (
+
+
+
+ );
+}
+
+const useNotifyReceiptViaSMSContext = () =>
+ React.useContext(NotifyReceiptViaSMSContext);
+
+export { NotifyReceiptViaSMSFormProvider, useNotifyReceiptViaSMSContext };
diff --git a/src/containers/Dialogs/NotifyReceiptViaSMSDialog/index.js b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/index.js
new file mode 100644
index 000000000..67ae48813
--- /dev/null
+++ b/src/containers/Dialogs/NotifyReceiptViaSMSDialog/index.js
@@ -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 (
+ }
+ isOpen={isOpen}
+ canEscapeJeyClose={true}
+ autoFocus={true}
+ className={'dialog--notify-vis-sms'}
+ >
+
+
+
+
+ );
+}
+
+export default compose(withDialogRedux())(NotifyReceiptViaSMSDialog);
diff --git a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js b/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js
index 967fb68e0..852dca76e 100644
--- a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js
+++ b/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js
@@ -37,7 +37,7 @@ export default function QuickPaymentMadeFormFields() {
const { accounts } = useQuickPaymentMadeContext();
// Intl context.
-
+
const paymentMadeFieldRef = useAutofocus();
return (
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js
new file mode 100644
index 000000000..b7cedf1b3
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogContent.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import '../../../style/pages/SMSMessage/SMSMessage.scss';
+import { SMSMessageDialogProvider } from './SMSMessageDialogProvider';
+import SMSMessageForm from './SMSMessageForm';
+
+/**
+ * SMS message dialog content.
+ */
+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..8aedd7e53
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageDialogProvider.js
@@ -0,0 +1,39 @@
+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();
+
+ // SMS notificiation details
+ 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..3f2e8ecc9
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageForm.js
@@ -0,0 +1,80 @@
+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 { transformErrors } from './utils';
+
+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 },
+ },
+ }) => {
+ if (errors) {
+ transformErrors(errors, { setErrors });
+ }
+ 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..f9f72adad
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
@@ -0,0 +1,119 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Form, useFormikContext } from 'formik';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+import { castArray } from 'lodash';
+
+import SMSMessageFormFields from './SMSMessageFormFields';
+import SMSMessageFormFloatingActions from './SMSMessageFormFloatingActions';
+
+import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
+import { SMSMessagePreview } from 'components';
+import { getSMSUnits } from '../../NotifyViaSMS/utils';
+
+import { whenRtl, whenLtr } from 'utils/styled-components';
+
+/**
+ * SMS message form content.
+ */
+export default function SMSMessageFormContent() {
+ // SMS message dialog context.
+ const { smsNotification } = useSMSMessageDialogContext();
+
+ // Ensure always returns array.
+ const messageVariables = React.useMemo(
+ () => castArray(smsNotification.allowed_variables),
+ [smsNotification.allowed_variables],
+ );
+
+ return (
+
+ );
+}
+
+/**
+ * SMS Message preview section.
+ * @returns {JSX}
+ */
+function SMSMessagePreviewSection() {
+ const {
+ values: { message_text: message },
+ } = useFormikContext();
+
+ const messagesUnits = getSMSUnits(message);
+
+ return (
+
+
+
+ {intl.formatHTMLMessage(
+ { id: 'sms_message.dialog.sms_note' },
+ {
+ value: messagesUnits,
+ },
+ )}
+
+
+ );
+}
+
+const SMSPreviewSectionRoot = styled.div``;
+
+const SMSPreviewSectionNote = styled.div`
+ font-size: 12px;
+ opacity: 0.7;
+`;
+
+const SMSMessageVariables = styled.div`
+ list-style: none;
+ font-size: 12px;
+ opacity: 0.9;
+`;
+
+const MessageVariable = styled.div`
+ margin-bottom: 8px;
+`;
+
+const FormContent = styled.div`
+ display: flex;
+`;
+const FormFields = styled.div`
+ width: 55%;
+`;
+const FormPreview = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 45%;
+
+ ${whenLtr(`
+ padding-left: 25px;
+ margin-left: 25px;
+ border-left: 1px solid #dcdcdd;
+ `)}
+ ${whenRtl(`
+ padding-right: 25px;
+ margin-right: 25px;
+ border-right: 1px solid #dcdcdd;
+ `)}
+`;
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
new file mode 100644
index 000000000..1ba600edc
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFields.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useFormikContext, FastField, ErrorMessage } from 'formik';
+import { Intent, Button, FormGroup, TextArea } from '@blueprintjs/core';
+
+import { FormattedMessage as T } from 'components';
+
+import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
+
+import { inputIntent } from 'utils';
+
+/**
+ *
+ */
+export default function SMSMessageFormFields() {
+ // SMS message dialog context.
+ const { smsNotification } = useSMSMessageDialogContext();
+
+ // Form formik context.
+ const { setFieldValue } = useFormikContext();
+
+ // Handle the button click.
+ const handleBtnClick = () => {
+ setFieldValue('message_text', smsNotification.default_sms_message);
+ };
+
+ return (
+
+ {/* ----------- Message Text ----------- */}
+
+ {({ field, meta: { error, touched } }) => (
+ }
+ className={'form-group--message_text'}
+ intent={inputIntent({ error, touched })}
+ helperText={
+ <>
+
+
+
+
+
+ }
+ >
+
+
+ )}
+
+
+ );
+}
+
+const ResetButton = styled(Button)`
+ font-size: 12px;
+`;
diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
new file mode 100644
index 000000000..e823fba9d
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormFloatingActions.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+
+import { DialogFooterActions, FormattedMessage as T } from 'components';
+
+import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+/**
+ * SMS Message Form floating actions.
+ */
+function SMSMessageFormFloatingActions({
+ // #withDialogActions
+ closeDialog,
+}) {
+ // Formik context.
+ const { isSubmitting } = useFormikContext();
+
+ // SMS Message dialog contxt.
+ const { dialogName } = useSMSMessageDialogContext();
+
+ // Handle close button click.
+ const handleCancelBtnClick = () => {
+ closeDialog(dialogName);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default compose(withDialogActions)(SMSMessageFormFloatingActions);
diff --git a/src/containers/Dialogs/SMSMessageDialog/index.js b/src/containers/Dialogs/SMSMessageDialog/index.js
new file mode 100644
index 000000000..aadb1b13e
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/index.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+
+import { compose } from 'redux';
+
+const SMSMessageDialogContent = React.lazy(() =>
+ import('./SMSMessageDialogContent'),
+);
+
+/**
+ * SMS Message dialog.
+ */
+function SMSMessageDialog({
+ dialogName,
+ payload: { notificationkey },
+ isOpen,
+}) {
+ return (
+
+ );
+}
+
+export default compose(withDialogRedux())(SMSMessageDialog);
diff --git a/src/containers/Dialogs/SMSMessageDialog/utils.js b/src/containers/Dialogs/SMSMessageDialog/utils.js
new file mode 100644
index 000000000..6b94176bd
--- /dev/null
+++ b/src/containers/Dialogs/SMSMessageDialog/utils.js
@@ -0,0 +1,19 @@
+import { Intent } from '@blueprintjs/core';
+import { castArray } from 'lodash';
+
+export const transformErrors = (errors, { setErrors }) => {
+ let unsupportedVariablesError = errors.find(
+ (error) => error.type === 'UNSUPPORTED_SMS_MESSAGE_VARIABLES',
+ );
+ if (unsupportedVariablesError) {
+ const variables = castArray(
+ unsupportedVariablesError.data.unsupported_args,
+ );
+ const stringifiedVariables = variables.join(', ');
+
+ setErrors({
+ message_text: `The SMS message has unsupported variables - ${stringifiedVariables}`,
+ intent: Intent.DANGER,
+ });
+ }
+};
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
index 0c468be41..1a7c3c051 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
@@ -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 (
@@ -75,6 +79,12 @@ function EstimateDetailActionsBar({
intent={Intent.DANGER}
onClick={handleDeleteEstimate}
/>
+
+
);
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
index b83b8a6ed..b4fa903b7 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
@@ -6,28 +6,17 @@ import {
NavbarGroup,
Classes,
NavbarDivider,
- Popover,
- PopoverInteractionKind,
- Position,
Intent,
- MenuItem,
- Menu,
} from '@blueprintjs/core';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
-import { moreVertOptions } from '../../../common/moreVertOptions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
-import {
- If,
- Icon,
- FormattedMessage as T,
- // MoreVertMenutItems,
-} from 'components';
+import { If, Icon, FormattedMessage as T } from 'components';
import { compose } from 'utils';
@@ -76,6 +65,10 @@ function InvoiceDetailActionsBar({
const handleBadDebtInvoice = () => {
openDialog('write-off-bad-debt', { invoiceId });
};
+ // Handle notify via SMS.
+ const handleNotifyViaSMS = () => {
+ openDialog('notify-invoice-via-sms', { invoiceId });
+ };
// Handle cancele write-off invoice.
const handleCancelBadDebtInvoice = () => {
@@ -116,9 +109,11 @@ function InvoiceDetailActionsBar({
/>
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/utils.js b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
index 26bd03fab..68c4cbc29 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/utils.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
@@ -10,6 +10,7 @@ import {
} from '@blueprintjs/core';
import { Icon, FormattedMessage as T, Choose } from 'components';
import { FormatNumberCell } from '../../../components';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
/**
* Retrieve invoice readonly details table columns.
@@ -58,7 +59,11 @@ export const useInvoiceReadonlyEntriesColumns = () =>
[],
);
-export const BadDebtMenuItem = ({ invoice, onDialog, onAlert }) => {
+export const BadDebtMenuItem = ({
+ payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS },
+}) => {
+ const { invoice } = useInvoiceDetailDrawerContext();
+
return (
{
}
- onClick={onDialog}
+ onClick={onBadDebt}
/>
}
/>
+ }
+ />
}
>
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
index 1f4939feb..94bb19c65 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
@@ -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 (
@@ -63,6 +71,12 @@ function PaymentReceiveActionsBar({
intent={Intent.DANGER}
onClick={handleDeletePaymentReceive}
/>
+
+
);
diff --git a/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.js b/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.js
new file mode 100644
index 000000000..260b5ef15
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+ DrawerHeaderContent,
+ DrawerBody,
+ FormattedMessage as T,
+} from 'components';
+
+import QuickCustomerFormDrawer from './QuickCustomerFormDrawer';
+
+/**
+ * Quick create/edit customer drawer.
+ */
+export default function QuickCreateCustomerDrawerContent({ displayName }) {
+ return (
+
+ }
+ />
+
+
+
+
+ );
+}
diff --git a/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.js b/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.js
new file mode 100644
index 000000000..1b665c384
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import * as R from 'ramda';
+import styled from 'styled-components';
+
+import { Card, DrawerLoading } from 'components';
+
+import {
+ CustomerFormProvider,
+ useCustomerFormContext,
+} from '../../Customers/CustomerForm/CustomerFormProvider';
+import CustomerFormFormik from '../../Customers/CustomerForm/CustomerFormFormik';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+/**
+ * Drawer customer form loading wrapper.
+ * @returns {JSX}
+ */
+function DrawerCustomerFormLoading({ children }) {
+ const { isFormLoading } = useCustomerFormContext();
+
+ return {children};
+}
+
+/**
+ * Quick customer form of the drawer.
+ */
+function QuickCustomerFormDrawer({ displayName, closeDrawer, customerId }) {
+ // Handle the form submit request success.
+ const handleSubmitSuccess = () => {
+ closeDrawer('quick-create-customer');
+ };
+ // Handle the form cancel action.
+ const handleCancelForm = () => {
+ closeDrawer('quick-create-customer');
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+export default R.compose(withDrawerActions)(QuickCustomerFormDrawer);
+
+const CustomerFormCard = styled(Card)`
+ margin: 15px;
+ margin-bottom: calc(15px + 65px);
+
+ .page-form {
+ &__floating-actions {
+ margin-left: -36px;
+ margin-right: -36px;
+ }
+ }
+`;
diff --git a/src/containers/Drawers/QuickCreateCustomerDrawer/index.js b/src/containers/Drawers/QuickCreateCustomerDrawer/index.js
new file mode 100644
index 000000000..ce970532e
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateCustomerDrawer/index.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const QuickCreateCustomerDrawerContent = React.lazy(() =>
+ import('./QuickCreateCustomerDrawerContent'),
+);
+
+/**
+ * Quick Create customer
+ */
+function QuickCreateCustomerDrawer({
+ name,
+
+ // #withDrawer
+ isOpen,
+ payload,
+}) {
+ return (
+
+
+
+
+
+ );
+}
+
+export default compose(withDrawers())(QuickCreateCustomerDrawer);
diff --git a/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.js b/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.js
new file mode 100644
index 000000000..b470822f8
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+ DrawerHeaderContent,
+ DrawerBody,
+ FormattedMessage as T,
+} from 'components';
+
+import QuickCreateItemDrawerForm from './QuickCreateItemDrawerForm';
+
+/**
+ * Quick create/edit item drawer content.
+ */
+export default function QuickCreateItemDrawerContent({ itemName }) {
+ return (
+
+ }
+ />
+
+
+
+
+ );
+}
diff --git a/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.js b/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.js
new file mode 100644
index 000000000..ada5848bb
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import * as R from 'ramda';
+import styled from 'styled-components';
+
+import { Card, DrawerLoading } from 'components';
+
+import ItemFormFormik from '../../Items/ItemFormFormik';
+import {
+ ItemFormProvider,
+ useItemFormContext,
+} from '../../Items/ItemFormProvider';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDashboardActions from '../../Dashboard/withDashboardActions';
+
+import { useDrawerContext } from 'components/Drawer/DrawerProvider';
+
+/**
+ * Drawer item form loading.
+ * @returns {JSX}
+ */
+function DrawerItemFormLoading({ children }) {
+ const { isFormLoading } = useItemFormContext();
+
+ return {children};
+}
+
+/**
+ * Quick create/edit item drawer form.
+ */
+function QuickCreateItemDrawerForm({
+ itemId,
+ itemName,
+ closeDrawer,
+
+ // #withDashboardActions
+ addQuickActionEvent,
+}) {
+ // Drawer context.
+ const { payload } = useDrawerContext();
+
+ // Handle the form submit request success.
+ const handleSubmitSuccess = (values, form, submitPayload, response) => {
+ if (submitPayload.redirect) {
+ closeDrawer('quick-create-item');
+ }
+ if (payload.quickActionEvent) {
+ addQuickActionEvent(payload.quickActionEvent, {
+ itemId: response.data.id,
+ });
+ }
+ };
+ // Handle the form cancel.
+ const handleFormCancel = () => {
+ closeDrawer('quick-create-item');
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+export default R.compose(
+ withDrawerActions,
+ withDashboardActions,
+)(QuickCreateItemDrawerForm);
+
+const ItemFormCard = styled(Card)`
+ margin: 15px;
+ margin-bottom: calc(15px + 65px);
+
+ .page-form__floating-actions {
+ margin-left: -36px;
+ margin-right: -36px;
+ }
+`;
diff --git a/src/containers/Drawers/QuickCreateItemDrawer/index.js b/src/containers/Drawers/QuickCreateItemDrawer/index.js
new file mode 100644
index 000000000..972288d2a
--- /dev/null
+++ b/src/containers/Drawers/QuickCreateItemDrawer/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const QuickCretaeItemDrawerContent = React.lazy(() =>
+ import('./QuickCreateItemDrawerContent'),
+);
+
+/**
+ * Quick create item.
+ */
+function QuickCreateItemDrawer({
+ // #ownProps
+ name,
+
+ // #withDrawer
+ isOpen,
+ payload,
+}) {
+ return (
+
+
+
+
+
+ );
+}
+
+export default compose(withDrawers())(QuickCreateItemDrawer);
diff --git a/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.js b/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.js
new file mode 100644
index 000000000..6996dac2a
--- /dev/null
+++ b/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import * as R from 'ramda';
+import styled from 'styled-components';
+
+import { Card, DrawerLoading } from 'components';
+
+import {
+ VendorFormProvider,
+ useVendorFormContext,
+} from '../../Vendors/VendorForm/VendorFormProvider';
+import VendorFormFormik from '../../Vendors/VendorForm/VendorFormFormik';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDashboardActions from '../../Dashboard/withDashboardActions';
+
+import { useDrawerContext } from 'components/Drawer/DrawerProvider';
+
+/**
+ * Drawer vendor form loading wrapper.
+ * @returns {JSX}
+ */
+function DrawerVendorFormLoading({ children }) {
+ const { isFormLoading } = useVendorFormContext();
+
+ return {children};
+}
+
+/**
+ * Quick vendor form of the drawer.
+ */
+function QuickVendorFormDrawer({
+ displayName,
+ closeDrawer,
+ vendorId,
+ addQuickActionEvent,
+}) {
+ const { payload } = useDrawerContext();
+
+ // Handle the form submit request success.
+ const handleSubmitSuccess = (values, form, submitPayload, response) => {
+ if (!submitPayload.noRedirect) {
+ closeDrawer('quick-write-vendor');
+ }
+ if (payload.quickActionEvent) {
+ addQuickActionEvent(payload.quickActionEvent, {
+ vendorId: response.data.id,
+ });
+ }
+ };
+ // Handle the form cancel action.
+ const handleCancelForm = () => {
+ closeDrawer('quick-write-vendor');
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+export default R.compose(
+ withDrawerActions,
+ withDashboardActions,
+)(QuickVendorFormDrawer);
+
+const VendorFormCard = styled(Card)`
+ margin: 15px;
+ margin-bottom: calc(15px + 65px);
+
+ .page-form {
+ &__floating-actions {
+ margin-left: -36px;
+ margin-right: -36px;
+ }
+ }
+`;
diff --git a/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js b/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js
new file mode 100644
index 000000000..b686d2211
--- /dev/null
+++ b/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+ DrawerHeaderContent,
+ DrawerBody,
+ FormattedMessage as T,
+} from 'components';
+
+import QuickVendorFormDrawer from './QuickVendorFormDrawer';
+
+/**
+ * Quick create/edit vendor drawer.
+ */
+export default function QuickWriteVendorDrawerContent({ displayName }) {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/containers/Drawers/QuickWriteVendorDrawer/index.js b/src/containers/Drawers/QuickWriteVendorDrawer/index.js
new file mode 100644
index 000000000..6bd8ea2a4
--- /dev/null
+++ b/src/containers/Drawers/QuickWriteVendorDrawer/index.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+const QuickWriteVendorDrawerContent = React.lazy(() =>
+ import('./QuickWriteVendorDrawerContent'),
+);
+
+/**
+ * Quick Write vendor.
+ */
+function QuickWriteVendorDrawer({
+ name,
+
+ // #withDrawer
+ isOpen,
+ payload,
+}) {
+ return (
+
+
+
+
+
+ );
+}
+
+export default R.compose(withDrawers())(QuickWriteVendorDrawer);
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
index b6e17c191..608805a00 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
@@ -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 (
@@ -69,6 +74,12 @@ function ReceiptDetailActionBar({
intent={Intent.DANGER}
onClick={safeCallback(onDeleteReceipt)}
/>
+
+
);
diff --git a/src/containers/Entries/components.js b/src/containers/Entries/components.js
index 85c057e04..80fcce6e3 100644
--- a/src/containers/Entries/components.js
+++ b/src/containers/Entries/components.js
@@ -108,7 +108,9 @@ const LandedCostHeaderCell = () => {
/**
* Retrieve editable items entries columns.
*/
-export function useEditableItemsEntriesColumns({ landedCost }) {
+export function useEditableItemsEntriesColumns({
+ landedCost,
+}) {
return React.useMemo(
() => [
{
@@ -129,6 +131,7 @@ export function useEditableItemsEntriesColumns({ landedCost }) {
disableSortBy: true,
width: 130,
className: 'item',
+ fieldProps: { allowCreate: true },
},
{
Header: intl.get('description'),
diff --git a/src/containers/Entries/utils.js b/src/containers/Entries/utils.js
index 7bfde9d47..22d8adb54 100644
--- a/src/containers/Entries/utils.js
+++ b/src/containers/Entries/utils.js
@@ -164,3 +164,12 @@ export const composeRowsOnNewRow = R.curry((rowIndex, newRow, rows) => {
updateTableRow(rowIndex, newRow),
)(rows);
});
+
+/**
+ *
+ * @param {*} entries
+ * @returns
+ */
+export const composeControlledEntries = (entries) => {
+ return R.compose(orderingLinesIndexes, updateItemsEntriesTotal)(entries);
+};
diff --git a/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js b/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js
index 407abb290..5208759fc 100644
--- a/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js
+++ b/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js
@@ -14,7 +14,7 @@ import {
import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
import {
CurrencySelectList,
- ContactSelecetList,
+ CustomerSelectField,
AccountsSelectList,
FieldRequiredHint,
Hint,
@@ -78,6 +78,7 @@ export default function ExpenseFormHeader() {
defaultSelectText={}
selectedAccountId={value}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
+ allowCreate={true}
/>
)}
@@ -137,13 +138,14 @@ export default function ExpenseFormHeader() {
helperText={}
inline={true}
>
- }
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
}}
+ allowCreate={true}
/>
)}
diff --git a/src/containers/Expenses/ExpenseForm/components.js b/src/containers/Expenses/ExpenseForm/components.js
index 64f275d00..fb52ac569 100644
--- a/src/containers/Expenses/ExpenseForm/components.js
+++ b/src/containers/Expenses/ExpenseForm/components.js
@@ -113,6 +113,7 @@ export function useExpenseFormTableColumns({ landedCost }) {
disableSortBy: true,
width: 40,
filterAccountsByRootTypes: ['expense'],
+ fieldProps: { allowCreate: true },
},
{
Header: ExpenseAmountHeaderCell,
diff --git a/src/containers/FinancialStatements/BalanceSheet/components.js b/src/containers/FinancialStatements/BalanceSheet/components.js
index 9439acb74..be3962ed9 100644
--- a/src/containers/FinancialStatements/BalanceSheet/components.js
+++ b/src/containers/FinancialStatements/BalanceSheet/components.js
@@ -27,7 +27,7 @@ export function BalanceSheetAlerts() {
{' '}