Post marche pas
This commit is contained in:
parent
73421ea1ef
commit
035731dd2f
@ -84,13 +84,18 @@ const InvoiceItem = ({ invoice }) => {
|
|||||||
|
|
||||||
<div className="invoice-item-container">
|
<div className="invoice-item-container">
|
||||||
<div className="invoice-item-info">
|
<div className="invoice-item-info">
|
||||||
<div>
|
{invoice.status != null ?
|
||||||
#{invoice.id} ({getStatus(invoice.status)})
|
<div>
|
||||||
</div>
|
#{invoice.id} ({getStatus(invoice.status)})
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
<div className="invoice-item-expedition">
|
<div className="invoice-item-expedition">
|
||||||
<b>Adresse d'expédition:</b><br />
|
<b>Adresse d'expédition:</b><br />
|
||||||
{invoice.firstName} {invoice.lastName}<br />
|
{invoice.firstName} {invoice.lastName}<br />
|
||||||
{invoice.shippingAddress.civicNumber} {invoice.shippingAddress.street}<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.city}, {invoice.shippingAddress.province} {invoice.shippingAddress.postalCode}<br />
|
||||||
{invoice.shippingAddress.country}<br />
|
{invoice.shippingAddress.country}<br />
|
||||||
</div>
|
</div>
|
||||||
@ -99,7 +104,7 @@ const InvoiceItem = ({ invoice }) => {
|
|||||||
<h4>Produits</h4>
|
<h4>Produits</h4>
|
||||||
<ul className="invoice-item-product-list">
|
<ul className="invoice-item-product-list">
|
||||||
{invoice.products.map((p) => (
|
{invoice.products.map((p) => (
|
||||||
<li key={p.id}>{p.quantity} x {p.product.title} <br/> <b>{productTotal(p).toFixed(2)} $ CA</b></li>
|
<li key={p.id}>{p.quantity} x {p.product.title} <br /> <b>{productTotal(p).toFixed(2)} $ CA</b></li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<>
|
<>
|
||||||
|
@ -1,8 +1,13 @@
|
|||||||
const ReviewProdItem = ({ pq, onAddOne, onRemoveOne, onRemoveProduct }) => {
|
export function ReviewProdItem({ pq, /*onAddOne, onRemoveOne, onRemoveProduct*/ }) {
|
||||||
return (
|
|
||||||
<div className="review-prod-item-container">
|
const productTotal = (p) => {
|
||||||
|
return (p.quantity * (p.status == 3 || p.status == 4 ? p.promoPrice : p.price))
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div className="invoice-item-product" key={pq.id}>{pq.quantity} x {pq.title} <br /> <b>{productTotal(pq).toFixed(2)} $ CA</b></div>
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,17 +1,24 @@
|
|||||||
import ReviewProdItem from "./ReviewProdItem";
|
import ReviewProdItem from "./ReviewProdItem";
|
||||||
|
import { CartContext } from './Cart';
|
||||||
|
import { useContext } from 'react';
|
||||||
|
|
||||||
|
export function ReviewProdList(/*{ products , onAddOne, onRemoveOne, onRemoveProduct }*/) {
|
||||||
|
const cart = useContext(CartContext);
|
||||||
|
|
||||||
const ReviewProdList = ({ products, onAddOne, onRemoveOne, onRemoveProduct }) => {
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="invoice-item-products">
|
||||||
{products.map((p) => (
|
<h3>Produits</h3>
|
||||||
<ReviewProdItem
|
<div className="invoice-item-product-list">
|
||||||
key={p.product.id}
|
{cart.items.map((p) => (
|
||||||
pq={p}
|
<ReviewProdItem
|
||||||
onAddOne={onAddOne}
|
key={p.id}
|
||||||
onRemoveOne={onRemoveOne}
|
pq={p}
|
||||||
onRemoveProduct={onRemoveProduct}
|
//onAddOne={onAddOne}
|
||||||
/>
|
//onRemoveOne={onRemoveOne}
|
||||||
))}
|
//onRemoveProduct={onRemoveProduct}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
@ -1,38 +1,45 @@
|
|||||||
const TotalProductsPrice = ({ products }) => {
|
import { CartContext } from './Cart';
|
||||||
|
import { useContext } from 'react';
|
||||||
|
|
||||||
const productTotal = (p) => {
|
export function TotalProductsPrice(/*{ products }*/) {
|
||||||
return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price))
|
|
||||||
}
|
|
||||||
|
|
||||||
const getPriceHTML = (prods) => {
|
const cart = useContext(CartContext);
|
||||||
|
|
||||||
|
// 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 tpsRate = 5;
|
||||||
const tvqRate = 9.975;
|
const tvqRate = 9.975;
|
||||||
|
|
||||||
var price = 0;
|
var price = cart.getTotalCost();
|
||||||
var tps = 0;
|
var tps = 0;
|
||||||
var tvq = 0;
|
var tvq = 0;
|
||||||
|
var total;
|
||||||
|
|
||||||
prods.map((p) => {
|
// prods.map((p) => {
|
||||||
price += productTotal(p);
|
// price += productTotal(p);
|
||||||
});
|
// });
|
||||||
|
|
||||||
tps = price * (tpsRate / 100);
|
tps = price * (tpsRate / 100);
|
||||||
tvq = price * (tvqRate / 100);
|
tvq = price * (tvqRate / 100);
|
||||||
|
total = price + tps + tvq;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="invoice-item-price">
|
<div className="invoice-item-price">
|
||||||
Sous-total = {price.toFixed(2)} $ CA<br />
|
Sous-total = {price.toFixed(2)} $ CA<br />
|
||||||
+ TPS ({tpsRate}%) = {tps.toFixed(2)} $ CA<br />
|
+ TPS ({tpsRate}%) = {tps.toFixed(2)} $ CA<br />
|
||||||
+ TVQ ({tvqRate}%) = {tvq.toFixed(2)} $ CA<br />
|
+ TVQ ({tvqRate}%) = {tvq.toFixed(2)} $ CA<br />
|
||||||
<b>Total = {(price + tps + tvq).toFixed(2)} $ CA</b>
|
<b>Total = {total.toFixed(2)} $ CA</b>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{getPriceHTML(products)}
|
{getPriceHTML(/*products*/)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,55 +1,69 @@
|
|||||||
import { useState } from "react";
|
import { useState, useContext, useEffect } from "react";
|
||||||
import { useEffect } from "react";
|
|
||||||
import Cookies from "universal-cookie";
|
import Cookies from "universal-cookie";
|
||||||
import ReviewProdList from "../components/ReviewProdList";
|
import ReviewProdList from "../components/ReviewProdList";
|
||||||
import TotalProductsPrice from "../components/TotalProductsPrice";
|
import TotalProductsPrice from "../components/TotalProductsPrice";
|
||||||
|
import { Row, Col, Button } from "react-bootstrap";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
import CartProvider from "../components/Cart";
|
||||||
|
|
||||||
const ReviewInvoice = () => {
|
const ReviewInvoice = () => {
|
||||||
|
|
||||||
const cookies = new Cookies();
|
const cookies = new Cookies();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const mySwal = withReactContent(Swal);
|
||||||
|
|
||||||
const [products, setProducts] = useState([]);
|
const cart = useContext(CartProvider);
|
||||||
|
|
||||||
const [firstName, setFirstName] = useState("");
|
//const [products, setProducts] = useState([]);
|
||||||
const [lastName, setLastName] = useState("");
|
|
||||||
const [phoneNumber, setPhoneNumber] = useState("");
|
const [thisInvoice, setThisInvoice] = useState({
|
||||||
const [emailAddress, setEmailAddress] = useState("");
|
firstName: "",
|
||||||
const [civicNumber, setCivicNumber] = useState(0);
|
lastName: "",
|
||||||
const [appartment, setAppartment] = useState("");
|
phoneNumber: "",
|
||||||
const [street, setStreet] = useState("");
|
emailAddress: "",
|
||||||
const [city, setCity] = useState("");
|
civicNumber: "",
|
||||||
const [province, setProvince] = useState("");
|
appartment: "",
|
||||||
const [country, setCountry] = useState("");
|
street: "",
|
||||||
const [postalCode, setPostalCode] = useState("");
|
city: "",
|
||||||
const [prodQuant, setProdQuant] = useState({});
|
province: "",
|
||||||
|
country: "",
|
||||||
|
postalCode: "",
|
||||||
|
prodQuant: []
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const thisInvoice = cookies.get('invoice');
|
const thisInvoice = cookies.get('invoice');
|
||||||
if (thisInvoice != null) {
|
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));
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
|
setThisInvoice((e) => {
|
||||||
|
return {
|
||||||
|
...e,
|
||||||
|
firstName: thisInvoice.firstName,
|
||||||
|
lastName: thisInvoice.lastName,
|
||||||
|
phoneNumber: thisInvoice.phoneNumber,
|
||||||
|
emailAddress: thisInvoice.emailAddress,
|
||||||
|
civicNumber: thisInvoice.civicNumber,
|
||||||
|
appartment: thisInvoice.appartment,
|
||||||
|
street: thisInvoice.street,
|
||||||
|
city: thisInvoice.city,
|
||||||
|
province: thisInvoice.province,
|
||||||
|
country: thisInvoice.country,
|
||||||
|
postalCode: thisInvoice.postalCode,
|
||||||
|
prodQuant: 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 {
|
else {
|
||||||
console.log("No invoice to review!");
|
console.log("No invoice to review!");
|
||||||
@ -57,109 +71,161 @@ const ReviewInvoice = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
const handleAddOne = (id) => {
|
// const handleAddOne = (id) => {
|
||||||
|
|
||||||
var modifiedPQ = prodQuant.filter((pq) => pq.id == id);
|
// var modifiedPQ = prodQuant.filter((pq) => pq.id == id);
|
||||||
var modifiedProd = prodQuant.filter((pq) => pq.product.id == id);
|
// var modifiedProd = prodQuant.filter((pq) => pq.product.id == id);
|
||||||
|
|
||||||
modifiedPQ.quantity++;
|
// modifiedPQ.quantity++;
|
||||||
modifiedProd.quantity = modifiedPQ.quantity;
|
// modifiedProd.quantity = modifiedPQ.quantity;
|
||||||
|
|
||||||
setProdQuant([...(prodQuant.filter((pq) => pq.id !== id)), { ...modifiedPQ }].sort((a, b) => a.id - b.id));
|
// 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));
|
// setProducts([...(products.filter((pq) => pq.product.id !== id)), { ...modifiedProd }].sort((a, b) => a.product.id - b.product.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--;
|
||||||
|
// modifiedProd.quantity = 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));
|
||||||
|
// }
|
||||||
|
|
||||||
|
const handleModify = () => {
|
||||||
|
navigate("/formulaire")
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRemoveOne = (id) => {
|
const handleConfirmer = async () => {
|
||||||
var modifiedPQ = prodQuant.filter((pq) => pq.id == id);
|
console.log(thisInvoice);
|
||||||
var modifiedProd = prodQuant.filter((pq) => pq.product.id == id);
|
|
||||||
|
|
||||||
if (modifiedPQ.quantity - 1 <= 0) {
|
// let formData = new FormData();
|
||||||
setProdQuant([...(prodQuant.filter((pq) => pq.id !== id))].sort((a, b) => a.id - b.id));
|
// Object.keys(thisInvoice).map((k) => {
|
||||||
setProducts([...(products.filter((pq) => pq.product.id !== id))].sort((a, b) => a.product.id - b.product.id));
|
// formData.set(k, thisInvoice[k]);
|
||||||
}
|
// });
|
||||||
else {
|
|
||||||
modifiedPQ.quantity--;
|
// console.log(formData);
|
||||||
modifiedProd.quantity = modifiedPQ.quantity;
|
const json = JSON.stringify(thisInvoice);
|
||||||
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 response = await fetch(`https://localhost:7292/api/Invoice`, {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
mode: 'cors',
|
||||||
|
headers: {
|
||||||
|
'accept': 'application/json',
|
||||||
|
},
|
||||||
|
body: json
|
||||||
|
})
|
||||||
|
console.log(json);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
mySwal.fire({
|
||||||
|
title: 'Commande envoyée avec succès!',
|
||||||
|
timer: 2000,
|
||||||
|
icon: "success"
|
||||||
|
})
|
||||||
|
cart.items = [];
|
||||||
|
navigate('./myinvoices');
|
||||||
}
|
}
|
||||||
|
else
|
||||||
|
console.log("Erreur de creation la commande #" + thisInvoice.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 (
|
return (
|
||||||
<div className="review-invoice-container">
|
<Row>
|
||||||
|
<h2 className="confirmer-infos">Veuillez confirmer les informations ci-dessous!</h2>
|
||||||
|
<Col xs={6} md={4}>
|
||||||
|
|
||||||
<div className="review-invoice-info">
|
<div className="review-invoice-info">
|
||||||
<div>
|
<div>
|
||||||
<label>Prénom: </label>
|
<label className="bold">Prénom: </label> <label>{thisInvoice.firstName}</label>
|
||||||
<input value={firstName} onChange={(e) => setFirstName(e.target.value)} />
|
{/* <input value={firstName} onChange={(e) => setFirstName(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="bold">Nom: </label> <label>{thisInvoice.lastName}</label>
|
||||||
|
{/* <input value={lastName} onChange={(e) => setLastName(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="bold">Téléphone: </label> <label>{thisInvoice.phoneNumber}</label>
|
||||||
|
{/* <input value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="bold">Courriel: </label> <label>{thisInvoice.emailAddress}</label>
|
||||||
|
{/* <input value={emailAddress} onChange={(e) => setEmailAddress(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
</div>
|
</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 className="review-invoice-address-container">
|
||||||
<div>
|
<div>
|
||||||
<label>Numéro civique: </label>
|
<label className="bold">Numéro civique: </label> <label>{thisInvoice.civicNumber}</label>
|
||||||
<input type="number" min="0" value={civicNumber} onChange={(e) => setCivicNumber(e.target.value)} />
|
{/* <input type="number" min="0" value={civicNumber} onChange={(e) => setCivicNumber(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
|
{thisInvoice.appartment != null ?
|
||||||
|
<div>
|
||||||
|
<label className="bold">Numéro d'appartement: </label> <label>{thisInvoice.appartment}</label>
|
||||||
|
{/* <input value={appartment} onChange={(e) => setAppartment(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
<div>
|
||||||
|
<label className="bold">Rue: </label> <label>{thisInvoice.street}</label>
|
||||||
|
{/* <input value={street} onChange={(e) => setStreet(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="bold">Ville: </label> <label>{thisInvoice.city}</label>
|
||||||
|
{/* <input value={city} onChange={(e) => setCity(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="bold">Province (abréviation): </label> <label>{thisInvoice.province}</label>
|
||||||
|
{/* <input value={province} onChange={(e) => setProvince(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="bold">Pays: </label> <label>{thisInvoice.country}</label>
|
||||||
|
{/* <input value={country} onChange={(e) => setCountry(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="bold">Code postal: </label> <label>{thisInvoice.postalCode}</label>
|
||||||
|
{/* <input value={postalCode} onChange={(e) => setPostalCode(e.target.value)} /> */}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="review-invoice-info">
|
||||||
<label>Numéro d'appartement: </label>
|
<TotalProductsPrice
|
||||||
<input value={appartment} onChange={(e) => setAppartment(e.target.value)} />
|
//products={cart.items}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<Row className="invoice-buttons">
|
||||||
<label>Rue: </label>
|
<Col xs={6}>
|
||||||
<input value={street} onChange={(e) => setStreet(e.target.value)} />
|
<Button className="invoice-button confirmer" onClick={handleConfirmer}>Confirmer</Button>
|
||||||
</div>
|
</Col>
|
||||||
<div>
|
<Col xs={6}>
|
||||||
<label>Ville: </label>
|
<Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
|
||||||
<input value={city} onChange={(e) => setCity(e.target.value)} />
|
</Col>
|
||||||
</div>
|
</Row>
|
||||||
<div>
|
</Col>
|
||||||
<label>Province (abréviation): </label>
|
<Col xs={6} md={8}>
|
||||||
<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
|
<ReviewProdList
|
||||||
products={products}
|
//products={cart.items}
|
||||||
onAddOne={handleAddOne}
|
//onAddOne={handleAddOne}
|
||||||
onRemoveOne={handleRemoveOne}
|
//onRemoveOne={handleRemoveOne}
|
||||||
onRemoveProduct={handleRemoveProduct}
|
//onRemoveProduct={handleRemoveProduct}
|
||||||
/>
|
/>
|
||||||
<TotalProductsPrice
|
</Col>
|
||||||
products={products}
|
</Row>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -762,13 +762,30 @@ a {
|
|||||||
|
|
||||||
.invoice-item-products {
|
.invoice-item-products {
|
||||||
color: white;
|
color: white;
|
||||||
width: 40%;
|
width: 75%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-item-products h3 {
|
||||||
|
text-align: center !important;
|
||||||
|
color:purple;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: beige;
|
||||||
|
width: auto;
|
||||||
|
border: 3px solid purple;
|
||||||
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.invoice-item-products li {
|
.invoice-item-products li {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
/* border: white 1px solid; */
|
background-color: black;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-item-product {
|
||||||
|
padding: 5px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
@ -780,17 +797,60 @@ a {
|
|||||||
|
|
||||||
.invoice-item-price {}
|
.invoice-item-price {}
|
||||||
|
|
||||||
.formulaire-address{
|
.formulaire-address {
|
||||||
border:gray 1px solid;
|
border: gray 1px solid;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-invoice-address-container{
|
.review-invoice-info {
|
||||||
border:black 1px solid;
|
border: black 5px solid;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 2%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: purple;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.review-invoice-address-container {
|
||||||
|
border: purple 5px solid;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 2%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: beige;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-buttons {
|
||||||
|
display:flex;
|
||||||
|
margin:5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-button {
|
||||||
|
margin:2%;
|
||||||
|
width: 100%;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirmer {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modifier {
|
||||||
|
background-color: firebrick;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirmer-infos {
|
||||||
|
text-align: center;
|
||||||
|
color:white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
/* specification pour les moyennes écrans
|
/* specification pour les moyennes écrans
|
||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
@ -805,7 +865,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.invoice-item-products {
|
.invoice-item-products {
|
||||||
margin-top:10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user