DesColsPisDesRow

This commit is contained in:
DavidBelisle 2022-12-12 14:32:50 -05:00
parent 4bf0e7ca45
commit b404d4f2d0
2 changed files with 107 additions and 101 deletions

View File

@ -1,6 +1,6 @@
import React, { useState, useContext, useEffect } from "react" import React, { useState, useContext, useEffect } from "react"
import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js" 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 Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { CartContext } from "../components/Cart"; import { CartContext } from "../components/Cart";
@ -185,8 +185,11 @@ const PaymentForm = ({ cost, invoice }) => {
return ( return (
<> <>
{ {
<Col xl={4}>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div style={{ "borderRadius": "5px" }} className="form-container"> <div style={{ "borderRadius": "5px" }} className="form-container">
<h4 className="text-center">Adresse de Facturation</h4> <h4 className="text-center">Adresse de Facturation</h4>
<div className="Error_color"> <div className="Error_color">
<div className="formulaire-address"> <div className="formulaire-address">
@ -270,6 +273,7 @@ const PaymentForm = ({ cost, invoice }) => {
</div> </div>
</div> </div>
</div> </div>
<Col md={12}>
<fieldset className="FormGroup"> <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="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="Téléphone de facturation" id="cardholder-phone" type="text" value={cardPhone} onChange={e => setCardPhone(e.target.value)} />
@ -284,7 +288,9 @@ const PaymentForm = ({ cost, invoice }) => {
isLoading && <div>Paiement en cours...</div> isLoading && <div>Paiement en cours...</div>
} }
</div> </div>
</Col>
</form> </form>
</Col>
} }
</> </>
) )

View File

@ -129,7 +129,7 @@ const ReviewInvoice = () => {
<> <>
<Row> <Row>
<h2 className="confirmer-infos">Veuillez confirmer les informations ci-dessous!</h2> <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 className="review-invoice-info">
<div> <div>
@ -185,12 +185,12 @@ const ReviewInvoice = () => {
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col xs={6} md={8}> <Col xs={6} xl={4}>
<ReviewProdList <ReviewProdList
/> />
</Col> </Col>
</Row>
<StripeContainer cost={total} invoice={thisInvoice} /> <StripeContainer cost={total} invoice={thisInvoice} />
</Row>
</> </>
); );