Merge pull request #1372 from cozy/feat/confirmExit-labels

Feat/confirm exit labels
cozy · Jan 29, 2020 · 196401b · 196401b
2 parents 6fd975e + b04a14a
commit 196401b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/react/hooks/useConfirmExit/index.js b/react/hooks/useConfirmExit/index.js
@@ -16,27 +16,38 @@ import fr from './locales/fr.json'
  * @param {function} onConfirm - will be executed on confirmation
  * @param {function} onCancel - will be executed on cancelation
  */
-function ConfirmModal({ t, title, message, onConfirm, onCancel }) {
+function ConfirmModal({
+  t,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  cancelLabel,
+  confirmLabel
+}) {
   return (
     <Modal
       closable={false}
       mobileFullscreen={false}
       primaryAction={onConfirm}
-      primaryType="regular"
-      primaryText={t('useConfirmExit.leave')}
+      primaryType="danger"
+      primaryText={confirmLabel || t('useConfirmExit.leave')}
+      dismissAction={onCancel}
       secondaryAction={onCancel}
       secondaryType="secondary"
-      secondaryText={t('useConfirmExit.back')}
+      secondaryText={cancelLabel || t('useConfirmExit.back')}
       description={message || t('useConfirmExit.message')}
       title={title || t('useConfirmExit.title')}
     />
   )
 }
-ConfirmModal.PropTypes = {
+ConfirmModal.propTypes = {
   message: PropTypes.string,
   title: PropTypes.string,
   onConfirm: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired
+  onCancel: PropTypes.func.isRequired,
+  cancelLabel: PropTypes.string,
+  confirmLabel: PropTypes.string
 }
 const dictRequire = { en, fr }
 const LocalizedConfirmModal = withLocales(dictRequire)(ConfirmModal)
@@ -91,7 +102,9 @@ export default function useConfirmExit({
   activate = true,
   onLeave,
   message,
-  title
+  title,
+  leaveLabel,
+  cancelLabel
 }) {
   // `onbeforeunload` event on the browser:
   // Using a ref in order to have an event listener that does not
@@ -142,6 +155,8 @@ export default function useConfirmExit({
       title={title}
       onCancel={onCloseModalRequest}
       onConfirm={onConfirm}
+      confirmLabel={leaveLabel}
+      cancelLabel={cancelLabel}
     />
   )
   return {

diff --git a/react/hooks/useConfirmExit/locales/en.json b/react/hooks/useConfirmExit/locales/en.json
@@ -1,8 +1,8 @@
 {
   "useConfirmExit": {
-    "back": "Back",
-    "leave": "Leave",
-    "title": "Do you want to leave?",
-    "message": "Some changes are not saved yet. Do you really want to leave and lose these changes?"
+    "back": "Cancel",
+    "leave": "Leave without saving",
+    "title": "Abandon your changes?",
+    "message": "Some changes may not be saved yet. Do you really want to leave and lose these changes?"
   }
 }
diff --git a/react/hooks/useConfirmExit/locales/fr.json b/react/hooks/useConfirmExit/locales/fr.json
@@ -2,7 +2,7 @@
   "useConfirmExit": {
     "back": "Retour",
     "leave": "Quitter",
-    "title": "Voulez-vous quitter ?",
-    "message": "Des modifications n'ont pas encore pu être enregistrées. Voulez-vous vraiment quitter et perdre ces modifications ?"
+    "title": "Abandonner les modifications ?",
+    "message": "Des modifications n'ont pas encore pu être enregistrées. Voulez-vous vraiment quitter et perdre ces modifications ?"
   }
 }