Add confirmation on order deletion

src/order/ShowOrder.js

@@ -10,6 +10,7 @@ import {
   ButtonGroup,
   Spinner,
   Alert,
+  Modal,
 } from "react-bootstrap";
 import PurchaseOrder from "./PurchaseOrder";
 import { printDate } from "../util";
@@ -100,6 +101,7 @@ class ShowOrder extends React.Component {
       redirect: false,
       refetch: 0,
       error: null,
+      showDelete: false,
     };
   }
 
@@ -183,7 +185,10 @@ class ShowOrder extends React.Component {
             <LinkContainer to={"/order/edit/" + id}>
               <Button variant="info">Modificar</Button>
             </LinkContainer>
-            <Button variant="danger" onClick={() => this.delorder()}>
+            <Button
+              variant="danger"
+              onClick={() => this.setState({ showDelete: true })}
+            >
               Cancelar
             </Button>
           </ButtonGroup>
@@ -193,6 +198,8 @@ class ShowOrder extends React.Component {
 
     const deadlineStr = printDate(this.state.order.deadline, true);
 
+    const handleClose = () => this.setState({ showDelete: false });
+
     return (
       <Fetcher
         url={"/api/order/" + id}
@@ -219,6 +226,24 @@ class ShowOrder extends React.Component {
 
         {this.showTransaction()}
         <ShowOrderResults order={this.state.order} />
+
+        <Modal show={this.state.showDelete} onHide={handleClose}>
+          <Modal.Header closeButton>
+            <Modal.Title>Confirmar la elminicacion</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <p>¿Borrar permanentemente el pedido {this.state.order.name}?</p>
+            <p>Si aceptas devolvera el dinero a quien haya pedido productos.</p>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={handleClose}>
+              Cancelar
+            </Button>
+            <Button variant="danger" onClick={() => this.delorder()}>
+              Eliminar
+            </Button>
+          </Modal.Footer>
+        </Modal>
       </Fetcher>
     );
   }