Faut fixer les appels d'api

GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js

@@ -1,4 +1,7 @@
-const InvoiceItem = ({ invoice }) => {
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const InvoiceItem = ({ invoice, onCancel }) => {
 
     const productTotal = (p) => {
         return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price))
@@ -79,7 +82,6 @@ const InvoiceItem = ({ invoice }) => {
         }
     }
 
-
     return (
 
         <div className="invoice-item-container">
@@ -101,7 +103,11 @@ const InvoiceItem = ({ invoice }) => {
                 </div>
             </div>
             <div className="invoice-item-products">
-                <h4>Produits</h4>
+                <div className="invoice-product-delete">
+                    <h4 className='simple-item-title' >Produits</h4>
+                    <h1 className='simple-item-buttons'><FontAwesomeIcon icon={faTimes} className='btn-effacer-morceau' style={{ color: "red", cursor: 'pointer', margin: 'auto'}}
+                        onClick={() => onCancel(invoice.id)} /></h1>
+                </div>
                 <ul className="invoice-item-product-list">
                     {invoice.products.map((p) => (
                         <li key={p.id}>{p.quantity} x {p.product.title} <br /> <b>{productTotal(p).toFixed(2)} $ CA</b></li>

GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceList.js

@@ -1,12 +1,13 @@
 import InvoiceItem from "./InvoiceItem";
 
-const InvoiceList = ({ invoices }) => {
+const InvoiceList = ({ invoices, onCancel }) => {
     return (
         <div className="invoice-list-container">
             {invoices.map((invoice) => (
                 <InvoiceItem
                     key={invoice.id}
                     invoice={invoice}
+                    onCancel={onCancel}
                 />
             ))}
         </div>