feat: Display a modal before detaching a doc (#604)

* feat: Display a modal before detaching a doc * fix: Fix some reviews
cozy · Jul 4, 2019 · c002d75 · c002d75
1 parent 4f11eba
commit c002d75
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 22 deletions.
diff --git a/packages/cozy-procedures/src/components/documents/DocumentHolder.jsx b/packages/cozy-procedures/src/components/documents/DocumentHolder.jsx
@@ -1,33 +1,73 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { translate, Chip, Icon } from 'cozy-ui/transpiled/react/'
+import {
+  translate,
+  Chip,
+  Icon,
+  Modal,
+  SubTitle,
+  Text
+} from 'cozy-ui/transpiled/react/'
 import { CozyFile } from 'cozy-doctypes'
 
 import DocumentsDataFormContainer from '../../containers/DocumentsDataForm'
 
-const DocumentHolder = ({ document, unlinkDocument, documentId }) => {
-  const splittedName = CozyFile.splitFilename(document)
-  return (
-    <Chip variant="dashed" className="u-w-100">
-      <Icon icon={`file-type-${document.class}`} size={24} className="u-mr-1" />
-      <span className="u-flex-grow-1 u-ellipsis">
-        {splittedName.filename}
-        <span className="u-coolGrey">{splittedName.extension}</span>
-      </span>
-      <Icon
-        icon="cross"
-        size={16}
-        className="u-pr-1 u-c-pointer"
-        onClick={() => unlinkDocument({ document, documentId })}
-      />
-    </Chip>
-  )
+class DocumentHolder extends Component {
+  state = {
+    isUnlinkConfirmationModalOpened: false
+  }
+
+  render() {
+    const { document, unlinkDocument, documentId, t } = this.props
+    const { isUnlinkConfirmationModalOpened } = this.state
+
+    const splittedName = CozyFile.splitFilename(document)
+    return (
+      <>
+        {isUnlinkConfirmationModalOpened && (
+          <Modal
+            primaryText={t('documents.unlink.unlink')}
+            primaryAction={() => unlinkDocument({ document, documentId })}
+            secondaryText={t('cancel')}
+            secondaryAction={() =>
+              this.setState({ isUnlinkConfirmationModalOpened: false })
+            }
+            title={t('documents.unlink.title')}
+            description={
+              <>
+                <SubTitle>{t('documents.unlink.subtitle')}</SubTitle>
+                <Text className="u-mt-1">{t('documents.unlink.text')}</Text>
+              </>
+            }
+          />
+        )}
+        <Chip variant="dashed" className="u-w-100">
+          <Icon
+            icon={`file-type-${document.class}`}
+            size={24}
+            className="u-mr-1"
+          />
+          <span className="u-flex-grow-1 u-ellipsis">
+            {splittedName.filename}
+            <span className="u-coolGrey">{splittedName.extension}</span>
+          </span>
+          <Icon
+            icon="cross"
+            size={16}
+            className="u-pr-1 u-c-pointer"
+            onClick={() => this.setState({ isModalOpened: true })}
+          />
+        </Chip>
+      </>
+    )
+  }
 }
 
 DocumentHolder.propTypes = {
   unlinkDocument: PropTypes.func.isRequired,
   documentId: PropTypes.string.isRequired,
   //io.cozy.files
-  document: PropTypes.object.isRequired
+  document: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired
 }
 export default translate()(DocumentsDataFormContainer(DocumentHolder))
diff --git a/packages/cozy-procedures/src/locales/en.json b/packages/cozy-procedures/src/locales/en.json
@@ -1,6 +1,7 @@
 {
   "confirm": "Confirm",
   "back": "Back",
+  "cancel": "Cancel",
   "overview": {
     "subtitle": "Please fill out the following information",
     "request": "Requested loan",
@@ -128,7 +129,12 @@
       "conflict_error": "A file with the same name is already uploaded. Please rename your file.",
       "error": "An error occured during upload"
     },
-
+    "unlink": {
+      "title": "Detach from your application?",
+      "subtitle": "You'll detach this file from your application.",
+      "text": "The file will not be deleted from your documents",
+      "unlink": "Detach"
+    },
     "completedStatus": {
       "main": "%{smart_count} document out of %{total} |||| %{smart_count} documents out of %{total}",
       "rest": "has been gathered by the application. |||| have been gathered by the application."

diff --git a/packages/cozy-procedures/src/locales/fr.json b/packages/cozy-procedures/src/locales/fr.json
@@ -1,6 +1,7 @@
 {
   "confirm": "Valider",
   "back": "Retour",
+  "cancel": "Annuler",
   "overview": {
     "subtitle": "Complétez les informations suivantes pour demander un crédit",
     "request": "Crédit demandé",
@@ -128,7 +129,12 @@
       "conflict_error": "Un fichier avec le même nom est déjà présent. Veuillez renommer votre fichier avant de recommencer.",
       "error": "Une erreur est survenue durant l'upload du fichier."
     },
-
+    "unlink": {
+      "title": "Détacher du dossier ?",
+      "subtitle": "Vous allez enlever ce document de votre dossier de crédit.",
+      "text": "Il ne sera pas supprimé de votre espace",
+      "unlink": "Détacher"
+    },
     "completedStatus": {
       "main": "%{smart_count} document sur %{total} |||| %{smart_count} documents sur %{total}",
       "rest": "a déjà été rassemblé par l'application. |||| ont déjà été rassemblés par l'application."