300 lines
15 KiB
JavaScript
300 lines
15 KiB
JavaScript
import React, { useState, useContext, useEffect } from "react"
|
|
import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
|
|
import { Row, Col, Button, Form } from "react-bootstrap"
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import { CartContext } from "../components/Cart";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useForm } from "react-hook-form";
|
|
import Cookies from "universal-cookie";
|
|
|
|
const CARD_OPTIONS = {
|
|
iconStyle: "solid",
|
|
style: {
|
|
base: {
|
|
iconColor: "black",
|
|
color: "white",
|
|
fontWeight: 500,
|
|
fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
|
|
fontSize: "16px",
|
|
fontSmoothing: "antialiased",
|
|
":-webkit-autofill": { color: "beige" },
|
|
"::placeholder": { color: "lightgray" }
|
|
},
|
|
invalid: {
|
|
iconColor: "red",
|
|
color: "red"
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const PaymentForm = ({ cost, invoice }) => {
|
|
const navigate = useNavigate();
|
|
const { register, handleSubmit, setValue, formState: { errors } } = useForm();
|
|
const cookies = new Cookies();
|
|
|
|
const mySwal = withReactContent(Swal);
|
|
const [cardName, setCardName] = useState("");
|
|
const [cardPhone, setCardPhone] = useState("");
|
|
const [cardEmail, setCardEmail] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const [userAddresses, setUserAddresses] = useState([]);
|
|
const [currentAdress, setCurrentAdress] = useState({
|
|
civicNumber: "",
|
|
appartment: "",
|
|
street: "",
|
|
city: "",
|
|
province: "",
|
|
country: "",
|
|
postalCode: ""
|
|
})
|
|
|
|
|
|
const stripe = useStripe();
|
|
const elements = useElements();
|
|
const cart = useContext(CartContext);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
const userInfo = cookies.get("GMGM");
|
|
if (userInfo != null && userInfo.LoggedIn == true) {
|
|
fetch("https://localhost:7292/api/Address", {
|
|
method: 'GET',
|
|
credentials: 'include',
|
|
mode: 'cors'
|
|
},).then(async (response) => {
|
|
if (response.ok) {
|
|
const json = await response.json();
|
|
setUserAddresses(json);
|
|
if (json.length >= 1) {
|
|
setFormAddress(json[0]);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
const setFormAddress = (address) => {
|
|
setCurrentAdress((e) => {
|
|
return {
|
|
...e,
|
|
civicNumber: address.civicNumber,
|
|
appartment: address.appartment,
|
|
street: address.street,
|
|
city: address.city,
|
|
province: address.province,
|
|
country: address.country,
|
|
postalCode: address.postalCode
|
|
}
|
|
});
|
|
|
|
setValue("civicNumber", address.civicNumber);
|
|
setValue("appartment", address.appartment);
|
|
setValue("street", address.street);
|
|
setValue("city", address.city);
|
|
setValue("province", address.province);
|
|
setValue("country", address.country);
|
|
setValue("postalCode", address.postalCode);
|
|
}
|
|
|
|
|
|
|
|
|
|
const onSubmit = async (e) => {
|
|
//e.preventDefault();
|
|
setIsLoading(true);
|
|
const { error } = await stripe.createPaymentMethod({
|
|
type: "card",
|
|
card: elements.getElement(CardElement)
|
|
})
|
|
|
|
if (cost <= 0) {
|
|
console.log("Coût invalide: ", cost);
|
|
return;
|
|
}
|
|
|
|
if (!error) {
|
|
stripe.createToken(elements.getElement(CardElement), { name: cardName })
|
|
.then((result) => {
|
|
if (!result.error) {
|
|
invoice.token = result.token.id;
|
|
invoice.description = `Payement de ${cost} à GM`;
|
|
invoice.amountInCents = cost;
|
|
invoice.currencyCode = "CAD";
|
|
invoice.name = cardName;
|
|
invoice.email = cardEmail;
|
|
invoice.phone = cardPhone;
|
|
invoice.lastFourDigits = result.token.card.last4;
|
|
invoice.billCivicNumber = currentAdress.civicNumber;
|
|
invoice.billAppartment = currentAdress.appartment;
|
|
invoice.billStreet = currentAdress.street;
|
|
invoice.billCity = currentAdress.city;
|
|
invoice.billProvince = currentAdress.province;
|
|
invoice.billCountry = currentAdress.country;
|
|
invoice.billPostalCode = currentAdress.postalCode;
|
|
|
|
const json = JSON.stringify(invoice);
|
|
console.log(invoice);
|
|
|
|
fetch(`https://localhost:7292/api/Invoice`, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
mode: 'cors',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: json
|
|
}).then((response) => {
|
|
if (response.ok) {
|
|
mySwal.fire({
|
|
title: 'Commande envoyée avec succès!',
|
|
timer: 2000,
|
|
icon: "success"
|
|
}).then(
|
|
() => {
|
|
cart.emptyCart();
|
|
navigate('/myInvoices');
|
|
}
|
|
);
|
|
}
|
|
else {
|
|
mySwal.fire({
|
|
title: 'Erreur!',
|
|
timer: 2000,
|
|
icon: "error"
|
|
}).then(() => {
|
|
setIsLoading(false);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
console.log(error.message);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
{
|
|
<Col xl={4}>
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div style={{ "borderRadius": "5px" }} className="form-container">
|
|
|
|
|
|
<h4 className="text-center">Adresse de Facturation</h4>
|
|
<div className="Error_color">
|
|
<div className="formulaire-address">
|
|
<h5>
|
|
Adresse
|
|
<Form.Select onChange={(e) => setFormAddress(userAddresses[e.target.value])}>
|
|
{userAddresses.map((a, i) => (
|
|
<option key={a.id} value={i} >{a.civicNumber} {a.street} </option>
|
|
))}
|
|
</Form.Select>
|
|
</h5>
|
|
<div className="form-group">
|
|
<label>Numéro civique*: </label>
|
|
<input type="number" min="0" {...register("civicNumber", { required: true })}
|
|
value={currentAdress.civicNumber}
|
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, civicNumber: e.target.value } })} />
|
|
</div>
|
|
<div>
|
|
{errors.civicNumber && errors.civicNumber.type === 'required' && <span>Vous devez entrer une numéro civique!</span>}
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Rue*: </label>
|
|
<input {...register("street", { required: true, minLength: 3, maxLength: 50 })}
|
|
value={currentAdress.street}
|
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, street: e.target.value } })} />
|
|
</div>
|
|
<div>
|
|
{errors.street && errors.street.type === 'required' && <span>Vous devez entrer votre rue!</span>}
|
|
{errors.street && errors.street.type === 'minLength' && <span>Votre rue doit avoir au moins 3 lettres!</span>}
|
|
{errors.street && errors.street.type === 'maxLength' && <span>Votre rue doit avoir moins de 51 lettres!</span>}
|
|
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Numéro d'appartement: </label>
|
|
<input {...register("appartment", { required: false })}
|
|
value={currentAdress.appartment}
|
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, appartment: e.target.value } })} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Ville*: </label>
|
|
<input {...register("city", { required: true, minLength: 4, maxLength: 50 })}
|
|
value={currentAdress.city}
|
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, city: e.target.value } })} />
|
|
</div>
|
|
<div>
|
|
{errors.city && errors.city.type === 'required' && <span>Vous devez entrer votre ville!</span>}
|
|
{errors.city && errors.city.type === 'minLength' && <span>Votre ville doit avoir au moins 4 lettres!</span>}
|
|
{errors.city && errors.city.type === 'maxLength' && <span>Votre ville doit avoir moins de 51 lettres!</span>}
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Province (abréviation)*: </label>
|
|
<input placeholder="Exemple: QC" {...register("province", { required: true, maxLength: 3 })}
|
|
value={currentAdress.province}
|
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, province: e.target.value } })} />
|
|
</div>
|
|
<div>
|
|
{errors.province && errors.province.type === 'required' && <span>Vous devez entrer votre province!</span>}
|
|
{errors.province && errors.province.type === 'maxLength' && <span>Votre province doit avoir moins de 4 lettres!</span>}
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Pays*: </label>
|
|
<input {...register("country", { required: true, minLength: 4, maxLength: 30 })}
|
|
value={currentAdress.country}
|
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, country: e.target.value } })} />
|
|
</div>
|
|
<div>
|
|
{errors.country && errors.country.type === 'required' && <span>Vous devez entrer votre pays!</span>}
|
|
{errors.country && errors.country.type === 'minLength' && <span>Votre pays doit avoir au moins 4 lettres!</span>}
|
|
{errors.cicountryty && errors.country.type === 'maxLength' && <span>Votre pays doit avoir moins de 31 lettres!</span>}
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Code postal*: </label>
|
|
<input {...register("postalCode", { required: true, pattern: /^[ABCEGHJ-NPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ -]?\d[ABCEGHJ-NPRSTV-Z]\d$/i })}
|
|
value={currentAdress.postalCode}
|
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, postalCode: e.target.value } })} />
|
|
</div>
|
|
<div>
|
|
{errors.postalCode && errors.postalCode.type === 'required' && <span>Vous devez entrer votre code postal!</span>}
|
|
{errors.postalCode && errors.postalCode.type === 'pattern' && <span>Veuillez entrer un code postal valide!</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Col md={12}>
|
|
<fieldset className="FormGroup">
|
|
<input className="FormRow cardholder-info" placeholder="Nom sur la carte" id="cardholder-name" type="text" value={cardName} onChange={e => setCardName(e.target.value)} />
|
|
<input className="FormRow cardholder-info" placeholder="Téléphone de facturation" id="cardholder-phone" type="text" value={cardPhone} onChange={e => setCardPhone(e.target.value)} />
|
|
<input className="FormRow cardholder-info" placeholder="Addresse courriel de facturation" id="cardholder-email" type="text" value={cardEmail} onChange={e => setCardEmail(e.target.value)} />
|
|
<div className="FormRow">
|
|
<CardElement options={CARD_OPTIONS} />
|
|
</div>
|
|
</fieldset>
|
|
<div className="Payment-btn-container">
|
|
<Button className="Payment-btn" disabled={isLoading} type="submit">Payer</Button>
|
|
{
|
|
isLoading && <div>Paiement en cours...</div>
|
|
}
|
|
</div>
|
|
</Col>
|
|
</form>
|
|
</Col>
|
|
}
|
|
</>
|
|
)
|
|
|
|
}
|
|
|
|
export default PaymentForm; |