react-version #1
@ -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,106 +185,112 @@ const PaymentForm = ({ cost, invoice }) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{
|
{
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<Col xl={4}>
|
||||||
<div style={{"borderRadius": "5px"}} className="form-container">
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
<h4 className="text-center">Adresse de Facturation</h4>
|
<div style={{ "borderRadius": "5px" }} className="form-container">
|
||||||
<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">
|
<h4 className="text-center">Adresse de Facturation</h4>
|
||||||
<label>Numéro d'appartement: </label>
|
<div className="Error_color">
|
||||||
<input {...register("appartment", { required: false })}
|
<div className="formulaire-address">
|
||||||
value={currentAdress.appartment}
|
<h5>
|
||||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, appartment: e.target.value } })} />
|
Adresse
|
||||||
</div>
|
<Form.Select onChange={(e) => setFormAddress(userAddresses[e.target.value])}>
|
||||||
<div className="form-group">
|
{userAddresses.map((a, i) => (
|
||||||
<label>Ville*: </label>
|
<option key={a.id} value={i} >{a.civicNumber} {a.street} </option>
|
||||||
<input {...register("city", { required: true, minLength: 4, maxLength: 50 })}
|
))}
|
||||||
value={currentAdress.city}
|
</Form.Select>
|
||||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, city: e.target.value } })} />
|
</h5>
|
||||||
</div>
|
<div className="form-group">
|
||||||
<div>
|
<label>Numéro civique*: </label>
|
||||||
{errors.city && errors.city.type === 'required' && <span>Vous devez entrer votre ville!</span>}
|
<input type="number" min="0" {...register("civicNumber", { required: true })}
|
||||||
{errors.city && errors.city.type === 'minLength' && <span>Votre ville doit avoir au moins 4 lettres!</span>}
|
value={currentAdress.civicNumber}
|
||||||
{errors.city && errors.city.type === 'maxLength' && <span>Votre ville doit avoir moins de 51 lettres!</span>}
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, civicNumber: e.target.value } })} />
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div>
|
||||||
<label>Province (abréviation)*: </label>
|
{errors.civicNumber && errors.civicNumber.type === 'required' && <span>Vous devez entrer une numéro civique!</span>}
|
||||||
<input placeholder="Exemple: QC" {...register("province", { required: true, maxLength: 3 })}
|
</div>
|
||||||
value={currentAdress.province}
|
<div className="form-group">
|
||||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, province: e.target.value } })} />
|
<label>Rue*: </label>
|
||||||
</div>
|
<input {...register("street", { required: true, minLength: 3, maxLength: 50 })}
|
||||||
<div>
|
value={currentAdress.street}
|
||||||
{errors.province && errors.province.type === 'required' && <span>Vous devez entrer votre province!</span>}
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, street: e.target.value } })} />
|
||||||
{errors.province && errors.province.type === 'maxLength' && <span>Votre province doit avoir moins de 4 lettres!</span>}
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div className="form-group">
|
{errors.street && errors.street.type === 'required' && <span>Vous devez entrer votre rue!</span>}
|
||||||
<label>Pays*: </label>
|
{errors.street && errors.street.type === 'minLength' && <span>Votre rue doit avoir au moins 3 lettres!</span>}
|
||||||
<input {...register("country", { required: true, minLength: 4, maxLength: 30 })}
|
{errors.street && errors.street.type === 'maxLength' && <span>Votre rue doit avoir moins de 51 lettres!</span>}
|
||||||
value={currentAdress.country}
|
|
||||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, country: e.target.value } })} />
|
</div>
|
||||||
</div>
|
<div className="form-group">
|
||||||
<div>
|
<label>Numéro d'appartement: </label>
|
||||||
{errors.country && errors.country.type === 'required' && <span>Vous devez entrer votre pays!</span>}
|
<input {...register("appartment", { required: false })}
|
||||||
{errors.country && errors.country.type === 'minLength' && <span>Votre pays doit avoir au moins 4 lettres!</span>}
|
value={currentAdress.appartment}
|
||||||
{errors.cicountryty && errors.country.type === 'maxLength' && <span>Votre pays doit avoir moins de 31 lettres!</span>}
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, appartment: e.target.value } })} />
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Code postal*: </label>
|
<label>Ville*: </label>
|
||||||
<input {...register("postalCode", { required: true, pattern: /^[ABCEGHJ-NPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ -]?\d[ABCEGHJ-NPRSTV-Z]\d$/i })}
|
<input {...register("city", { required: true, minLength: 4, maxLength: 50 })}
|
||||||
value={currentAdress.postalCode}
|
value={currentAdress.city}
|
||||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, postalCode: e.target.value } })} />
|
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, city: e.target.value } })} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{errors.postalCode && errors.postalCode.type === 'required' && <span>Vous devez entrer votre code postal!</span>}
|
{errors.city && errors.city.type === 'required' && <span>Vous devez entrer votre ville!</span>}
|
||||||
{errors.postalCode && errors.postalCode.type === 'pattern' && <span>Veuillez entrer un code postal valide!</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>
|
||||||
</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)} />
|
||||||
<input className="FormRow cardholder-info" placeholder="Addresse courriel de facturation" id="cardholder-email" type="text" value={cardEmail} onChange={e => setCardEmail(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">
|
<div className="FormRow">
|
||||||
<CardElement options={CARD_OPTIONS} />
|
<CardElement options={CARD_OPTIONS} />
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<div className="Payment-btn-container">
|
<div className="Payment-btn-container">
|
||||||
<Button className="Payment-btn" disabled={isLoading} type="submit">Payer</Button>
|
<Button className="Payment-btn" disabled={isLoading} type="submit">Payer</Button>
|
||||||
{
|
{
|
||||||
isLoading && <div>Paiement en cours...</div>
|
isLoading && <div>Paiement en cours...</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</Col>
|
||||||
|
</form>
|
||||||
|
</Col>
|
||||||
}
|
}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -11,7 +11,7 @@ const ReviewInvoice = () => {
|
|||||||
|
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
|
||||||
const cart = useContext(CartContext);
|
const cart = useContext(CartContext);
|
||||||
|
|
||||||
@ -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>
|
||||||
|
<StripeContainer cost={total} invoice={thisInvoice} />
|
||||||
</Row>
|
</Row>
|
||||||
<StripeContainer cost={total} invoice={thisInvoice} />
|
|
||||||
</>
|
</>
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user