Fix: FloatingActions.

client/src/containers/Purchases/Bill/BillFloatingActions.js

@@ -1,8 +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 { useFormikContext } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
 import { saveInvoke } from 'utils';
+import { If, Icon } from 'components';
 
+/**
+ * Bill floating actions bar.
+ */
 export default function BillFloatingActions({
   isSubmitting,
   onSubmitClick,
@@ -10,53 +26,176 @@ export default function BillFloatingActions({
   onCancelClick,
   onClearClick,
   billId,
+  billPublished,
 }) {
+  const { resetForm, submitForm } = useFormikContext();
+
+  const handleSubmitPublishBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+    });
+  };
+
+  const handleSubmitPublishAndNewBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+    });
+  };
+
+  const handleSubmitDraftBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: false,
+    });
+  };
+
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+    });
+  };
+
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    resetForm();
+  };
+
   return (
-    <div className={'form__floating-footer'}>
-      <Button
-        disabled={isSubmitting}
-        loading={isSubmitting}
-        intent={Intent.PRIMARY}
-        type="submit"
-        onClick={(event) => {
-          saveInvoke(onSubmitClick, event);
-        }}
-      >
-        {billId ? <T id={'edit'} /> : <T id={'save'} />}
-      </Button>
-
-      <Button
-        disabled={isSubmitting}
-        loading={isSubmitting}
-        intent={Intent.PRIMARY}
-        className={'ml1'}
-        type="submit"
-        onClick={(event) => {
-          saveInvoke(onSubmitAndNewClick, event);
-        }}
-      >
-        <T id={'save_new'} />
-      </Button>
-
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Publish ----------- */}
+      <If condition={!billId}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<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>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={billId && billPublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            type="submit"
+            onClick={handleSubmitDraftBtnClick}
+            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>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
         disabled={isSubmitting}
-        onClick={(event) => {
-          saveInvoke(onClearClick, event);
-        }}
-      >
-        <T id={'clear'} />
-      </Button>
-
+        onClick={handleClearBtnClick}
+        text={billId ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
       <Button
         className={'ml1'}
-        type="submit"
-        onClick={(event) => {
-          saveInvoke(onCancelClick, event);
-        }}
-      >
-        <T id={'close'} />
-      </Button>
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
     </div>
   );
 }

client/src/containers/Purchases/Bill/BillForm.js

@@ -22,7 +22,12 @@ import withBillDetail from './withBillDetail';
 import { AppToaster } from 'components';
 
 import { ERROR } from 'common/errors';
-import { compose, repeatValue, defaultToTransform, orderingLinesIndexes } from 'utils';
+import {
+  compose,
+  repeatValue,
+  defaultToTransform,
+  orderingLinesIndexes,
+} from 'utils';
 
 const MIN_LINES_NUMBER = 5;
 
@@ -154,11 +159,13 @@ function BillForm({
       });
       setSubmitting(false);
 
-      resetForm();
       changePageSubtitle('');
 
       if (submitPayload.redirect) {
-        history.go('/bills');
+        history.push('/bills');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
       }
     };
     // Handle the request error.
@@ -189,9 +196,12 @@ function BillForm({
     [changePageSubtitle],
   );
 
-  const handleSubmitClick = useCallback(() => {
-    setSubmitPayload({ redirect: true });
-  }, [setSubmitPayload]);
+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );
 
   const handleCancelClick = useCallback(() => {
     history.goBack();
@@ -218,6 +228,7 @@ function BillForm({
             <BillFloatingActions
               isSubmitting={isSubmitting}
               billId={billId}
+              billPublished={true}
               onSubmitClick={handleSubmitClick}
               onCancelForm={handleCancelClick}
             />

client/src/containers/Purchases/PaymentMades/PaymentMadeFloatingActions.js

@@ -1,9 +1,19 @@
 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 { saveInvoke } from 'utils';
+import { Icon } from 'components';
 
 /**
  * Payment made floating actions bar.
@@ -13,56 +23,85 @@ export default function PaymentMadeFloatingActions({
   onSubmitClick,
   onCancelClick,
   onClearBtnClick,
+  onSubmitForm,
+  paymentMadeId,
 }) {
+  const handleSubmitBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+    });
+  };
+
   const handleClearBtnClick = (event) => {
     onClearBtnClick && onClearBtnClick(event);
   };
 
-  const handleSubmitClick = (event) => {
-    onSubmitClick && onSubmitClick(event, { redirect: true });
-  };
-
-  const handleCancelClick = (event) => {
+  const handleCancelBtnClick = (event) => {
     onCancelClick && onCancelClick(event);
+    saveInvoke(onCancelClick, event);
   };
 
+  const handleSubmitAndNewClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+    });
+  };
+
+  const handleSubmitContinueEditingBtnClick = (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={handleSubmitClick}
-      >
-        <T id={'save_send'} />
-      </Button>
-
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        className={'ml1'}
-        name={'save'}
-        type="submit"
-        onClick={handleSubmitClick}
-      >
-        <T id={'save'} />
-      </Button>
-
+      {/* ----------- Save and New ----------- */}
+      <ButtonGroup>
+        <Button
+          disabled={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          text={paymentMadeId ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+              <MenuItem
+                text={<T id={'save_continue_editing'} />}
+                onClick={handleSubmitContinueEditingBtnClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+      </ButtonGroup>
+      {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
         disabled={isSubmitting}
         onClick={handleClearBtnClick}
-      >
-        <T id={'clear'} />
-      </Button>
-
+        text={paymentMadeId ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel  ----------- */}
       <Button
         className={'ml1'}
-        type="submit"
-        onClick={handleCancelClick}
-      >
-        <T id={'close'} />
-      </Button>
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
     </div>
   );
 }

client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js

@@ -81,6 +81,7 @@ function PaymentMadeForm({
   const [clearLinesAlert, setClearLinesAlert] = useState(false);
   const [clearFormAlert, setClearFormAlert] = useState(false);
   const [fullAmount, setFullAmount] = useState(null);
+  const [submitPayload, setSubmitPayload] = useState({});
 
   const [localPaymentEntries, setLocalPaymentEntries] = useState(
     paymentMadeEntries,
@@ -96,7 +97,7 @@ function PaymentMadeForm({
   const validationSchema = isNewMode
     ? CreatePaymentMadeFormSchema
     : EditPaymentMadeFormSchema;
-    
+
   // Form initial values.
   const initialValues = useMemo(
     () => ({
@@ -155,8 +156,13 @@ function PaymentMadeForm({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
-      resetForm();
+      // resetForm();
       changePageSubtitle('');
+
+      if (submitPayload.redirect) {
+        history.push('/payment-mades');
+      }
+
     };
 
     const onError = (errors) => {
@@ -187,6 +193,7 @@ function PaymentMadeForm({
     values,
     handleSubmit,
     isSubmitting,
+    submitForm,
   } = useFormik({
     validationSchema,
     initialValues,
@@ -300,6 +307,14 @@ function PaymentMadeForm({
     [values.entries],
   );
 
+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );
+
+
   return (
     <div
       className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_PAYMENT_MADE)}
@@ -372,8 +387,11 @@ function PaymentMadeForm({
 
         <PaymentMadeFloatingActions
           isSubmitting={isSubmitting}
+          paymentMadeId={paymentMadeId}
+          onSubmitClick={handleSubmitClick}
           onCancelClick={handleCancelClick}
           onClearBtnClick={handleClearBtnClick}
+          onSubmitForm={submitForm}
         />
 
         {/* <Dragzone