Fix: ExpenseFlatingActions.

client/src/containers/Expenses/ExpenseFloatingActions.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { saveInvoke } from 'utils';
+
+/**
+ * Expense form floating actions.
+ */
+export default function ExpenseFloatingFooter({
+  isSubmitting,
+  onSubmitClick,
+  onCancelClick,
+  onDraftClick,
+  onSubmitAndNewClick,
+  expense,
+}) {
+  const handleSubmitBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event);
+  };
+
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleSubmitAndDraftBtnClick = (event) => {
+    saveInvoke(onDraftClick, event);
+  };
+
+  const handleSubmitAndNewBtnClick = (event) => {
+    saveInvoke(onSubmitAndNewClick, event);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        type="submit"
+        onClick={handleSubmitBtnClick}
+      >
+        {expense && expense.id ? <T id={'edit'} /> : <T id={'save'} />}
+      </Button>
+
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleSubmitAndNewBtnClick}
+        type="submit"
+      >
+        <T id={'save_new'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleSubmitAndDraftBtnClick}
+      >
+        <T id={'save_as_draft'} />
+      </Button>
+
+      <Button className={'ml1'} onClick={handleCancelBtnClick}>
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}

client/src/containers/Expenses/ExpenseFooter.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
-
-export default function ExpenseFloatingFooter({
-  formik: { isSubmitting },
-  onSubmitClick,
-  onCancelClick,
-
-  expense,
-}) {
-  return (
-    <div className={'form__floating-footer'}>
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        type="submit"
-        onClick={() => {
-          onSubmitClick({ publish: true, redirect: true });
-        }}
-      >
-        {expense && expense.id ? <T id={'edit'} /> : <T id={'save'} />}
-      </Button>
-
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        className={'ml1'}
-        name={'save_and_new'}
-        onClick={() => {
-          onSubmitClick({ publish: true, redirect: false });
-        }}
-      >
-        <T id={'save_new'} />
-      </Button>
-
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={() => {
-          onSubmitClick({ publish: false, redirect: false });
-        }}
-      >
-        <T id={'save_as_draft'} />
-      </Button>
-
-      <Button
-        className={'ml1'}
-        onClick={() => {
-          onCancelClick && onCancelClick();
-        }}
-      >
-        <T id={'close'} />
-      </Button>
-    </div>
-  );
-}

client/src/containers/Expenses/ExpenseForm.js

@@ -11,10 +11,11 @@ import moment from 'moment';
 import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
+import { useHistory } from 'react-router-dom';
 
 import ExpenseFormHeader from './ExpenseFormHeader';
 import ExpenseTable from './ExpenseTable';
-import ExpenseFloatingFooter from './ExpenseFooter';
+import ExpenseFloatingFooter from './ExpenseFloatingActions';
 
 import withExpensesActions from 'containers/Expenses/withExpensesActions';
 import withExpenseDetail from 'containers/Expenses/withExpenseDetail';
@@ -26,13 +27,16 @@ import AppToaster from 'components/AppToaster';
 import Dragzone from 'components/Dragzone';
 
 import useMedia from 'hooks/useMedia';
-import { compose, repeatValue } from 'utils';
+import { compose, repeatValue, transformToForm } from 'utils';
 
 const MIN_LINES_NUMBER = 4;
 const ERROR = {
   EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED',
 };
 
+/**
+ * Expense form.
+ */
 function ExpenseForm({
   // #withMedia
   requestSubmitMedia,
@@ -54,8 +58,13 @@ function ExpenseForm({
   onFormSubmit,
   onCancelForm,
 }) {
-  const { formatMessage } = useIntl();
+  const isNewMode = !expenseId;
+
   const [payload, setPayload] = useState({});
+
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+
   const {
     setFiles,
     saveMedia,
@@ -67,23 +76,6 @@ function ExpenseForm({
     deleteCallback: requestDeleteMedia,
   });
 
-  const handleDropFiles = useCallback((_files) => {
-    setFiles(_files.filter((file) => file.uploaded === false));
-  }, []);
-
-  const savedMediaIds = useRef([]);
-  const clearSavedMediaIds = () => {
-    savedMediaIds.current = [];
-  };
-
-  useEffect(() => {
-    if (expense && expense.id) {
-      changePageTitle(formatMessage({ id: 'edit_expense' }));
-    } else {
-      changePageTitle(formatMessage({ id: 'new_expense' }));
-    }
-  }, [changePageTitle, expense, formatMessage]);
-
   const validationSchema = Yup.object().shape({
     beneficiary: Yup.string().label(formatMessage({ id: 'beneficiary' })),
     payment_account_id: Yup.number()
@@ -117,11 +109,27 @@ function ExpenseForm({
     ),
   });
 
+  const handleDropFiles = useCallback((_files) => {
+    setFiles(_files.filter((file) => file.uploaded === false));
+  }, []);
+
+  const savedMediaIds = useRef([]);
+  const clearSavedMediaIds = () => {
+    savedMediaIds.current = [];
+  };
+
+  useEffect(() => {
+    if (expense && expense.id) {
+      changePageTitle(formatMessage({ id: 'edit_expense' }));
+    } else {
+      changePageTitle(formatMessage({ id: 'new_expense' }));
+    }
+  }, [changePageTitle, expense, formatMessage]);
+
   const saveInvokeSubmit = useCallback(
     (payload) => {
       onFormSubmit && onFormSubmit(payload);
     },
-
     [onFormSubmit],
   );
 
@@ -205,7 +213,15 @@ function ExpenseForm({
     }
   };
 
-  const formik = useFormik({
+  const {
+    values,
+    errors,
+    touched,
+    isSubmitting,
+    setFieldValue,
+    handleSubmit,
+    getFieldProps,
+  } = useFormik({
     enableReinitialize: true,
     validationSchema,
     initialValues: {
@@ -294,20 +310,20 @@ function ExpenseForm({
     },
   });
 
-  const handleSubmitClick = useCallback(
+  const handleSubmitClick = useCallback(() => {
-    (payload) => {
+    setPayload({ publish: true, redirect: true });
-      setPayload(payload);
+  }, [setPayload]);
-      formik.submitForm();
-    },
-    [setPayload, formik],
-  );
 
-  const handleCancelClick = useCallback(
+  const handleCancelClick = useCallback(() => {
-    (payload) => {
+    history.goBack();
-      onCancelForm && onCancelForm(payload);
+  }, []);
-    },
+
-    [onCancelForm],
+  const handleSubmitAndNewClick = useCallback(() => {
-  );
+    setPayload({ publish: true, redirect: false });
+  });
+  const handleSubmitAndDraftClick = useCallback(() => {
+    setPayload({ publish: false, redirect: false });
+  });
 
   const handleDeleteFile = useCallback(
     (_deletedFiles) => {
@@ -322,14 +338,14 @@ function ExpenseForm({
 
   // Handle click on add a new line/row.
   const handleClickAddNewRow = () => {
-    formik.setFieldValue(
+    setFieldValue(
       'categories',
-      orderingCategoriesIndex([...formik.values.categories, defaultCategory]),
+      orderingCategoriesIndex([...values.categories, defaultCategory]),
     );
   };
 
   const handleClearAllLines = () => {
-    formik.setFieldValue(
+    setFieldValue(
       'categories',
       orderingCategoriesIndex([
         ...repeatValue(defaultCategory, MIN_LINES_NUMBER),
@@ -337,21 +353,23 @@ function ExpenseForm({
     );
   };
 
-  const categories = formik.values.categories.filter(
-    (category) =>
-      category.amount && category.index && category.expense_account_id,
-  );
-
   return (
     <div className={'expense-form'}>
-      <form onSubmit={formik.handleSubmit}>
+      <form onSubmit={handleSubmit}>
-        <ExpenseFormHeader formik={formik} />
+        <ExpenseFormHeader
+          errors={errors}
+          touched={touched}
+          values={values}
+          setFieldValue={setFieldValue}
+          getFieldProps={getFieldProps}
+        />
 
         <ExpenseTable
-          categories={formik.values.categories}
+          categories={values.categories}
           onClickAddNewRow={handleClickAddNewRow}
           onClickClearAllLines={handleClearAllLines}
-          formik={formik}
+          errors={errors}
+          setFieldValue={setFieldValue}
           defaultRow={defaultCategory}
         />
         <div class="expense-form-footer">
@@ -359,10 +377,7 @@ function ExpenseForm({
             label={<T id={'description'} />}
             className={'form-group--description'}
           >
-            <TextArea
+            <TextArea growVertically={true} {...getFieldProps('description')} />
-              growVertically={true}
-              {...formik.getFieldProps('description')}
-            />
           </FormGroup>
 
           <Dragzone
@@ -372,13 +387,16 @@ function ExpenseForm({
             hint={'Attachments: Maxiumum size: 20MB'}
           />
         </div>
+
+        <ExpenseFloatingFooter
+          isSubmitting={isSubmitting}
+          onSubmitClick={handleSubmitClick}
+          onCancelClick={handleCancelClick}
+          onDraftClick={handleSubmitAndDraftClick}
+          onSubmitAndNewClick={handleSubmitAndNewClick}
+          expense={expense}
+        />
       </form>
-      <ExpenseFloatingFooter
-        formik={formik}
-        onSubmitClick={handleSubmitClick}
-        expense={expense}
-        onCancelClick={handleCancelClick}
-      />
     </div>
   );
 }

client/src/containers/Expenses/ExpenseFormHeader.js

@@ -26,7 +26,11 @@ import withAccounts from 'containers/Accounts/withAccounts';
 import withCustomers from 'containers/Customers/withCustomers';
 
 function ExpenseFormHeader({
-  formik: { errors, touched, setFieldValue, getFieldProps, values },
+  errors,
+  touched,
+  setFieldValue,
+  getFieldProps,
+  values,
   currenciesList,
   accountsList,
   accountsTypes,

client/src/containers/Expenses/ExpenseTable.js

@@ -94,7 +94,8 @@ function ExpenseTable({
   onClickClearAllLines,
   defaultRow,
   categories,
-  formik: { errors, setFieldValue, resetForm },
+  errors,
+  setFieldValue,
 }) {
   const [rows, setRows] = useState([]);
   const { formatMessage } = useIntl();