closes #17

app/components/activity/MetaEdit.jsx

 import React from 'react'
+import { Mutation } from 'react-apollo'
 import { omit } from 'lodash'
 import styled, { withTheme } from 'styled-components'
-import { Button, Icon, TextField } from '@pubsweet/ui'
+import { Action, Button, Icon, TextField } from '@pubsweet/ui'
 import { states } from 'config'
-import { Portal, Buttons, Close, CloseButton } from '../ui'
+import { Portal, Buttons, Close, CloseButton, Notification } from '../ui'
 import { ManuscriptMutations, NoteMutations } from '../SubmissionMutations'
 import ResolveDuplicates from '../ResolveDuplicates'
 import GrantSearch from '../GrantSearch'
 import CitationEdit, { Exit } from './CitationEdit'
+import { DELETE_MANUSCRIPT, QUERY_ACTIVITY_INFO } from './operations'
 
 const RouteButton = styled(Button)`
   align-items: center;
@@ -134,23 +136,60 @@ const MetaEdit = withTheme(
                         </React.Fragment>
                       )}
                     </p>
-                    <p>
-                      {curr >= done ? (
-                        <RouteButton>
-                          <Icon color="currentColor" size={2.5}>
-                            delete
-                          </Icon>
-                          Withdraw manuscript
-                        </RouteButton>
-                      ) : (
-                        <RouteButton>
-                          <Icon color="currentColor" size={2.5}>
-                            trash-2
-                          </Icon>
-                          Remove manuscript
-                        </RouteButton>
-                      )}
-                    </p>
+                    <Mutation
+                      mutation={DELETE_MANUSCRIPT}
+                      refetchQueries={() => [
+                        {
+                          query: QUERY_ACTIVITY_INFO,
+                          variables: { id: manuscript.id },
+                        },
+                      ]}
+                    >
+                      {(deleteManuscript, { data }) => {
+                        const deleteIt = async button => {
+                          await deleteManuscript({
+                            variables: {
+                              id: manuscript.id,
+                            },
+                          })
+                          button.parentElement.parentElement.nextElementSibling.classList.remove(
+                            'hidden',
+                          )
+                        }
+                        return (
+                          <React.Fragment>
+                            <p>
+                              <RouteButton
+                                disabled={curr >= done}
+                                onClick={e =>
+                                  e.currentTarget.nextElementSibling.classList.remove(
+                                    'hidden',
+                                  )
+                                }
+                              >
+                                <Icon color="currentColor" size={2.5}>
+                                  trash-2
+                                </Icon>
+                                Delete manuscript
+                              </RouteButton>
+                              <span className="hidden">
+                                {` Are you certain? `}
+                                <Action
+                                  onClick={e => deleteIt(e.currentTarget)}
+                                >
+                                  Confirm deletion
+                                </Action>
+                              </span>
+                              {curr >= done &&
+                                ' Manuscript has been sent to PMC and must be withdrawn.'}
+                            </p>
+                            <Notification className="hidden" type="info">
+                              {`Manuscript succesfully deleted. If not already sent, please send a message to the user(s) explaining the deletion.`}
+                            </Notification>
+                          </React.Fragment>
+                        )
+                      }}
+                    </Mutation>
                     <Exit close={close} />
                   </React.Fragment>
                 )

app/components/activity/operations.js

@@ -26,6 +26,12 @@ export const GET_JOURNAL = gql`
   }
 `
 
+export const DELETE_MANUSCRIPT = gql`
+  mutation DeleteManuscript($id: ID!) {
+    deleteManuscript(id: $id)
+  }
+`
+
 export const QUERY_ACTIVITY_INFO = gql`
   query QueryActivitiesByManuscriptId($id: ID!) {
     activities: epmc_queryActivitiesByManuscriptId(id: $id) {