108 lines
3.0 KiB
JavaScript
108 lines
3.0 KiB
JavaScript
import React from "react";
|
|
import Label from "../common/Label";
|
|
import { useFormContext } from "react-hook-form";
|
|
|
|
const ContactInfro = ({ onNext }) => {
|
|
const {
|
|
register,
|
|
control,
|
|
trigger,
|
|
formState: { errors },
|
|
} = useFormContext();
|
|
|
|
|
|
const handleNext = async () => {
|
|
const valid = await trigger([
|
|
"firstName",
|
|
"lastName",
|
|
"email",
|
|
"contactNumber",
|
|
"billingAddress",
|
|
]);
|
|
if (valid) {
|
|
onNext(); // go to next tab
|
|
}
|
|
};
|
|
return (
|
|
<div class="row g-6">
|
|
<div className="col-sm-6">
|
|
<Label htmlFor="firstName" required>
|
|
First Name
|
|
</Label>
|
|
<input
|
|
id="firstName"
|
|
type="text"
|
|
className={`form-control form-control-sm ${errors.firstName ? "is-invalid" : ""}`}
|
|
{...register("firstName")}
|
|
/>
|
|
{errors.firstName && (
|
|
<div className="invalid-feedback">{errors.firstName.message}</div>
|
|
)}
|
|
</div>
|
|
<div className="col-sm-6">
|
|
<Label htmlFor="lastName" required>
|
|
Last Name
|
|
</Label>
|
|
<input
|
|
id="lastName"
|
|
type="text"
|
|
className={`form-control form-control-sm ${errors.lastName ? "is-invalid" : ""}`}
|
|
{...register("lastName")}
|
|
/>
|
|
{errors.lastName && (
|
|
<div className="invalid-feedback">{errors.lastName.message}</div>
|
|
)}
|
|
</div>
|
|
<div className="col-sm-6">
|
|
<Label htmlFor="email" required>
|
|
Email
|
|
</Label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
className={`form-control form-control-sm ${errors.email ? "is-invalid" : ""}`}
|
|
{...register("email")}
|
|
/>
|
|
{errors.email && (
|
|
<div className="invalid-feedback">{errors.email.message}</div>
|
|
)}
|
|
</div>
|
|
<div className="col-sm-6">
|
|
<Label htmlFor="contactNumber" required>
|
|
Contact Number
|
|
</Label>
|
|
<input
|
|
id="contactNumber"
|
|
type="text"
|
|
className={`form-control form-control-sm ${errors.contactNumber ? "is-invalid" : ""}`}
|
|
{...register("contactNumber")}
|
|
/>
|
|
{errors.contactNumber && (
|
|
<div className="invalid-feedback">{errors.contactNumber.message}</div>
|
|
)}
|
|
</div>
|
|
<div className="col-12">
|
|
<Label htmlFor="billingAddress" required>
|
|
Billing Address
|
|
</Label>
|
|
<textarea
|
|
id="billingAddress"
|
|
className={`form-control ${errors.billingAddress ? "is-invalid" : ""}`}
|
|
{...register("billingAddress")}
|
|
rows={3}
|
|
/>
|
|
{errors.billingAddress && (
|
|
<div className="invalid-feedback">{errors.billingAddress.message}</div>
|
|
)}
|
|
</div>
|
|
<div className="d-flex justify-content-end mt-3">
|
|
<button type="button" className="btn btn-primary" onClick={handleNext}>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactInfro;
|