(PC-11571): Desk: add confirmation dialog

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"

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

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,14 +343,16 @@ 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' },
         status: 403,
       })
       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()