126 lines
4.0 KiB
JavaScript
126 lines
4.0 KiB
JavaScript
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))
|
|
}
|
|
|
|
const getPriceHTML = () => {
|
|
|
|
const tpsRate = 5;
|
|
const tvqRate = 9.975;
|
|
|
|
var price = 0;
|
|
var tps = 0;
|
|
var tvq = 0;
|
|
|
|
invoice.products.map((p) => {
|
|
price += productTotal(p);
|
|
});
|
|
|
|
tps = price * (tpsRate / 100);
|
|
tvq = price * (tvqRate / 100);
|
|
|
|
return (
|
|
<div className="invoice-item-price">
|
|
Sous-total = {price.toFixed(2)} $ CA<br />
|
|
+ TPS ({tpsRate}%) = {tps.toFixed(2)} $ CA<br />
|
|
+ TVQ ({tvqRate}%) = {tvq.toFixed(2)} $ CA<br />
|
|
<b>Total = {(price + tps + tvq).toFixed(2)} $ CA</b>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const getStatus = (statusCode) => {
|
|
switch (statusCode) {
|
|
|
|
case 0:
|
|
return (
|
|
<>
|
|
Confirmé
|
|
</>
|
|
)
|
|
case 1:
|
|
return (
|
|
<>
|
|
Cancellé
|
|
</>
|
|
)
|
|
case 2:
|
|
return (
|
|
<>
|
|
En préparation
|
|
</>
|
|
)
|
|
case 3:
|
|
return (
|
|
<>
|
|
En expédition
|
|
</>
|
|
)
|
|
case 4:
|
|
return (
|
|
<>
|
|
Expédié
|
|
</>
|
|
)
|
|
case 5:
|
|
return (
|
|
<>
|
|
Retourné
|
|
</>
|
|
)
|
|
|
|
default:
|
|
return (
|
|
<>
|
|
Status Invalide
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
|
|
<div className="invoice-item-container">
|
|
<div className="invoice-item-info">
|
|
{invoice.status != null ?
|
|
<div>
|
|
#{invoice.id} ({getStatus(invoice.status)})
|
|
</div>
|
|
:
|
|
null
|
|
}
|
|
<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.appartment != null ? <>App: {invoice.shippingAddress.appartment} <br /></> : null}
|
|
{invoice.shippingAddress.city}, {invoice.shippingAddress.province} {invoice.shippingAddress.postalCode}<br />
|
|
{invoice.shippingAddress.country}<br />
|
|
</div>
|
|
</div>
|
|
<div className="invoice-item-products">
|
|
<div className="invoice-product-delete">
|
|
<h4 className='simple-item-title' >Produits</h4>
|
|
{(invoice.status == 0 || invoice.status == 2 )&&
|
|
<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>
|
|
))}
|
|
</ul>
|
|
<>
|
|
{getPriceHTML()}
|
|
</>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
}
|
|
|
|
export default InvoiceItem; |