Ajout du nom dans le UI

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>

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} />
         </>
 
     );

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;
     }
+
 }