From a8c62a86ab1c1f48021990993d3b4fc0aafc792a Mon Sep 17 00:00:00 2001
From: Victor Turgeon <76506447+Medenos@users.noreply.github.com>
Date: Thu, 8 Dec 2022 18:25:49 -0500
Subject: [PATCH] Ajout du nom dans le UI

---
 .../src/components/PaymentForm.js                 |  2 ++
 .../src/pages/ReviewInvoice.js                    |  8 ++++----
 .../grosses-mitaines-ui/src/stylesheets/site.css  | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js b/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js
index 072ee4f..d339d67 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js
@@ -27,6 +27,7 @@ const CARD_OPTIONS = {
 const PaymentForm = ({ cost }) => {
 
     const [success, setSuccess] = useState(false);
+    const [cardName, setCardName] = useState("");
     const stripe = useStripe();
     const elements = useElements();
 
@@ -82,6 +83,7 @@ const PaymentForm = ({ cost }) => {
             {!success ?
                 <form onSubmit={handleSubmit}>
                     <fieldset className="FormGroup">
+                        <input className="FormRow" placeholder="Cardholder Name" id="cardholder-name" type="text" value={cardName} onChange={e => setCardName(e.target.value)} />
                         <div className="FormRow">
                             <CardElement options={CARD_OPTIONS} />
                         </div>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
index 12e106a..c7c79db 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
@@ -178,10 +178,10 @@ const ReviewInvoice = () => {
                         />
                     </div>
                  <Row className="invoice-buttons">
-                    <Col xs={6}>
+                    {/* <Col xs={6}>
                         <Button className="invoice-button confirmer" onClick={handleConfirmer}>Confirmer</Button>
-                    </Col>
-                    <Col xs={6}>
+                    </Col> */}
+                    <Col xs={12}>
                         <Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
                     </Col>
                 </Row> 
@@ -191,7 +191,7 @@ const ReviewInvoice = () => {
                     />
                 </Col>
             </Row>
-           {/* <StripeContainer cost={total} />*/}
+           <StripeContainer cost={total} />
         </>
 
     );
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 83721da..5ecd3f4 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -39,6 +39,20 @@ a {
     border-radius: 4px;
 }
 
+#cardholder-name {
+    background-color: transparent;
+    border:none;
+    color:white;
+    margin: auto;
+    width: 90%;
+    margin-left: 15px;
+    margin-top:10px;
+}
+
+#cardholder-name::placeholder{
+    color: lightgray;
+}
+
 .FormRow {
     display: -ms-flexbox;
     display: flex;
@@ -1032,6 +1046,7 @@ a {
     .morceaux-options-container {
         display: block;
     }
+
 }