feat(deleteManuscriptModal): Create deleteManuscriptModal component for...

feat(deleteManuscriptModal): Create deleteManuscriptModal component for archiving manuscripts by adm

packages/component-faraday-ui/src/ManuscriptCard.js

 import React, { Fragment } from 'react'
 import { get } from 'lodash'
-import { reduxForm } from 'redux-form'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { withJournal } from 'xpub-journal'
-import { H3, H4, DateParser, ValidatedField, TextArea } from '@pubsweet/ui'
+import { H3, H4, DateParser } from '@pubsweet/ui'
 import { compose, withHandlers, setDisplayName, withProps } from 'recompose'
-import { ItemOverrideAlert } from 'pubsweet-component-faraday-ui'
+
 import {
   Tag,
   Text,
@@ -18,20 +17,20 @@ import {
   TextTooltip,
   AuthorTagList,
   ReviewerBreakdown,
+  DeleteManuscriptModal,
 } from './'
 
 import { OpenModal } from './modals'
 
 const ManuscriptCard = ({
-  isAdmin,
   isDraft,
   onDelete,
-  isDeleted,
   isFetching,
-  deleteManuscript,
   onCardClick,
-  canViewReports,
   fragment = {},
+  canViewReports,
+  deleteManuscript,
+  canDeleteManuscript,
   manuscriptType = {},
   collection: { visibleStatus = 'Draft', handlingEditor, customId, id: collId },
 }) => {
@@ -110,16 +109,16 @@ const ManuscriptCard = ({
               </OpenModal>
             </Item>
           )}
-          {isAdmin &&
-            !isDraft &&
-            !isDeleted && (
-              <Item justify="flex-end" onClick={e => e.stopPropagation()}>
-                <FormModal
-                  collectionId={collId}
-                  deleteManuscript={deleteManuscript}
-                />
-              </Item>
-            )}
+
+          {canDeleteManuscript && (
+            <Item justify="flex-end" onClick={e => e.stopPropagation()}>
+              <DeleteManuscriptModal
+                collectionId={collId}
+                modalKey={`archive-${collId}`}
+                onSubmit={deleteManuscript}
+              />
+            </Item>
+          )}
         </Row>
       </MainContainer>
       <SideNavigation>
@@ -128,40 +127,6 @@ const ManuscriptCard = ({
     </Root>
   )
 }
-const Enhanced = () => (
-  <Row>
-    <ItemOverrideAlert data-test-id="manuscript-return-reason" vertical>
-      <Label required>
-        Reason for removing the manuscript from the platform:
-      </Label>
-      <ValidatedField component={TextArea} name="comments" />
-    </ItemOverrideAlert>
-  </Row>
-)
-
-const FormModal = reduxForm({
-  form: 'deleteManuscript',
-  onSubmit: (
-    { comments },
-    dispatch,
-    { deleteManuscript, collectionId },
-  ) => modalProps => deleteManuscript({ collectionId, comments, modalProps }),
-})(({ collectionId, isFetching, handleSubmit }) => (
-  <OpenModal
-    confirmText="Delete"
-    content={Enhanced}
-    isFetching={isFetching}
-    modalKey={`delete-${collectionId}`}
-    onConfirm={modalProps => handleSubmit()(modalProps)}
-    title="Are you sure you want to remove this manuscript?"
-  >
-    {showModal => (
-      <ActionLink height={16} icon="trash" onClick={showModal} size="small">
-        Delete
-      </ActionLink>
-    )}
-  </OpenModal>
-))
 
 export default compose(
   withJournal,
@@ -183,6 +148,9 @@ export default compose(
       isDeleted: status === 'deleted',
     }),
   ),
+  withProps(({ isAdmin, isDraft, isDeleted }) => ({
+    canDeleteManuscript: isAdmin && !isDraft && !isDeleted,
+  })),
   setDisplayName('ManuscriptCard'),
 )(ManuscriptCard)
 

packages/component-faraday-ui/src/manuscriptDetails/DeleteManuscriptModal.js

+import React, { Fragment } from 'react'
+import styled from 'styled-components'
+import { compose } from 'recompose'
+import { reduxForm } from 'redux-form'
+import { th } from '@pubsweet/ui-toolkit'
+import { required } from 'xpub-validators'
+import { H2, Button, ValidatedField, TextArea, Spinner } from '@pubsweet/ui'
+import {
+  Row,
+  Text,
+  Label,
+  IconButton,
+  OpenModal,
+  ActionLink,
+  ItemOverrideAlert,
+  withFetching,
+} from 'pubsweet-component-faraday-ui'
+
+const Form = compose(
+  withFetching,
+  reduxForm({
+    form: 'deleteManuscript',
+  }),
+)(({ fetchingError, hideModal, handleSubmit, isFetching }) => (
+  <Root>
+    <IconButton icon="x" onClick={hideModal} right={5} secondary top={5} />
+    <H2>Are you sure you want to remove this manuscript?</H2>
+
+    <Row mt={1}>
+      <ItemOverrideAlert data-test-id="manuscript-return-reason" vertical>
+        <Label required>
+          Reason for removing the manuscript from the platform:
+        </Label>
+        <ValidatedField
+          component={TextArea}
+          name="comments"
+          validate={[required]}
+        />
+      </ItemOverrideAlert>
+    </Row>
+    {fetchingError && (
+      <Text align="center" error mt={1}>
+        {fetchingError}
+      </Text>
+    )}
+    <Row mt={1}>
+      {isFetching ? (
+        <Spinner size={3} />
+      ) : (
+        <Fragment>
+          <Button data-test-id="modal-cancel" onClick={hideModal}>
+            NO
+          </Button>
+          <Button data-test-id="modal-confirm" onClick={handleSubmit} primary>
+            YES
+          </Button>
+        </Fragment>
+      )}
+    </Row>
+  </Root>
+))
+
+const DeleteManuscriptModal = props => (
+  <OpenModal component={Form} {...props}>
+    {showModal => (
+      <ActionLink height={16} icon="trash" onClick={showModal} size="small">
+        Delete
+      </ActionLink>
+    )}
+  </OpenModal>
+)
+
+export default DeleteManuscriptModal
+
+DeleteManuscriptModal.defaultProps = {
+  onSubmit: () => {},
+  collectionId: 'santa-claus',
+  modalKey: 'deleteManuscriptModal',
+}
+
+// #region styles
+const Root = styled.div`
+  align-items: center;
+  background: ${th('colorBackgroundHue')};
+  border: ${th('borderWidth')} ${th('borderStyle')} transparent;
+  border-radius: ${th('borderRadius')};
+  box-shadow: ${th('boxShadow')};
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: calc(${th('gridUnit')} * 3);
+  width: calc(${th('gridUnit')} * 60);
+
+  ${H2} {
+    margin: 0;
+    text-align: center;
+  }
+`
+// #endregion

packages/component-faraday-ui/src/manuscriptDetails/index.js

+export { default as DeleteManuscriptModal } from './DeleteManuscriptModal'
 export { default as ManuscriptDetailsTop } from './ManuscriptDetailsTop'
 export { default as ManuscriptVersion } from './ManuscriptVersion'
 export { default as ManuscriptHeader } from './ManuscriptHeader'

packages/component-faraday-ui/src/modals/MultiAction.js

@@ -51,12 +51,12 @@ const MultiAction = ({
 export default compose(
   withHandlers({
     onConfirm: ({ onConfirm, ...props }) => () => {
-      if (onConfirm && typeof onConfirm === 'function') {
+      if (typeof onConfirm === 'function') {
         onConfirm(props)
       }
     },
     onClose: ({ onCancel, ...props }) => () => {
-      if (onCancel && typeof onCancel === 'function') {
+      if (typeof onCancel === 'function') {
         onCancel(props)
       }
       props.hideModal()

packages/component-faraday-ui/src/modals/OpenModal.js

 import { compose, withHandlers, withProps } from 'recompose'
 import { withModal } from 'pubsweet-component-modal/src/components'
 
-import { MultiAction, SingleActionModal, FormModal } from './'
+import { MultiAction, SingleActionModal } from './'
 
 const OpenModal = ({ showModal, children }) => children(showModal)
 
 const selectModalComponent = props => {
-  if (props.single) {
+  if (props.component) {
     return {
-      modalComponent: SingleActionModal,
+      modalComponent: props.component,
     }
   }
-  if (props.formModal)
+  if (props.single) {
     return {
-      modalComponent: FormModal,
+      modalComponent: SingleActionModal,
     }
+  }
   return {
     modalComponent: MultiAction,
   }

packages/components-faraday/src/components/Dashboard/Dashboard.js

@@ -19,6 +19,7 @@ const Dashboard = ({
       getDefaultFilterValue={getDefaultFilterValue}
       getFilterOptions={getFilterOptions}
     />
+
     <DashboardItems
       deleteCollection={deleteCollection}
       deleteManuscript={deleteManuscript}

packages/components-faraday/src/components/Dashboard/DashboardPage.js

@@ -16,8 +16,8 @@ import {
 import { Dashboard } from './'
 import { priorityFilter, orderFilter, withFiltersHOC } from '../Filters'
 
-const deleteManuscript = ({ collectionId, ...body }) =>
-  update(`/collections/${collectionId}/archive`, body)
+const deleteManuscript = ({ collectionId, comments }) =>
+  update(`/collections/${collectionId}/archive`, { comments })
 
 export default compose(
   ConnectPage(() => [
@@ -86,20 +86,21 @@ export default compose(
           handleError(setModalError)(err)
         })
     },
-    deleteManuscript: ({ setFetching, getCollections }) => ({
-      modalProps: { setModalError, hideModal },
-      ...decision
-    }) => {
+    deleteManuscript: ({ getCollections }) => (
+      { comments },
+      dispatch,
+      { setFetching, setError, hideModal, collectionId },
+    ) => {
       setFetching(true)
-      return deleteManuscript(decision)
+      deleteManuscript({ collectionId, comments })
         .then(() => {
           setFetching(false)
           hideModal()
           getCollections()
         })
-        .catch(err => {
+        .catch(e => {
           setFetching(false)
-          handleError(setModalError)(err)
+          handleError(setError)(e)
         })
     },
   }),

packages/components-faraday/src/components/SignUp/SignUpStep0.js

@@ -116,7 +116,6 @@ const Step0 = ({ type, error, journal, handleSubmit, initialValues }) =>
       >
         PROCEED TO SET {type === 'signup' && 'EMAIL AND'} PASSWORD
       </Button>
-
       <Row mt={3}>
         <Text display="flex">
           Already have an account?