Fix: FloatingActions.

client/src/containers/Expenses/ExpenseFloatingActions.js

@@ -14,7 +14,7 @@ import { FormattedMessage as T } from 'react-intl';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { saveInvoke } from 'utils';
-import { Icon } from 'components';
+import { Icon, If } from 'components';
 
 /**
  * Expense form floating actions.
@@ -25,11 +25,18 @@ export default function ExpenseFloatingFooter({
   onCancelClick,
   onDraftClick,
   onClearClick,
-  onSubmitAndNewClick,
   onSubmitForm,
   onResetForm,
   expense,
+  expensePublished,
 }) {
+  const handleSubmitPublishBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: true,
+    });
+  };
+
   const handleSubmitPublishAndNewBtnClick = (event) => {
     onSubmitForm();
     saveInvoke(onSubmitClick, event, {
@@ -47,6 +54,13 @@ export default function ExpenseFloatingFooter({
     });
   };
 
+  const handleSubmitDraftBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: false,
+    });
+  };
+
   const handleSubmitDraftAndNewBtnClick = (event) => {
     onSubmitForm();
     saveInvoke(onSubmitClick, event, {
@@ -60,106 +74,129 @@ export default function ExpenseFloatingFooter({
     onSubmitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: true,
+      publish: false,
     });
   };
 
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    onResetForm();
+  };
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <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}
-        >
+      {/* ----------- Save And Publish ----------- */}
+      <If condition={!expense}>
+        <ButtonGroup>
           <Button
+            disabled={isSubmitting}
             intent={Intent.PRIMARY}
-            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save_publish'} />}
           />
-        </Popover>
-
+          <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>
         {/* ----------- 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>
+        <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>
+      {/* ----------- Save and New ----------- */}
+      <If condition={expense && expensePublished}>
+        <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>
+      </If>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={expense ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
     </div>
   );
 }

client/src/containers/Expenses/ExpenseForm.js

@@ -304,7 +304,6 @@ function ExpenseForm({
     history.goBack();
   }, [history]);
 
-
   const handleDeleteFile = useCallback(
     (_deletedFiles) => {
       _deletedFiles.forEach((deletedFile) => {
@@ -332,7 +331,7 @@ function ExpenseForm({
       ]),
     );
   };
-
+  
   return (
     <div className={'expense-form'}>
       <form onSubmit={handleSubmit}>
@@ -374,7 +373,8 @@ function ExpenseForm({
           onCancelClick={handleCancelClick}
           onSubmitForm={submitForm}
           onResetForm={resetForm}
-          expense={expense}
+          expense={expenseId}
+          expensePublished={true}
         />
       </form>
     </div>