Merge branch 'react-version' of https://github.com/MarcEricMartel/420-5DW-HY-TP into react-version

This commit is contained in:
MarcEricMartel 2022-12-08 18:28:38 -08:00
commit 08e81224c7
3 changed files with 21 additions and 4 deletions

View File

@ -27,6 +27,7 @@ const CARD_OPTIONS = {
const PaymentForm = ({ cost }) => { const PaymentForm = ({ cost }) => {
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
const [cardName, setCardName] = useState("");
const stripe = useStripe(); const stripe = useStripe();
const elements = useElements(); const elements = useElements();
@ -82,6 +83,7 @@ const PaymentForm = ({ cost }) => {
{!success ? {!success ?
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<fieldset className="FormGroup"> <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"> <div className="FormRow">
<CardElement options={CARD_OPTIONS} /> <CardElement options={CARD_OPTIONS} />
</div> </div>

View File

@ -178,10 +178,10 @@ const ReviewInvoice = () => {
/> />
</div> </div>
<Row className="invoice-buttons"> <Row className="invoice-buttons">
<Col xs={6}> {/* <Col xs={6}>
<Button className="invoice-button confirmer" onClick={handleConfirmer}>Confirmer</Button> <Button className="invoice-button confirmer" onClick={handleConfirmer}>Confirmer</Button>
</Col> </Col> */}
<Col xs={6}> <Col xs={12}>
<Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button> <Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
</Col> </Col>
</Row> </Row>
@ -191,7 +191,7 @@ const ReviewInvoice = () => {
/> />
</Col> </Col>
</Row> </Row>
{/* <StripeContainer cost={total} />*/} <StripeContainer cost={total} />
</> </>
); );

View File

@ -39,6 +39,20 @@ a {
border-radius: 4px; 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 { .FormRow {
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -1032,6 +1046,7 @@ a {
.morceaux-options-container { .morceaux-options-container {
display: block; display: block;
} }
} }