Billing Address
This commit is contained in:
DavidBelisle
parent
595b6d980c
commit
e10a183963
@ -1,11 +1,12 @@
|
||||
import React, { useState, useContext } from "react"
|
||||
import React, { useState, useContext, useEffect } from "react"
|
||||
import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
|
||||
import { Button } from "react-bootstrap"
|
||||
import { 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",
|
||||
@ -31,18 +32,79 @@ const CARD_OPTIONS = {
|
||||
|
||||
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 [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);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
|
||||
|
||||
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({
|
||||
@ -97,7 +159,7 @@ const PaymentForm = ({ cost, invoice }) => {
|
||||
title: 'Erreur!',
|
||||
timer: 2000,
|
||||
icon: "error"
|
||||
}).then(()=>{
|
||||
}).then(() => {
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
@ -115,7 +177,91 @@ const PaymentForm = ({ cost, invoice }) => {
|
||||
return (
|
||||
<>
|
||||
{
|
||||
<form onSubmit={handleSubmit}>
|
||||
<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>
|
||||
<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)} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user