BEINISISNIDSFINSDOvhpbfdslkvmh f,uidafmjkuzvrnhdahgdsxzk.gjSUrabéj
This commit is contained in:
Victor Turgeon
parent
5f4a488274
commit
fd8ade08f0
@ -0,0 +1,9 @@
|
||||
const ReviewProdItem = ({ pq, onAddOne, onRemoveOne, onRemoveProduct }) => {
|
||||
return (
|
||||
<div className="review-prod-item-container">
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReviewProdItem
|
||||
@ -0,0 +1,20 @@
|
||||
import ReviewProdItem from "./ReviewProdItem";
|
||||
|
||||
const ReviewProdList = ({ products, onAddOne, onRemoveOne, onRemoveProduct }) => {
|
||||
return (
|
||||
<div>
|
||||
{products.map((p) => (
|
||||
<ReviewProdItem
|
||||
key={p.product.id}
|
||||
pq={p}
|
||||
onAddOne={onAddOne}
|
||||
onRemoveOne={onRemoveOne}
|
||||
onRemoveProduct={onRemoveProduct}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ReviewProdList;
|
||||
@ -0,0 +1,40 @@
|
||||
const TotalProductsPrice = ({ products }) => {
|
||||
|
||||
const productTotal = (p) => {
|
||||
return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price))
|
||||
}
|
||||
|
||||
const getPriceHTML = (prods) => {
|
||||
|
||||
const tpsRate = 5;
|
||||
const tvqRate = 9.975;
|
||||
|
||||
var price = 0;
|
||||
var tps = 0;
|
||||
var tvq = 0;
|
||||
|
||||
prods.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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{getPriceHTML(products)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TotalProductsPrice;
|
||||
@ -1,5 +1,157 @@
|
||||
const ReviewInvoice = () =>{
|
||||
import { useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import Cookies from "universal-cookie";
|
||||
import ReviewProdList from "../components/ReviewProdList";
|
||||
import TotalProductsPrice from "../components/TotalProductsPrice";
|
||||
const ReviewInvoice = () => {
|
||||
|
||||
const cookies = new Cookies();
|
||||
|
||||
const [products, setProducts] = useState([]);
|
||||
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
const [phoneNumber, setPhoneNumber] = useState("");
|
||||
const [emailAddress, setEmailAddress] = useState("");
|
||||
const [civicNumber, setCivicNumber] = useState(0);
|
||||
const [appartment, setAppartment] = useState("");
|
||||
const [street, setStreet] = useState("");
|
||||
const [city, setCity] = useState("");
|
||||
const [province, setProvince] = useState("");
|
||||
const [country, setCountry] = useState("");
|
||||
const [postalCode, setPostalCode] = useState("");
|
||||
const [prodQuant, setProdQuant] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
const thisInvoice = cookies.get('invoice');
|
||||
if (thisInvoice != null) {
|
||||
setFirstName(thisInvoice.firstName);
|
||||
setLastName(thisInvoice.lastName);
|
||||
setPhoneNumber(thisInvoice.phoneNumber);
|
||||
setEmailAddress(thisInvoice.emailAddress);
|
||||
setCivicNumber(thisInvoice.civicNumber);
|
||||
setAppartment(thisInvoice.appartment);
|
||||
setStreet(thisInvoice.street);
|
||||
setCity(thisInvoice.city);
|
||||
setProvince(thisInvoice.province);
|
||||
setCountry(thisInvoice.country);
|
||||
setPostalCode(thisInvoice.postalCode);
|
||||
setProdQuant(thisInvoice.prodQuant);
|
||||
|
||||
var prods = [];
|
||||
|
||||
Object.keys(thisInvoice.prodQuant).map((k) => {
|
||||
fetch(`https://localhost:7292/api/Product?id=${k}`)
|
||||
.then(async (response) => {
|
||||
prods.push({ product: await response.json(), quantity: thisInvoice.prodQuant[k] });
|
||||
}).then(() => {
|
||||
setProducts(prods.sort((a, b) => a.product.id - b.product.id));
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
else {
|
||||
console.log("No invoice to review!");
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
const handleAddOne = (id) => {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
const handleRemoveOne = (id) => {
|
||||
var modifiedPQ = prodQuant.filter((pq) => pq.id == id);
|
||||
var modifiedProd = prodQuant.filter((pq) => pq.product.id == id);
|
||||
|
||||
if (modifiedPQ.quantity - 1 <= 0) {
|
||||
setProdQuant([...(prodQuant.filter((pq) => pq.id !== id))].sort((a, b) => a.id - b.id));
|
||||
setProducts([...(products.filter((pq) => pq.product.id !== id))].sort((a, b) => a.product.id - b.product.id));
|
||||
}
|
||||
else {
|
||||
modifiedPQ.quantity--;
|
||||
setProdQuant([...(prodQuant.filter((pq) => pq.id !== id)), { ...modifiedPQ }].sort((a, b) => a.id - b.id));
|
||||
setProducts([...(products.filter((pq) => pq.product.id !== id)), { ...modifiedProd }].sort((a, b) => a.product.id - b.product.id));
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveProduct = (id) => {
|
||||
|
||||
setProdQuant([...(prodQuant.filter((pq) => pq.id !== id))].sort((a, b) => a.id - b.id));
|
||||
setProducts([...(products.filter((pq) => pq.product.id !== id))].sort((a, b) => a.product.id - b.product.id));
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="review-invoice-container">
|
||||
|
||||
<div className="review-invoice-info">
|
||||
<div>
|
||||
<label>Prénom: </label>
|
||||
<input value={firstName} onChange={(e) => setFirstName(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Nom: </label>
|
||||
<input value={lastName} onChange={(e) => setLastName(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Téléphone: </label>
|
||||
<input value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Courriel: </label>
|
||||
<input value={emailAddress} onChange={(e) => setEmailAddress(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="review-invoice-address-container">
|
||||
<div>
|
||||
<label>Numéro civique: </label>
|
||||
<input type="number" min="0" value={civicNumber} onChange={(e) => setCivicNumber(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Numéro d'appartement: </label>
|
||||
<input value={appartment} onChange={(e) => setAppartment(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Rue: </label>
|
||||
<input value={street} onChange={(e) => setStreet(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Ville: </label>
|
||||
<input value={city} onChange={(e) => setCity(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Province (abréviation): </label>
|
||||
<input value={province} onChange={(e) => setProvince(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Pays: </label>
|
||||
<input value={country} onChange={(e) => setCountry(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Code postal: </label>
|
||||
<input value={postalCode} onChange={(e) => setPostalCode(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ReviewProdList
|
||||
products={products}
|
||||
onAddOne={handleAddOne}
|
||||
onRemoveOne={handleRemoveOne}
|
||||
onRemoveProduct={handleRemoveProduct}
|
||||
/>
|
||||
<TotalProductsPrice
|
||||
products={products}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReviewInvoice;
|
||||
@ -787,6 +787,10 @@ a {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.review-invoice-address-container{
|
||||
border:black 1px solid;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------- */
|
||||
/* specification pour les moyennes écrans
|
||||
/* -------------------------------------------------------- */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user