Add confirmation to purchase

src/purchase/Purchase.js

-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { Redirect } from "react-router-dom";
-import { Row, Col, Button, Alert } from "react-bootstrap";
+import { Row, Col, Button, Alert, Modal } from "react-bootstrap";
+import ShowPurchase from "./ShowPurchase";
 import ProductPicker from "../product/ProductPicker";
 import MemberPicker from "../member/MemberPicker";
 import Sender from "../Sender";
@@ -12,6 +13,15 @@ function Purchase(props) {
   const [total, setTotal] = useState(0);
   const [transaction, setTransaction] = useState(null);
   const [noMoney, setNoMoney] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const sender = useRef(null);
+
+  const handleClose = () => setShowConfirmation(false);
+
+  const submit = () => {
+    handleClose();
+    sender.current.submit();
+  };
 
   if (transaction !== null) {
     return <Redirect to={"/transaction/" + transaction.ID} />;
@@ -47,8 +57,23 @@ function Purchase(props) {
 
   const disabled = (props.member && !member) || total === 0;
 
+  const displayedPurchase = purchase.map((p) => {
+    return {
+      code: p.code,
+      product: p,
+      amount: p.amount,
+      price: p.price,
+    };
+  });
+
   return (
-    <Sender url={url} body={body} onSuccess={setTransaction} onError={onError}>
+    <Sender
+      ref={sender}
+      url={url}
+      body={body}
+      onSuccess={setTransaction}
+      onError={onError}
+    >
       {noMoney && (
         <Alert variant="warning">
           No tienes suficiente dinero para realizar esta compra.
@@ -65,12 +90,34 @@ function Purchase(props) {
         </Col>
         <Col>
           <div className="text-right">
-            <Button variant="primary" type="submit" disabled={disabled}>
+            <Button
+              variant="primary"
+              disabled={disabled}
+              onClick={() => setShowConfirmation(true)}
+            >
               Finalizar compra
             </Button>
           </div>
         </Col>
       </Row>
+
+      <Modal show={showConfirmation} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Confirmar la compra</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <ShowPurchase purchase={displayedPurchase} />
+          <h3>Total: {printMoney(total)}€</h3>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Cancelar
+          </Button>
+          <Button variant="primary" disabled={disabled} onClick={submit}>
+            Comprar
+          </Button>
+        </Modal.Footer>
+      </Modal>
     </Sender>
   );
 }