From 222ffd7ac6493f54a6eb20b3d5d19f0ca5ca78ee Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Mon, 23 Nov 2020 21:01:22 +0200
Subject: [PATCH] Fix: FloatingActions.

---
 .../Customers/CustomerFloatingActions.js      | 115 +++++++++++-----
 .../src/containers/Customers/CustomerForm.js  |  20 ++-
 .../Sales/Estimate/EstimateFloatingActions.js | 112 ++++++++++------
 .../containers/Sales/Estimate/EstimateForm.js |  23 ++--
 .../Sales/Invoice/InvoiceFloatingActions.js   |   7 +-
 .../containers/Sales/Receipt/ReceiptForm.js   |  53 ++++----
 .../Receipt/ReceiptFormFloatingActions.js     | 124 +++++++++++-------
 .../Vendors/VendorFloatingActions.js          | 112 +++++++++++-----
 client/src/containers/Vendors/VendorForm.js   |  11 +-
 9 files changed, 380 insertions(+), 197 deletions(-)

diff --git a/client/src/containers/Customers/CustomerFloatingActions.js b/client/src/containers/Customers/CustomerFloatingActions.js
index e390794d0..a22a9aefe 100644
--- 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>
   );
 }
diff --git a/client/src/containers/Customers/CustomerForm.js b/client/src/containers/Customers/CustomerForm.js
index ffbddf34e..bf7d28fba 100644
--- 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>
         )}
diff --git a/client/src/containers/Sales/Estimate/EstimateFloatingActions.js b/client/src/containers/Sales/Estimate/EstimateFloatingActions.js
index f76709fdb..d56def74d 100644
--- 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>
   );
 }
diff --git a/client/src/containers/Sales/Estimate/EstimateForm.js b/client/src/containers/Sales/Estimate/EstimateForm.js
index ba1f06a67..98ef90428 100644
--- a/client/src/containers/Sales/Estimate/EstimateForm.js
+++ b/client/src/containers/Sales/Estimate/EstimateForm.js
@@ -216,13 +216,19 @@ const EstimateForm = ({
     [changePageSubtitle],
   );
 
-  const handleSubmitClick = useCallback((event) => {
-    setSubmitPayload({ redirect: true });
-  }, [setSubmitPayload]);
+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );
 
-  const handleCancelClick = useCallback((event) => {
-    history.goBack();
-  }, [history]);
+  const handleCancelClick = useCallback(
+    (event) => {
+      history.goBack();
+    },
+    [history],
+  );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ESTIMATE)}>
@@ -238,15 +244,16 @@ const EstimateForm = ({
             <EstimateFormHeader
               onEstimateNumberChanged={handleEstimateNumberChange}
             />
-            <EstimateNumberWatcher estimateNumber={estimateNumber}  />
+            <EstimateNumberWatcher estimateNumber={estimateNumber} />
             <EditableItemsEntriesTable />
             <EstimateFormFooter />
             <EstimateFloatingActions
-              isSubmiting={isSubmitting}
+              isSubmitting={isSubmitting}
               estimateId={estimateId}
               onSubmitClick={handleSubmitClick}
               onCancelClick={handleCancelClick}
             />
+      
           </Form>
         )}
       </Formik>
diff --git a/client/src/containers/Sales/Invoice/InvoiceFloatingActions.js b/client/src/containers/Sales/Invoice/InvoiceFloatingActions.js
index f52c278ca..0004df237 100644
--- 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);
           }}
diff --git a/client/src/containers/Sales/Receipt/ReceiptForm.js b/client/src/containers/Sales/Receipt/ReceiptForm.js
index bf13f2b35..573c8923a 100644
--- a/client/src/containers/Sales/Receipt/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipt/ReceiptForm.js
@@ -59,7 +59,6 @@ const defaultInitialValues = {
 /**
  * Receipt form.
  */
-
 function ReceiptForm({
   //#withMedia
   requestSubmitMedia,
@@ -218,17 +217,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)}>
@@ -239,20 +240,22 @@ function ReceiptForm({
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        <Form>
-          <ReceiptFromHeader
-            onReceiptNumberChanged={handleReceiptNumberChanged}
-          />
-          <ReceiptNumberWatcher receiptNumber={receiptNumber} />
-          <EditableItemsEntriesTable />
-          <ReceiptFormFooter />
-          <ReceiptFormFloatingActions
-            receiptId={receiptId}
-            onSubmitClick={handleSubmitClick}
-            onSubmitAndNewClick={handleSubmitAndNewClick}
-            onCancelForm={handleCancelClick}
-          />
-        </Form>
+        {({ isSubmitting }) => (
+          <Form>
+            <ReceiptFromHeader
+              onReceiptNumberChanged={handleReceiptNumberChanged}
+            />
+            <ReceiptNumberWatcher receiptNumber={receiptNumber} />
+            <EditableItemsEntriesTable />
+            <ReceiptFormFooter />
+            <ReceiptFormFloatingActions
+              isSubmitting={isSubmitting}
+              receiptId={receiptId}
+              onSubmitClick={handleSubmitClick}
+              onCancelClick={handleCancelClick}
+            />
+          </Form>
+        )}
       </Formik>
     </div>
   );
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormFloatingActions.js b/client/src/containers/Sales/Receipt/ReceiptFormFloatingActions.js
index c93cb2161..c81044338 100644
--- 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>
   );
 }
diff --git a/client/src/containers/Vendors/VendorFloatingActions.js b/client/src/containers/Vendors/VendorFloatingActions.js
index 0f8203faf..7e3216da7 100644
--- 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>
   );
 }
diff --git a/client/src/containers/Vendors/VendorForm.js b/client/src/containers/Vendors/VendorForm.js
index 23b760735..fff75d5d5 100644
--- 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>
         )}