Billing Address

GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js

@@ -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,6 +32,8 @@ 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("");
@@ -38,11 +41,70 @@ const PaymentForm = ({ cost, invoice }) => {
     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({
@@ -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)} />