feat(dashboard): show confirmation modal on delete

packages/component-modal/src/components/ConfirmationModal.js

+import React from 'react'
+import { Icon, Button } from '@pubsweet/ui'
+import styled, { css, withTheme } from 'styled-components'
+
+const ConfirmationModal = ({
+  title,
+  subtitle,
+  content,
+  onConfirm,
+  confirmText = 'OK',
+  cancelText = 'Cancel',
+  hideModal,
+  theme,
+}) => (
+  <Root>
+    <CloseIcon onClick={hideModal}>
+      <Icon color={theme.colorPrimary}>x</Icon>
+    </CloseIcon>
+    {title && <Title dangerouslySetInnerHTML={{ __html: title }} />}
+    {subtitle && <Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} />}
+    {content && <Content dangerouslySetInnerHTML={{ __html: content }} />}
+    <ButtonsContainer>
+      <Button onClick={hideModal}>{cancelText}</Button>
+      <Button onClick={onConfirm} primary>
+        {confirmText}
+      </Button>
+    </ButtonsContainer>
+  </Root>
+)
+
+export default withTheme(ConfirmationModal)
+
+// #region styled-components
+const defaultText = css`
+  color: ${({ theme }) => theme.colorText};
+  font-family: ${({ theme }) => theme.fontReading};
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+`
+
+const Root = styled.div`
+  background-color: ${({ theme }) => theme.backgroundColor};
+  padding: 50px 32px 32px 32px;
+  border: ${({ theme }) => theme.borderDefault};
+  position: relative;
+  width: 600px;
+  max-height: 500px;
+  overflow-y: scroll;
+`
+
+const Title = styled.div`
+  ${defaultText};
+  font-size: ${({ theme }) => theme.fontSizeBase};
+  text-align: center;
+  margin-bottom: 20px;
+`
+
+const Subtitle = styled.div`
+  ${defaultText};
+  font-weight: bold;
+  line-height: 1.57;
+  margin-bottom: 15px;
+  text-align: center;
+`
+
+const Content = styled.div`
+  ${defaultText};
+  line-height: 1.57;
+  margin-top: 10px;
+  text-align: left;
+`
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  margin: 30px auto 0;
+`
+const CloseIcon = styled.div`
+  cursor: pointer;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+`
+// #endregion

packages/component-modal/src/components/index.js

 export { default as withModal } from './withModal'
+export { default as ConfirmationModal } from './ConfirmationModal'

packages/component-modal/src/components/withModal.js

@@ -30,7 +30,7 @@ const withModal = ({
             overlayColor={overlayColor}
           />
         )}
-        <WrappedComponent {...rest} />
+        <WrappedComponent hideModal={hideModal} {...rest} />
       </div>
     ),
   )

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

@@ -3,7 +3,11 @@ import { get } from 'lodash'
 import PropTypes from 'prop-types'
 import { Button, Icon } from '@pubsweet/ui'
 import styled, { css } from 'styled-components'
-import { compose, getContext } from 'recompose'
+import { compose, getContext, withHandlers } from 'recompose'
+import {
+  withModal,
+  ConfirmationModal,
+} from 'pubsweet-component-modal/src/components'
 
 import { parseVersion, parseJournalIssue } from './utils'
 
@@ -16,6 +20,7 @@ const DashboardCard = ({
   version,
   showAbstractModal,
   journal,
+  cancelSubmission,
   ...rest
 }) => {
   const { submitted, title, type } = parseVersion(version)
@@ -77,9 +82,7 @@ const DashboardCard = ({
                 <Icon color="#667080">chevron-right</Icon>
               </Details>
             ) : (
-              <Details onClick={() => deleteProject(project)}>
-                Cancel submission
-              </Details>
+              <Details onClick={cancelSubmission}>Cancel submission</Details>
             )}
           </RightDetails>
         </Bottom>
@@ -120,7 +123,31 @@ const DashboardCard = ({
   ) : null
 }
 
-export default compose(getContext({ journal: PropTypes.object }))(DashboardCard)
+export default compose(
+  getContext({ journal: PropTypes.object }),
+  withModal({
+    modalComponent: ConfirmationModal,
+  }),
+  withHandlers({
+    cancelSubmission: ({
+      showModal,
+      deleteProject,
+      project,
+      hideModal,
+    }) => () => {
+      const modalConfig = {
+        onConfirm: () => {
+          deleteProject(project)
+          hideModal()
+        },
+        dismissable: false,
+        title: 'Are you sure you want to delete the manuscript?',
+        subtitle: 'This operation cannot be undone!',
+      }
+      showModal(modalConfig)
+    },
+  }),
+)(DashboardCard)
 
 // #region styled-components
 const defaultText = css`