Funky Monke

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

@@ -1,10 +1,45 @@
-const InvoiceItem = (invoice) => {
+const InvoiceItem = ({ invoice }) => {
+
+    const productTotal = (p) => {
+        return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price)).toFixed(2)
+    }
+
+    const totals = () => {
+        var price = 0;
+        var tax = 0;
+
+        invoice.products.map((p)=>{
+            price += productTotal(p)
+        })
+    }
+
 
     return (
-        <>
-            <div>
+
+        <div className="invoice-item-container">
+            <div className="invoice-item-info">
+                <div>
+                    #{invoice.id}
+                </div>
+                <div className="invoice-item-expedition">
+                    <b>Adresse d'expédition:</b><br />
+                    {invoice.firstName} {invoice.lastName}<br />
+                    {invoice.shippingAddress.civicNumber} {invoice.shippingAddress.street}<br />
+                    {invoice.shippingAddress.city}, {invoice.shippingAddress.province} {invoice.shippingAddress.postalCode}<br />
+                    {invoice.shippingAddress.country}<br />
+                </div>
             </div>
-        </>
+            <div className="invoice-item-products">
+                <ul className="invoice-item-product-list">
+                    {invoice.products.map((p) => (
+                        <li>{p.quantity} x {p.product.title} -{'>'} {productTotal(p)}</li>
+                    ))}
+                </ul>
+                <div>
+                    {totals()}
+                </div>
+            </div>
+        </div>
     );
 
 }