From b404d4f2d04c6ea3ed23376f45bd3d3d6174023d Mon Sep 17 00:00:00 2001
From: DavidBelisle <79233327+DavidBelisle@users.noreply.github.com>
Date: Mon, 12 Dec 2022 14:32:50 -0500
Subject: [PATCH] DesColsPisDesRow

---
 .../src/components/PaymentForm.js             | 200 +++++++++---------
 .../src/pages/ReviewInvoice.js                |   8 +-
 2 files changed, 107 insertions(+), 101 deletions(-)

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js b/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js
index df68091..940949c 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js
@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from "react"
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
-import { Button, Form } from "react-bootstrap"
+import { Row, Col, Button, Form } from "react-bootstrap"
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { CartContext } from "../components/Cart";
@@ -185,106 +185,112 @@ const PaymentForm = ({ cost, invoice }) => {
     return (
         <>
             {
-                <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>}
+                <Col xl={4}>
+                    <form onSubmit={handleSubmit(onSubmit)}>
+                        <div style={{ "borderRadius": "5px" }} className="form-container">
 
-                                </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>}
+
+                            <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>
-                    </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)} />
-                        <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>
-                </form>
+                        <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>
             }
         </>
     )
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
index d855385..575af41 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
@@ -11,7 +11,7 @@ const ReviewInvoice = () => {
 
 
     const navigate = useNavigate();
-    
+
 
     const cart = useContext(CartContext);
 
@@ -129,7 +129,7 @@ const ReviewInvoice = () => {
         <>
             <Row>
                 <h2 className="confirmer-infos">Veuillez confirmer les informations ci-dessous!</h2>
-                <Col xs={6} md={4}>
+                <Col xs={6} xl={4}>
 
                     <div className="review-invoice-info">
                         <div>
@@ -185,12 +185,12 @@ const ReviewInvoice = () => {
                         </Col>
                     </Row>
                 </Col>
-                <Col xs={6} md={8}>
+                <Col xs={6} xl={4}>
                     <ReviewProdList
                     />
                 </Col>
+                <StripeContainer cost={total} invoice={thisInvoice} />
             </Row>
-            <StripeContainer cost={total} invoice={thisInvoice} />
         </>
 
     );