Merge remote-tracking branch 'origin/FloatingAction'

2026-02-17 13:20:31 +00:00 · 2020-11-24 13:02:15 +02:00
parent 535d5bd6d8 98fb5ca448
commit 53dd447540
14 changed files with 617 additions and 292 deletions
--- a/client/src/containers/Customers/CustomerFloatingActions.js
+++ b/client/src/containers/Customers/CustomerFloatingActions.js
@@ -1,52 +1,97 @@
 import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
+import { useFormikContext } from 'formik';
 import { saveInvoke } from 'utils';
+import { Icon } from 'components';

+/**
+ * Customer floating actions bar.
+ */
 export default function CustomerFloatingActions({
  onSubmitClick,
-  onSubmitAndNewClick,
  onCancelClick,
-
  isSubmitting,
  customerId,
 }) {
+  const { resetForm, submitForm } = useFormikContext();
+
+  const handleSubmitBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      noRedirect: false,
+    });
+  };
+
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    resetForm();
+  };
+
+  const handleSubmitAndNewClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      noRedirect: true,
+    });
+  };
+
  return (
    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        type="submit"
-        onClick={(event) => {
-          saveInvoke(onSubmitClick, event);
-        }}
-      >
-        {customerId ? <T id={'edit'} /> : <T id={'save'} />}
-      </Button>
-
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        className={'ml1'}
-        name={'save_and_new'}
-        type="submit"
-        onClick={(event) => {
-          saveInvoke(onSubmitAndNewClick, event);
-        }}
-      >
-        <T id={'save_new'} />
-      </Button>
-
-      <Button
-        className={'ml1'}
-        onClick={(event) => {
-          saveInvoke(onCancelClick, event);
-        }}
-      >
-        <T id={'close'} />
-      </Button>
+      <ButtonGroup>
+        {/* ----------- Save and New ----------- */}
+        <Button
+          disabled={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          text={customerId ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+        {/* ----------- Clear & Reset----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleClearBtnClick}
+          text={customerId ? <T id={'reset'} /> : <T id={'clear'} />}
+        />
+        {/* ----------- Cancel  ----------- */}
+        <Button
+          className={'ml1'}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </ButtonGroup>
    </div>
  );
 }
--- a/client/src/containers/Customers/CustomerForm.js
+++ b/client/src/containers/Customers/CustomerForm.js
@@ -229,13 +229,19 @@ function CustomerForm({
    [setDeletedFiles, deletedFiles],
  );

-  const handleCancelClick = () => {
-    history.goBack();
-  };
+  const handleCancelClick = useCallback(
+    (event) => {
+      history.goBack();
+    },
+    [history],
+  );

-  const handleSubmitAndNewClick = () => {
-    setSubmitPayload({ noRedirect: true });
-  };
+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );

  return (
    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
@@ -261,8 +267,8 @@ function CustomerForm({
            <CustomerFloatingActions
              isSubmitting={isSubmitting}
              customerId={customer}
+              onSubmitClick={handleSubmitClick}
              onCancelClick={handleCancelClick}
-              onSubmitAndNewClick={handleSubmitAndNewClick}
            />
          </Form>
        )}
--- a/client/src/containers/Expenses/ExpenseFloatingActions.js
+++ b/client/src/containers/Expenses/ExpenseFloatingActions.js
@@ -1,10 +1,20 @@
 import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} 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';
+import { Icon } from 'components';

 /**
 * Expense form floating actions.
@@ -14,56 +24,142 @@ export default function ExpenseFloatingFooter({
  onSubmitClick,
  onCancelClick,
  onDraftClick,
+  onClearClick,
  onSubmitAndNewClick,
+  onSubmitForm,
+  onResetForm,
  expense,
 }) {
-  const handleSubmitBtnClick = (event) => {
-    saveInvoke(onSubmitClick, event);
+  const handleSubmitPublishAndNewBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+      resetForm: true,
+    });
  };

-  const handleCancelBtnClick = (event) => {
-    saveInvoke(onCancelClick, event);
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+    });
  };

-  const handleSubmitAndDraftBtnClick = (event) => {
-    saveInvoke(onDraftClick, event);
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+      resetForm: true,
+    });
  };

-  const handleSubmitAndNewBtnClick = (event) => {
-    saveInvoke(onSubmitAndNewClick, event);
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+    });
  };

  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>
+      <ButtonGroup>
+        {/* ----------- Save And Publish ----------- */}
+        <Button
+          disabled={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={(event) => {
+            saveInvoke(onSubmitClick, event, {
+              redirect: true,
+              publish: true,
+            });
+          }}
+          text={
+            expense && expense.id ? (
+              <T id={'edit'} />
+            ) : (
+              <T id={'save_publish'} />
+            )
+          }
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'publish_and_new'} />}
+                onClick={handleSubmitPublishAndNewBtnClick}
+              />
+              <MenuItem
+                text={<T id={'publish_continue_editing'} />}
+                onClick={handleSubmitPublishContinueEditingBtnClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>

-      <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>
+        {/* ----------- Save As Draft ----------- */}
+        <Button
+          disabled={isSubmitting}
+          className={'ml1'}
+          type="submit"
+          onClick={(event) => {
+            saveInvoke(onSubmitClick, event, {
+              redirect: true,
+              publish: false,
+            });
+          }}
+          text={<T id={'save_as_draft'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitDraftAndNewBtnClick}
+              />
+              <MenuItem
+                text={<T id={'save_continue_editing'} />}
+                onClick={handleSubmitDraftContinueEditingBtnClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />} />
+        </Popover>
+        {/* ----------- Clear ----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={(event) => {
+            onResetForm();
+            saveInvoke(onClearClick, event);
+          }}
+          text={expense && expense.id ? <T id={'reset'} /> : <T id={'clear'} />}
+        />
+        {/* ----------- Cancel ----------- */}
+        <Button
+          className={'ml1'}
+          onClick={(event) => {
+            saveInvoke(onCancelClick, event);
+          }}
+          text={<T id={'cancel'} />}
+        />
+      </ButtonGroup>
    </div>
  );
 }
--- a/client/src/containers/Expenses/ExpenseForm.js
+++ b/client/src/containers/Expenses/ExpenseForm.js
@@ -66,9 +66,9 @@ function ExpenseForm({
  onFormSubmit,
  onCancelForm,
 }) {
-  const [payload, setPayload] = useState({});
+  const [submitPayload, setSubmitPayload] = useState({});
  const history = useHistory();
-  
+
  const isNewMode = !expenseId;
  const { formatMessage } = useIntl();

@@ -199,6 +199,8 @@ function ExpenseForm({
    setFieldValue,
    handleSubmit,
    getFieldProps,
+    submitForm,
+    resetForm,
  } = useFormik({
    enableReinitialize: true,
    validationSchema,
@@ -228,7 +230,7 @@ function ExpenseForm({

      const form = {
        ...values,
-        publish: payload.publish,
+        publish: submitPayload.publish,
        categories,
      };
      const saveExpense = (mdeiaIds) =>
@@ -246,7 +248,7 @@ function ExpenseForm({
                  intent: Intent.SUCCESS,
                });
                setSubmitting(false);
-                saveInvokeSubmit({ action: 'update', ...payload });
+                saveInvokeSubmit({ action: 'update', ...submitPayload });
                clearSavedMediaIds([]);
                resetForm();
              })
@@ -265,8 +267,11 @@ function ExpenseForm({
                  intent: Intent.SUCCESS,
                });
                setSubmitting(false);
-                resetForm();
-                saveInvokeSubmit({ action: 'new', ...payload });
+
+                if (submitPayload.resetForm) {
+                  resetForm();
+                }
+                saveInvokeSubmit({ action: 'new', ...submitPayload });
                clearSavedMediaIds();
              })
              .catch((errors) => {
@@ -288,20 +293,17 @@ function ExpenseForm({
    },
  });

-  const handleSubmitClick = useCallback(() => {
-    setPayload({ publish: true, redirect: true });
-  }, [setPayload]);
+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );

  const handleCancelClick = useCallback(() => {
    history.goBack();
-  }, []);
+  }, [history]);

-  const handleSubmitAndNewClick = useCallback(() => {
-    setPayload({ publish: true, redirect: false });
-  });
-  const handleSubmitAndDraftClick = useCallback(() => {
-    setPayload({ publish: false, redirect: false });
-  });

  const handleDeleteFile = useCallback(
    (_deletedFiles) => {
@@ -370,8 +372,8 @@ function ExpenseForm({
          isSubmitting={isSubmitting}
          onSubmitClick={handleSubmitClick}
          onCancelClick={handleCancelClick}
-          onDraftClick={handleSubmitAndDraftClick}
-          onSubmitAndNewClick={handleSubmitAndNewClick}
+          onSubmitForm={submitForm}
+          onResetForm={resetForm}
          expense={expense}
        />
      </form>
--- a/client/src/containers/Sales/Estimate/EstimateFloatingActions.js
+++ b/client/src/containers/Sales/Estimate/EstimateFloatingActions.js
@@ -1,18 +1,37 @@
 import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
 import { saveInvoke } from 'utils';
+import { Icon } from 'components';

+/**
+ * Estimate floating actions bar.
+ */
 export default function EstimateFloatingActions({
  isSubmitting,
  onSubmitClick,
  onCancelClick,
  onClearClick,
-  onSubmitAndNewClick,
  estimateId,
 }) {
+  const { resetForm, submitForm } = useFormikContext();
+
  const handleSubmitBtnClick = (event) => {
-    saveInvoke(onSubmitClick, event);
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+    });
  };

  const handleCancelBtnClick = (event) => {
@@ -20,49 +39,60 @@ export default function EstimateFloatingActions({
  };

  const handleClearBtnClick = (event) => {
-    saveInvoke(onClearClick, event);
+    // saveInvoke(onClearClick, event);
+    resetForm();
  };

  const handleSubmitAndNewClick = (event) => {
-    saveInvoke(onSubmitAndNewClick, event);
-  }
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+    });
+  };

  return (
-    <div className={'form__floating-footer'}>
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        type="submit"
-        onClick={handleSubmitBtnClick}
-      >
-        {(estimateId) ? <T id={'edit'} /> : <T id={'save'} />}
-      </Button>
-
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        className={'ml1'}
-        type="submit"
-        onClick={handleSubmitAndNewClick}
-      >
-        <T id={'save_new'} />
-      </Button>
-
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-      >
-        <T id={'clear'} />
-      </Button>
-
-      <Button
-        className={'ml1'}
-        type="submit"
-        onClick={handleCancelBtnClick}
-      >
-        <T id={'close'} />
-      </Button>
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      <ButtonGroup>
+        {/* ----------- Save and New ----------- */}
+        <Button
+          disabled={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          text={estimateId ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+        {/* ----------- Clear & Reset----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleClearBtnClick}
+          text={estimateId ? <T id={'reset'} /> : <T id={'clear'} />}
+        />
+        {/* ----------- Cancel  ----------- */}
+        <Button
+          className={'ml1'}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </ButtonGroup>
    </div>
  );
 }
--- a/client/src/containers/Sales/Estimate/EstimateForm.js
+++ b/client/src/containers/Sales/Estimate/EstimateForm.js
@@ -228,8 +228,8 @@ const EstimateForm = ({
  );

  const handleSubmitClick = useCallback(
-    (event) => {
-      setSubmitPayload({ redirect: true });
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
    },
    [setSubmitPayload],
  );
@@ -259,11 +259,12 @@ const EstimateForm = ({
            <EditableItemsEntriesTable filterSellableItems={true} />
            <EstimateFormFooter />
            <EstimateFloatingActions
-              isSubmiting={isSubmitting}
+              isSubmitting={isSubmitting}
              estimateId={estimateId}
              onSubmitClick={handleSubmitClick}
              onCancelClick={handleCancelClick}
            />
+      
          </Form>
        )}
      </Formik>
--- a/client/src/containers/Sales/Invoice/InvoiceFloatingActions.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFloatingActions.js
@@ -16,6 +16,10 @@ import classNames from 'classnames';
 import { saveInvoke } from 'utils';
 import { Icon } from 'components';

+
+/**
+ * Invoice floating actions bar.
+ */
 export default function InvoiceFloatingActions({
  isSubmitting,
  onSubmitClick,
@@ -106,6 +110,7 @@ export default function InvoiceFloatingActions({
              />
            </Menu>
          }
+          minimal={true}
          interactionKind={PopoverInteractionKind.CLICK}
          position={Position.BOTTOM_LEFT}
        >
@@ -141,6 +146,7 @@ export default function InvoiceFloatingActions({
              />
            </Menu>
          }
+          minimal={true}
          interactionKind={PopoverInteractionKind.CLICK}
          position={Position.BOTTOM_LEFT}
        >
@@ -159,7 +165,6 @@ export default function InvoiceFloatingActions({
        {/* ----------- Cancel ----------- */}
        <Button
          className={'ml1'}
-          type="submit"
          onClick={(event) => {
            saveInvoke(onCancelClick, event);
          }}
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFloatingActions.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFloatingActions.js
@@ -1,9 +1,20 @@
 import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
-
 import { CLASSES } from 'common/classes';
+import { useFormikContext } from 'formik';
+import { saveInvoke } from 'utils';
+import { Icon } from 'components';

 /**
 * Payment receive floating actions bar.
@@ -13,53 +24,74 @@ export default function PaymentReceiveFormFloatingActions({
  onSubmitClick,
  onCancelClick,
  onClearClick,
+  onSubmitForm,
  paymentReceiveId,
 }) {
-  const handleSubmitClick = (event) => {
-    onSubmitClick && onSubmitClick(event);
+  const handleSubmitBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+    });
  };

  const handleClearBtnClick = (event) => {
    onClearClick && onClearClick(event);
  };

-  const handleCloseBtnClick = (event) => {
+  const handleCancelBtnClick = (event) => {
    onCancelClick && onCancelClick(event);
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleSubmitAndNewClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+    });
  };

  return (
    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        type="submit"
-        onClick={handleSubmitClick}
-      >
-        {paymentReceiveId ? <T id={'edit'} /> : <T id={'save_send'} />}
-      </Button>
-
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        className={'ml1'}
-        name={'save'}
-        type="submit"
-        onClick={handleSubmitClick}
-      >
-        <T id={'save'} />
-      </Button>
-
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-      >
-        <T id={'clear'} />
-      </Button>
-
-      <Button className={'ml1'} type="submit" onClick={handleCloseBtnClick}>
-        <T id={'close'} />
-      </Button>
+      <ButtonGroup>
+        {/* ----------- Save and New ----------- */}
+        <Button
+          disabled={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          text={paymentReceiveId ? <T id={'edit'} /> : <T id={'save_and_send'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+        {/* ----------- Clear & Reset----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleClearBtnClick}
+          text={paymentReceiveId ? <T id={'reset'} /> : <T id={'clear'} />}
+        />
+        {/* ----------- Cancel  ----------- */}
+        <Button
+          className={'ml1'}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </ButtonGroup>
    </div>
  );
 }
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
@@ -61,6 +61,7 @@ function PaymentReceiveForm({
  const [clearLinesAlert, setClearLinesAlert] = useState(false);
  const [fullAmount, setFullAmount] = useState(null);
  const [clearFormAlert, setClearFormAlert] = useState(false);
+  const [submitPayload, setSubmitPayload] = useState({});

  const { formatMessage } = useIntl();
  const [localPaymentEntries, setLocalPaymentEntries] = useState(
@@ -190,7 +191,10 @@ function PaymentReceiveForm({
      });
      setSubmitting(false);
      resetForm();
-      history.push('/payment-receives');
+
+      if (submitPayload.redirect) {
+        history.push('/payment-receives');
+      }
    };
    // Handle request response errors.
    const onError = (errors) => {
@@ -224,6 +228,7 @@ function PaymentReceiveForm({
    isSubmitting,
    touched,
    resetForm,
+    submitForm,
  } = useFormik({
    enableReinitialize: true,
    validationSchema,
@@ -351,6 +356,17 @@ function PaymentReceiveForm({
    [changePageSubtitle],
  );

+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );
+
+  const handleCancelClick = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
  return (
    <div
      className={classNames(
@@ -429,6 +445,9 @@ function PaymentReceiveForm({
          isSubmitting={isSubmitting}
          paymentReceiveId={paymentReceiveId}
          onClearClick={handleClearBtnClick}
+          onSubmitClick={handleSubmitClick}
+          onCancelClick={handleCancelClick}
+          onSubmitForm={submitForm}
        />
      </form>
    </div>
--- a/client/src/containers/Sales/Receipt/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipt/ReceiptForm.js
@@ -64,7 +64,6 @@ const defaultInitialValues = {
 /**
 * Receipt form.
 */
-
 function ReceiptForm({
  //#withMedia
  requestSubmitMedia,
@@ -231,17 +230,19 @@ function ReceiptForm({
    [changePageSubtitle],
  );

-  const handleSubmitClick = (event) => {
-    setSubmitPayload({ redirect: true });
-  };
+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );

-  const handleSubmitAndNewClick = (event) => {
-    setSubmitPayload({ redirect: false });
-  };
-
-  const handleCancelClick = (event) => {
-    history.goBack();
-  };
+  const handleCancelClick = useCallback(
+    (event) => {
+      history.goBack();
+    },
+    [history],
+  );

  return (
    <div className={classNames(CLASSES.PAGE_FORM_RECEIPT, CLASSES.PAGE_FORM)}>
@@ -252,20 +253,22 @@ function ReceiptForm({
        initialValues={initialValues}
        onSubmit={handleFormSubmit}
      >
-        <Form>
-          <ReceiptFromHeader
-            onReceiptNumberChanged={handleReceiptNumberChanged}
-          />
-          <ReceiptNumberWatcher receiptNumber={receiptNumber} />
-          <EditableItemsEntriesTable filterSellableItems={true} />
-          <ReceiptFormFooter />
-          <ReceiptFormFloatingActions
-            receiptId={receiptId}
-            onSubmitClick={handleSubmitClick}
-            onSubmitAndNewClick={handleSubmitAndNewClick}
-            onCancelForm={handleCancelClick}
-          />
-        </Form>
+        {({ isSubmitting }) => (
+          <Form>
+            <ReceiptFromHeader
+              onReceiptNumberChanged={handleReceiptNumberChanged}
+            />
+            <ReceiptNumberWatcher receiptNumber={receiptNumber} />
+            <EditableItemsEntriesTable filterSellableItems={true} />
+            <ReceiptFormFooter />
+            <ReceiptFormFloatingActions
+              isSubmitting={isSubmitting}
+              receiptId={receiptId}
+              onSubmitClick={handleSubmitClick}
+              onCancelClick={handleCancelClick}
+            />
+          </Form>
+        )}
      </Formik>
    </div>
  );
--- a/client/src/containers/Sales/Receipt/ReceiptFormFloatingActions.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormFloatingActions.js
@@ -1,63 +1,99 @@
-import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
+import React, { useCallback } from 'react';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import { useFormikContext } from 'formik';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { saveInvoke } from 'utils';
+import { Icon } from 'components';

+/**
+ * Receipt floating actions bar.
+ */
 export default function ReceiptFormFloatingActions({
  isSubmitting,
  receiptId,
  onSubmitClick,
  onCancelClick,
  onClearClick,
-  onSubmitAndNewClick,
 }) {
-  const { resetForm } = useFormikContext();
+  const { resetForm, submitForm } = useFormikContext();
+
+  const handleSubmitAndNewClick = useCallback(
+    (event) => {
+      submitForm();
+      saveInvoke(onSubmitClick, event, {
+        redirect: false,
+      });
+    },
+    [submitForm],
+  );
+
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    resetForm();
+  };

  return (
    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        type="submit"
-        onClick={(event) => {
-          saveInvoke(onSubmitClick, event);
-        }}
-      >
-        {receiptId ? <T id={'edit'} /> : <T id={'save'} />}
-      </Button>
-
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        className={'ml1'}
-        name={'save'}
-        type="submit"
-        onClick={(event) => {
-          saveInvoke(onSubmitAndNewClick, event);
-        }}
-      >
-        <T id={'save_new'} />
-      </Button>
-
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={(event) => {
-          resetForm();
-          saveInvoke(onClearClick, event);
-        }}
-      >
-        <T id={'clear'} />
-      </Button>
-
-      <Button className={'ml1'} onClick={(event) => {
-        saveInvoke(onCancelClick, event);
-      }}>
-        <T id={'close'} />
-      </Button>
+      <ButtonGroup>
+        {/* ----------- Save and New ----------- */}
+        <Button
+          disabled={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={(event) => {
+            saveInvoke(onSubmitClick, event, {
+              redirect: true,
+            });
+          }}
+          text={receiptId ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+        {/* ----------- Clear & Reset----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleClearBtnClick}
+          text={receiptId ? <T id={'reset'} /> : <T id={'clear'} />}
+        />
+        {/* ----------- Cancel  ----------- */}
+        <Button
+          className={'ml1'}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </ButtonGroup>
    </div>
  );
 }
--- a/client/src/containers/Vendors/VendorFloatingActions.js
+++ b/client/src/containers/Vendors/VendorFloatingActions.js
@@ -1,11 +1,24 @@
 import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
+import { useFormikContext } from 'formik';
 import { saveInvoke } from 'utils';
+import { Icon } from 'components';

-
+/**
+ * Vendor floating actions bar.
+ */
 export default function VendorFloatingActions({
  onSubmitClick,
  onSubmitAndNewClick,
@@ -13,38 +26,73 @@ export default function VendorFloatingActions({
  isSubmitting,
  vendor,
 }) {
+  const { resetForm, submitForm } = useFormikContext();
+
+  const handleSubmitBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      noRedirect: false,
+    });
+  };
+
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    resetForm();
+  };
+
+  const handleSubmitAndNewClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      noRedirect: true,
+    });
+  };
+
  return (
    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        type="submit"
-        onClick={(event) => {
-          saveInvoke(onSubmitClick, event);
-        }}
-      >
-        {vendor ? <T id={'edit'} /> : <T id={'save'} />}
-      </Button>
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        className={'ml1'}
-        name={'save_and_new'}
-        type="submit"
-        onClick={(event) => {
-          saveInvoke(onSubmitAndNewClick, event);
-        }}
-      >
-        <T id={'save_new'} />
-      </Button>
-      <Button
-        className={'ml1'}
-        onClick={(event) => {
-          saveInvoke(onCancelClick, event);
-        }}
-      >
-        <T id={'close'} />
-      </Button>
+      <ButtonGroup>
+        {/* ----------- Save and New ----------- */}
+        <Button
+          disabled={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          text={vendor ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+        {/* ----------- Clear & Reset----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleClearBtnClick}
+          text={vendor ? <T id={'reset'} /> : <T id={'clear'} />}
+        />
+        {/* ----------- Cancel  ----------- */}
+        <Button
+          className={'ml1'}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </ButtonGroup>
    </div>
  );
 }
--- a/client/src/containers/Vendors/VendorForm.js
+++ b/client/src/containers/Vendors/VendorForm.js
@@ -143,9 +143,12 @@ function VendorForm({
    history.goBack();
  }, [history]);

-  const handleSubmitAndNewClick = useCallback(() => {
-    setSubmitPayload({ noRedirect: true });
-  });
+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );

  return (
    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
@@ -173,8 +176,8 @@ function VendorForm({
            <VendorFloatingActions
              isSubmitting={isSubmitting}
              vendor={vendorId}
+              onSubmitClick={handleSubmitClick}
              onCancelClick={handleCancelClick}
-              onSubmitAndNewClick={handleSubmitAndNewClick}
            />
          </Form>
        )}