From a8f4a62bbe03cec8a740a9971714b13394599ddf Mon Sep 17 00:00:00 2001
From: damienSchPassCulture <damien.schaller@passculture.app>
Date: Thu, 4 Nov 2021 18:01:08 +0100
Subject: [PATCH] (PC-11571): Desk: add confirmation dialog

---
 src/components/pages/Desk/Desk.jsx            | 22 ++++++++-
 .../DeskConfirmDialog/DeskConfirmDialog.jsx   | 47 +++++++++++++++++++
 .../pages/Desk/__specs__/Desk.spec.jsx        |  7 ++-
 src/icons/ico-alert-grey.svg                  |  1 +
 4 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 src/components/pages/Desk/DeskConfirmDialog/DeskConfirmDialog.jsx
 create mode 100644 src/icons/ico-alert-grey.svg

diff --git a/src/components/pages/Desk/Desk.jsx b/src/components/pages/Desk/Desk.jsx
index a3608425a..dfbbf6887 100644
--- a/src/components/pages/Desk/Desk.jsx
+++ b/src/components/pages/Desk/Desk.jsx
@@ -13,6 +13,8 @@ import PageTitle from 'components/layout/PageTitle/PageTitle'
 import Titles from 'components/layout/Titles/Titles'
 import { formatLocalTimeDateString } from 'utils/timezone'
 
+import DeskConfirmDialog from "./DeskConfirmDialog/DeskConfirmDialog"
+
 class Desk extends Component {
   constructor(props) {
     super(props)
@@ -24,6 +26,7 @@ class Desk extends Component {
       level: '',
       message: 'Saisissez une contremarque',
       token: '',
+      openDialog: false,
     }
 
     this.TOKEN_MAX_LENGTH = 6
@@ -200,7 +203,17 @@ class Desk extends Component {
           message: this.getErrorMessageFromApi(error),
         })
       })
+    this.setState({ openDialog: false })
+  }
+
+  openDeskConfirmDialog = (event) => {
+    event.preventDefault()
+    this.setState({ openDialog: true })
   }
+  closeDeskConfirmDialog = () => {
+    this.setState({ openDialog: false })
+  }
+
 
   render() {
     const { booking, isDisabledButton, isUsedToken, level, message, token } = this.state
@@ -278,12 +291,17 @@ class Desk extends Component {
             {isUsedToken && (
               <button
                 className="secondary-button"
-                onClick={this.invalidationOfToken(token)}
-                type="submit"
+                onClick={this.openDeskConfirmDialog}
               >
                 Invalider la contremarque
               </button>
             )}
+            {this.state.openDialog && (
+              <DeskConfirmDialog
+                onCancel={this.closeDeskConfirmDialog}
+                onConfirm={this.invalidationOfToken(token)}
+              />
+            )}
             {!isUsedToken && (
               <button
                 className="primary-button"
diff --git a/src/components/pages/Desk/DeskConfirmDialog/DeskConfirmDialog.jsx b/src/components/pages/Desk/DeskConfirmDialog/DeskConfirmDialog.jsx
new file mode 100644
index 000000000..c21b9dd0c
--- /dev/null
+++ b/src/components/pages/Desk/DeskConfirmDialog/DeskConfirmDialog.jsx
@@ -0,0 +1,47 @@
+import PropTypes from "prop-types"
+import React from 'react'
+
+import { ReactComponent as AlertSvg } from "../../../../icons/ico-alert-grey.svg"
+import { DialogBox } from "../../../layout/DialogBox/DialogBox"
+
+let DeskConfirmDialog = ({ onConfirm, onCancel }) => {
+  return (
+    <DialogBox extraClassNames="provider-import-confirmation-dialog">
+      <AlertSvg />
+      <div className="title">
+        <strong>
+          Voulez-vous vraiment invalider cette contremarque ?
+        </strong>
+      </div>
+      <div className="explanation">
+        <p>
+          Cette contremarque a déjà été validée. Si vous l’invalidez, la réservation ne
+          vous sera pas remboursée.
+        </p>
+      </div>
+      <div className="actions">
+        <button
+          className="secondary-button"
+          onClick={onCancel}
+          type="submit"
+        >
+          Annulé
+        </button>
+        <button
+          className="primary-button confirm"
+          onClick={onConfirm}
+          type="button"
+        >
+          Continuer
+        </button>
+      </div>
+    </DialogBox>
+  )
+}
+
+DeskConfirmDialog.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+}
+
+export default DeskConfirmDialog
diff --git a/src/components/pages/Desk/__specs__/Desk.spec.jsx b/src/components/pages/Desk/__specs__/Desk.spec.jsx
index fc81dfe37..54d566fb4 100644
--- a/src/components/pages/Desk/__specs__/Desk.spec.jsx
+++ b/src/components/pages/Desk/__specs__/Desk.spec.jsx
@@ -300,6 +300,9 @@ describe('src | components | Desk', () => {
       expect(invalidateTokenButton).toBeEnabled()
       fireEvent.click(invalidateTokenButton)
 
+      const confirmInvalidateTokenButton = await screen.findByRole('button', { name: 'Continuer' })
+      fireEvent.click(confirmInvalidateTokenButton)
+
       // then
       expect(screen.getByText('Invalidation en cours...')).toBeInTheDocument()
       const responseFromApi = await screen.findByText('Contremarque invalidée !')
@@ -340,7 +343,6 @@ describe('src | components | Desk', () => {
       fireEvent.change(tokenInput, { target: { value: 'MEFA01' } })
       // then
       expect(await screen.findByText('token is already validated')).toBeInTheDocument()
-
       // when
       jest.spyOn(props, 'invalidateBooking').mockRejectedValue({
         errors: { booking: 'cannot invalidate booking' },
@@ -348,6 +350,9 @@ describe('src | components | Desk', () => {
       })
       const submitButton = await screen.findByRole('button', { name: 'Invalider la contremarque' })
       fireEvent.click(submitButton)
+
+      const confirmInvalidateTokenButton = await screen.findByRole('button', { name: 'Continuer' })
+      fireEvent.click(confirmInvalidateTokenButton)
       // then
       const responseFromApi = await screen.findByText('cannot invalidate booking')
       expect(responseFromApi).toBeInTheDocument()
diff --git a/src/icons/ico-alert-grey.svg b/src/icons/ico-alert-grey.svg
new file mode 100644
index 000000000..f7be017cd
--- /dev/null
+++ b/src/icons/ico-alert-grey.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 124 124" aria-hidden="true"><path d="M62 23.25c21.402 0 38.75 17.347 38.75 38.75a38.594 38.594 0 0 1-8.005 23.589 1.97 1.97 0 1 1-3.125-2.401A34.65 34.65 0 0 0 96.81 62c0-19.226-15.584-34.81-34.81-34.81-19.227 0-34.81 15.583-34.81 34.81 0 19.224 15.585 34.81 34.81 34.81 4.716 0 9.3-.94 13.547-2.737a1.971 1.971 0 0 1 1.536 3.629A38.62 38.62 0 0 1 62 100.75c-21.402 0-38.75-17.35-38.75-38.75 0-21.404 17.346-38.75 38.75-38.75zm-.001 19.523c.997 0 1.822.74 1.952 1.703l.018.267v23.384a1.97 1.97 0 0 1-3.922.267l-.018-.267V44.743a1.97 1.97 0 0 1 1.97-1.97zm2.627 36.14a2.625 2.625 0 0 0-2.627-2.627 2.627 2.627 0 1 0 2.627 2.627" fill="#626262"/></svg>
\ No newline at end of file