BEINISISNIDSFINSDOvhpbfdslkvmh f,uidafmjkuzvrnhdahgdsxzk.gjSUrabéj
This commit is contained in:
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;
|
export default ReviewInvoice;
|
@ -787,6 +787,10 @@ a {
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.review-invoice-address-container{
|
||||||
|
border:black 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
/* specification pour les moyennes écrans
|
/* specification pour les moyennes écrans
|
||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
|
Loading…
Reference in New Issue
Block a user