feat: add transactions locking.

src/components/DialogsContainer.js

@@ -25,11 +25,13 @@ import NotifyReceiptViaSMSDialog from '../containers/Dialogs/NotifyReceiptViaSMS
 import NotifyEstimateViaSMSDialog from '../containers/Dialogs/NotifyEstimateViaSMSDialog';
 import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog';
 import SMSMessageDialog from '../containers/Dialogs/SMSMessageDialog';
-import TransactionsLockingDialog from '../containers/Dialogs/TransactionsLockingDialog';
 import RefundCreditNoteDialog from '../containers/Dialogs/RefundCreditNoteDialog';
 import RefundVendorCreditDialog from '../containers/Dialogs/RefundVendorCreditDialog';
 import ReconcileCreditNoteDialog from '../containers/Dialogs/ReconcileCreditNoteDialog';
 import ReconcileVendorCreditDialog from '../containers/Dialogs/ReconcileVendorCreditDialog';
+import LockingTransactionsDialog from '../containers/Dialogs/LockingTransactionsDialog';
+import UnlockingTransactionsDialog from '../containers/Dialogs/UnlockingTransactionsDialog';
+import UnlockingPartialTransactionsDialog from '../containers/Dialogs/UnlockingPartialTransactionsDialog';
 
 /**
  * Dialogs container.
@@ -63,11 +65,15 @@ export default function DialogsContainer() {
 
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
       <SMSMessageDialog dialogName={'sms-message-form'} />
-      <TransactionsLockingDialog dialogName={'transactions-locking'} />
       <RefundCreditNoteDialog dialogName={'refund-credit-note'} />
       <RefundVendorCreditDialog dialogName={'refund-vendor-credit'} />
       <ReconcileCreditNoteDialog dialogName={'reconcile-credit-note'} />
       <ReconcileVendorCreditDialog dialogName={'reconcile-vendor-credit'} />
+      <LockingTransactionsDialog dialogName={'locking-transactions'} />
+      <UnlockingTransactionsDialog dialogName={'unlocking-transactions'} />
+      <UnlockingPartialTransactionsDialog
+        dialogName={'unlocking-partial-transactions'}
+      />
     </div>
   );
 }

src/config/sidebarMenu.js

@@ -425,14 +425,14 @@ export default [
           ability: ManualJournalAction.View,
         },
       },
-      // {
+      {
-      //   text: <T id={'sidebar.transactions_locaking'} />,
+        text: <T id={'sidebar.transactions_locaking'} />,
-      //   href: '/transactions-locking',
+        href: '/transactions-locking',
         // permission: {
         //   subject: AbilitySubject.ManualJournal,
         //   ability: ManualJournalAction.TransactionLocking,
         // },
-      // },
+      },
       {
         text: <T id={'exchange_rate'} />,
         href: '/exchange-rates',

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsDialogContent.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { LockingTransactionsFormProvider } from './LockingTransactionsFormProvider';
+import LockingTransactionsForm from './LockingTransactionsForm';
+
+/**
+ * Locking transactions dialog content.
+ */
+export default function LockingTransactionsDialogContent({
+  // #ownProps
+  dialogName,
+}) {
+  return (
+    <LockingTransactionsFormProvider dialogName={dialogName}>
+      <LockingTransactionsForm />
+    </LockingTransactionsFormProvider>
+  );
+}

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import intl from 'react-intl-universal';
+
+import '../../../style/pages/TransactionsLocking/TransactionsLockingDialog.scss';
+
+import { AppToaster } from 'components';
+import { CreateLockingTransactionsFormSchema } from './LockingTransactionsForm.schema';
+
+import { useLockingTransactionsContext } from './LockingTransactionsFormProvider';
+import LockingTransactionsFormContent from './LockingTransactionsFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  module: 'all',
+  lock_to_date: moment(new Date()).format('YYYY-MM-DD'),
+  reason: '',
+};
+
+/**
+ * Locking Transactions Form.
+ */
+function LockingTransactionsForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, createLockingTransactionMutate } =
+    useLockingTransactionsContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('locking_transactions.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+
+    createLockingTransactionMutate(values).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateLockingTransactionsFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={LockingTransactionsFormContent}
+    />
+  );
+}
+export default compose(withDialogActions)(LockingTransactionsForm);

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.schema.js

@@ -3,11 +3,12 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  date: Yup.date().required().label(intl.get('date')),
+  lock_to_date: Yup.date().required().label(intl.get('date')),
+  module: Yup.string().required(),
   reason: Yup.string()
     .required()
     .min(3)
     .max(DATATYPES_LENGTH.TEXT)
     .label(intl.get('reason')),
 });
-export const CreateTransactionsLockingFormSchema = Schema;
+export const CreateLockingTransactionsFormSchema = Schema;

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormContent.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import LockingTransactionsFormFields from './LockingTransactionsFormFields';
+import LockingTransactionsFormFloatingActions from './LockingTransactionsFormFloatingActions';
+
+/**
+ * locking Transactions form content.
+ */
+export default function LockingTransactionsFormContent() {
+  return (
+    <Form>
+      <LockingTransactionsFormFields />
+      <LockingTransactionsFormFloatingActions />
+    </Form>
+  );
+}

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.js

@@ -14,28 +14,28 @@ import {
 } from 'utils';
 
 /**
- * Transactions locking form fields.
+ *  locking Transactions form fields.
  */
-export default function TransactionsLockingFormFields() {
+export default function LockingTransactionsFormFields() {
   const dateFieldRef = useAutofocus();
 
   return (
     <div className={Classes.DIALOG_BODY}>
-      {/*------------ Date -----------*/}
+      {/*------------  Locking Date -----------*/}
-      <FastField name={'date'}>
+      <FastField name={'lock_to_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
-            label={<T id={'date'} />}
+            label={<T id={'locking_transactions.dialog.locking_date'} />}
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="date" />}
+            helperText={<ErrorMessage name="lock_to_date" />}
             minimal={true}
             className={classNames(CLASSES.FILL, 'form-group--date')}
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
               onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('date', formattedDate);
+                form.setFieldValue('lock_to_date', formattedDate);
               })}
               value={tansformDateValue(value)}
               popoverProps={{
@@ -48,11 +48,12 @@ export default function TransactionsLockingFormFields() {
           </FormGroup>
         )}
       </FastField>
-      {/*------------  reasons -----------*/}
+
+      {/*------------ Locking  Reason -----------*/}
       <FastField name={'reason'}>
         {({ field, meta: { error, touched } }) => (
           <FormGroup
-            label={<T id={'reason'} />}
+            label={<T id={'locking_transactions.dialog.reason'} />}
             labelInfo={<FieldRequiredHint />}
             className={'form-group--reason'}
             intent={inputIntent({ error, touched })}

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFloatingActions.js

@@ -3,21 +3,21 @@ import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import { FormattedMessage as T } from 'components';
 
-import { useTransactionLockingContext } from './TransactionsLockingFormProvider';
+import { useLockingTransactionsContext } from './LockingTransactionsFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
 /**
- * Transactions locking floating actions.
+ * locking Transactions floating actions.
  */
-function TransactionsLockingFloatingActions({
+function LockingTransactionsFormFloatingActions({
   // #withDialogActions
   closeDialog,
 }) {
   // Formik context.
   const { isSubmitting } = useFormikContext();
 
-  const { dialogName } = useTransactionLockingContext();
+  const { dialogName } = useLockingTransactionsContext();
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
@@ -27,24 +27,22 @@ function TransactionsLockingFloatingActions({
   return (
     <div className={Classes.DIALOG_FOOTER}>
       <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-        <Button
-          disabled={isSubmitting}
-          onClick={handleCancelBtnClick}
-          style={{ minWidth: '75px' }}
-        >
-          <T id={'cancel'} />
-        </Button>
         <Button
           intent={Intent.PRIMARY}
-          loading={isSubmitting}
+          style={{ minWidth: '95px' }}
-          style={{ minWidth: '75px' }}
           type="submit"
+          loading={isSubmitting}
         >
-          {<T id={'submit'} />}
+          {<T id={'save'} />}
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
         </Button>
       </div>
     </div>
   );
 }
 
-export default compose(withDialogActions)(TransactionsLockingFloatingActions);
+export default compose(withDialogActions)(
+  LockingTransactionsFormFloatingActions,
+);

src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormProvider.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useCreateLockingTransactoin } from 'hooks/query';
+
+const LockingTransactionsContext = React.createContext();
+
+/**
+ * Locking transactions form provider.
+ */
+function LockingTransactionsFormProvider({ dialogName, ...props }) {
+  
+  // Create locking transactions mutations.
+  const { mutateAsync: createLockingTransactionMutate } =
+  useCreateLockingTransactoin();
+
+  // State provider.
+  const provider = {
+    dialogName,
+    createLockingTransactionMutate,
+  };
+  return (
+    <DialogContent>
+      <LockingTransactionsContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useLockingTransactionsContext = () =>
+  React.useContext(LockingTransactionsContext);
+
+export { LockingTransactionsFormProvider, useLockingTransactionsContext };

src/containers/Dialogs/LockingTransactionsDialog/index.js

@@ -3,28 +3,28 @@ import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'utils';
 
-const TransactionsLockingContent = React.lazy(() =>
+const LockingTransactionsDialogContent = React.lazy(() =>
-  import('./TransactionsLockingDialogContent'),
+  import('./LockingTransactionsDialogContent'),
 );
 
 /**
- * Transaction Locking dialog
+ * Locking Transactions dialog
  */
-function TransactionsLockingDialog({ dialogName, payload = {}, isOpen }) {
+function LockingTransactionsDialog({ dialogName, payload = {}, isOpen }) {
   return (
     <Dialog
       name={dialogName}
       autoFocus={true}
-      title={<T id={'transactions_locking.dialog.label'} />}
+      title={<T id={'locking_transactions.dialog.label'} />}
       canEscapeKeyClose={true}
       isOpen={isOpen}
       className={'dialog--transaction--locking'}
     >
       <DialogSuspense>
-        <TransactionsLockingContent dialogName={dialogName} />
+        <LockingTransactionsDialogContent dialogName={dialogName} />
       </DialogSuspense>
     </Dialog>
   );
 }
 
-export default compose(withDialogRedux())(TransactionsLockingDialog);
+export default compose(withDialogRedux())(LockingTransactionsDialog);

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingDialogContent.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { TransactionsLockingFormProvider } from './TransactionsLockingFormProvider';
-import TransactionsLockingForm from './TransactionsLockingForm';
-
-export default function TransactionsLockingDialogContent({
-  // #ownProps
-  dialogName,
-}) {
-  return (
-    <TransactionsLockingFormProvider dialogName={dialogName}>
-      <TransactionsLockingForm />
-    </TransactionsLockingFormProvider>
-  );
-}

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-import { Intent } from '@blueprintjs/core';
-import { Formik } from 'formik';
-import intl from 'react-intl-universal';
-
-import '../../../style/pages/TransactionsLocking/TransactionsLockingDialog.scss'
-
-import { AppToaster } from 'components';
-import { CreateTransactionsLockingFormSchema } from './TransactionsLockingForm.schema';
-
-import { useTransactionLockingContext } from './TransactionsLockingFormProvider';
-import TransactionsLockingFormContent from './TransactionsLockingFormContent';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
-
-const defaultInitialValues = {
-  date: moment(new Date()).format('YYYY-MM-DD'),
-  reason: '',
-};
-
-/**
- * Transactions Locking From.
- */
-function TransactionsLockingForm({
-  // #withDialogActions
-  closeDialog,
-}) {
-  const { dialogName } = useTransactionLockingContext();
-  // Initial form values.
-  const initialValues = {
-    ...defaultInitialValues,
-  };
-
-  // Handles the form submit.
-  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {};
-
-  return (
-    <Formik
-      validationSchema={CreateTransactionsLockingFormSchema}
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
-      component={TransactionsLockingFormContent}
-    />
-  );
-}
-export default compose(withDialogActions)(TransactionsLockingForm);

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormContent.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-
-import TransactionsLockingFormFields from './TransactionsLockingFormFields';
-import TransactionsLockingFloatingActions from './TransactionsLockingFloatingActions';
-
-/**
- * Transactions locking form content.
- */
-export default function TransactionsLockingFormContent() {
-  return (
-    <Form>
-      <TransactionsLockingFormFields />
-      <TransactionsLockingFloatingActions />
-    </Form>
-  );
-}

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormProvider.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { DialogContent } from 'components';
-
-const TransactionsLockingContext = React.createContext();
-
-function TransactionsLockingFormProvider({ dialogName, ...props }) {
-  // State provider.
-  const provider = {
-    dialogName,
-  };
-  return (
-    <DialogContent>
-      <TransactionsLockingContext.Provider value={provider} {...props} />
-    </DialogContent>
-  );
-}
-
-const useTransactionLockingContext = () =>
-  React.useContext(TransactionsLockingContext);
-
-export { TransactionsLockingFormProvider, useTransactionLockingContext };

src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss

@@ -1,8 +1,9 @@
 .dialog--transaction--locking {
-  max-width: 400px;
+  max-width: 450px;
+
   .bp3-form-group {
-    margin-bottom: 15px;
+    margin-bottom: 10px;
-    margin-top: 15px;
+    margin-top: 10px;
 
     label.bp3-label {
       font-size: 13px;
@@ -22,6 +23,9 @@
     }
   }
   .bp3-dialog-footer {
+    display: flex;
+    justify-content: flex-start;
     padding-top: 10px;
+    margin-left: 10px;
   }
 }