react-version #1

Merged
memartel_loc merged 290 commits from react-version into main 2023-11-04 09:48:15 -04:00
5 changed files with 226 additions and 1 deletions
Showing only changes of commit fd8ade08f0 - Show all commits

View File

@ -0,0 +1,9 @@
const ReviewProdItem = ({ pq, onAddOne, onRemoveOne, onRemoveProduct }) => {
return (
<div className="review-prod-item-container">
</div>
)
}
export default ReviewProdItem

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -787,6 +787,10 @@ a {
border-radius: 2px;
}
.review-invoice-address-container{
border:black 1px solid;
}
/* -------------------------------------------------------- */
/* specification pour les moyennes écrans
/* -------------------------------------------------------- */