Untitled
unknown
plain_text
a year ago
18 kB
2
Indexable
Never
import { Field, Form, Formik } from "formik";
import * as Yup from 'yup';
import 'yup-phone-lite';
import { Layout, Breadcrumbs } from "@/components/common";
import { Container } from "@/components/ui";
import { useAddDetailMutation } from "@/generated/graphql";
const House = () => {
const validateSchema = Yup.object().shape({
PropertyType: Yup.string().required(),
Price: Yup.string().required(),
FullName: Yup.string().required(),
Email: Yup.string().email('Invalid email'),
Phone: Yup.string()
.phone("NP", "Invalid Phone Number")
.required(),
Bedrooms: Yup.string().required(),
LivingRoom: Yup.string().required(),
KitchenNo: Yup.string().required(),
Storeroom: Yup.string().required(),
LandArea: Yup.string().required(),
RoadWidth: Yup.string().required(),
FacedOn: Yup.string().required(),
YearBuilt: Yup.string().required(),
WithinRingRoad: Yup.boolean(),
Parking: Yup.boolean(),
Balcony: Yup.boolean(),
Garden: Yup.boolean(),
Country: Yup.string().required(),
Province: Yup.string().required(),
District: Yup.string().required(),
Village_Nagarpalika: Yup.string().required(),
WardNo: Yup.string().required(),
Tole: Yup.string(),
Latitude: Yup.string(),
Longitude: Yup.string(),
Message: Yup.string()
})
const initialValues = {
PropertyType: "House",
FullName: "",
Email: "",
Phone:"",
Price: "",
FacedOn: "",
Bedrooms: "",
LivingRoom: "",
KitchenNo: "",
Storeroom: "",
WithinRingRoad: true,
Parking: true,
Balcony: true,
Garden: true,
LandArea: "",
RoadWidth: "",
YearBuilt: "",
Country: "",
Province: "",
District: "",
Village_Nagarpalika: "",
WardNo: "",
Tole: "",
Latitude: "",
Longitude: "",
Message: "",
}
const [addDetails] = useAddDetailMutation();
return (
<Container el='section'className='py-11'>
<Breadcrumbs/>
<h2 className='mb-16 text-primary'>Sell Your House</h2>
<div className="grid md:grid-cols-2 p-2">
<Formik
initialValues={initialValues}
validationSchema={validateSchema}
onSubmit={async(values) => {
try {
console.log("inside addDetails");
await addDetails({
variables: {input: values}
})
}
catch {
console.log("Error uploading house details");
}
}
}
>
{
({errors, touched, values}) => (
<Form className="flex flex-col gap-4 p-4 rounded-xl">
<div className="flex flex-col gap-2 w-full">
<p className="font-medium opacity-30">Property Type</p>
<Field as="input" type="text" name="propertyType"
placeholder="Property Type" value={values.PropertyType}
readOnly
className="border-2 p-3 opacity-30"
/>
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Full Name</p>
<Field as="input" type="text" value={values.FullName} name="FullName" placeholder="Full Name" className="border-2 p-3 w-full" />
{
errors.FullName && touched.FullName ? (
<div className="text-red-500 text-xs">
{errors.FullName}
</div>
):null
}
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Email</p>
<Field as="input" type="email" name="Email" value={values.Email} placeholder="Email" className="border-2 w-full p-3"/>
{
errors.Email && touched.Email ? (
<div className="text-red-500 text-xs">
{errors.Email}
</div>
):null
}
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Phone Number</p>
<Field as="input" type="text" name="Phone" value={values.Phone} placeholder="Phone Number" className="border-2 p-3 w-full"/>
{
errors.Phone && touched.Phone ? (
<div className="text-red-500 text-xs">
{errors.Phone}
</div>
):null
}
</div>
<div className="flex flex-col items-start gap-2 my-3">
<h3 className="my-5">House Details</h3>
<div className="flex flex-col items-start gap-2 w-full">
<p className="font-medium">Price (NPR)</p>
<Field as="input" type="text" min="0" name="Price" value={values.Price} placeholder="Enter your Price" className="border-2 p-3 w-full"/>
{
errors.Price && touched.Price ? (
<div className="text-red-500 text-xs">
{errors.Price}
</div>
):null
}
</div>
<div className="flex flex-col items-start gap-2 w-full">
<p className="font-medium">Faced On</p>
<Field as="input" type="text" name="FacedOn" value={values.FacedOn} placeholder="Enter which direction your house faces" className="border-2 p-3 w-full"/>
{
errors.FacedOn && touched.FacedOn ? (
<div className="text-red-500 text-xs">
{errors.FacedOn}
</div>
):null
}
</div>
<div className="flex flex-col items-start gap-2 w-full">
<p className="font-medium">Total Bedrooms</p>
<Field as="input" type="text" name="Bedrooms" value={values.Bedrooms} placeholder="Enter your Total Number of Bedrooms" className="border-2 p-3 w-full"/>
{
errors.Bedrooms && touched.Bedrooms ? (
<div className="text-red-500 text-xs">
{errors.Bedrooms}
</div>
):null
}
</div>
<div className="flex flex-col items-start gap-2 w-full">
<p className="font-medium">Total Living Rooms</p>
<Field as="input" type="text" name="LivingRoom" value={values.LivingRoom} placeholder="Enter your Total Number of Living Rooms" className="border-2 p-3 w-full"/>
{
errors.LivingRoom && touched.LivingRoom ? (
<div className="text-red-500 text-xs">
{errors.LivingRoom}
</div>
):null
}
</div>
<div className="flex flex-col items-start gap-2 w-full">
<p className="font-medium">Total Kitchen</p>
<Field as="input" type="text" name="kitchen" value={values.KitchenNo} placeholder="Enter your Total Number of Kitchen" className="border-2 p-3 w-full"/>
{
errors.KitchenNo && touched.KitchenNo ? (
<div className="text-red-500 text-xs">
{errors.KitchenNo}
</div>
):null
}
</div>
<div className="flex flex-col items-start gap-2 w-full">
<p className="font-medium">Total Store Rooms</p>
<Field as="input" type="text" name="Storeroom" placeholder="Enter your Total Number of Store Rooms" className="border-2 p-3 w-full"/>
{
errors.Storeroom && touched.Storeroom ? (
<div className="text-red-500 text-xs">
{errors.Storeroom}
</div>
):null
}
</div>
<div className="flex flex-col items-start gap-2 w-full">
<p className="font-medium">Total Land Area (Aana) </p>
<Field as="input" type="text" name="LandArea" placeholder="Enter your Total Land Area (Aana)" className="border-2 p-3 w-full"/>
{
errors.LandArea && touched.LandArea ? (
<div className="text-red-500 text-xs">
{errors.LandArea}
</div>
):null
}
</div>
<div className="flex flex-col items-start gap-2 w-full">
<p className="font-medium">Total Road Width (ft)</p>
<Field as="input" type="text" name="RoadWidth" placeholder="Enter the Road Width" className="border-2 p-3 w-full"/>
{
errors.RoadWidth && touched.RoadWidth ? (
<div className="text-red-500 text-xs">
{errors.RoadWidth}
</div>
):null
}
</div>
<div className="flex flex-col items-start gap-2 w-full">
<p className="font-medium">In which year was your house built?</p>
<Field as="input" type="text" name="YearBuilt" placeholder="Enter Year in BS" className="border-2 p-3 w-full"/>
{
errors.YearBuilt && touched.YearBuilt ? (
<div className="text-red-500 text-xs">
{errors.YearBuilt}
</div>
):null
}
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Is your house within Ring Road?</p>
<select
className="flex w-full items-center p-3 bg-slate-100 text-primary"
id="WithinRingRoad"
name="ringRoad"
>
<option value={1}>Yes</option>
<option value={0}>No</option>
</select>
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Does your house have parking facilities?</p>
<select
className="flex w-full items-center p-3 bg-slate-100 text-primary"
id="parkingFeature"
name="parking"
>
<option value={1}>Yes</option>
<option value={0}>No</option>
</select>
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Does your house have a garden?</p>
<select
className="flex w-full items-center p-3 bg-slate-100 text-primary"
id="gardenFeature"
name="garden"
>
<option value={1}>Yes</option>
<option value={0}>No</option>
</select>
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Does your house have a balcony?</p>
<select
className="flex w-full items-center p-3 bg-slate-100 text-primary"
id="balconyFeature"
name="balcony"
>
<option value={1}>Yes</option>
<option value={0}>No</option>
</select>
</div>
<h3 className="my-5">House Location Details</h3>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Country</p>
<Field as="input" type="text" name="Country" placeholder="Country" className="border-2 p-3 w-full"/>
{
errors.Country && touched.Country ? (
<div className="text-red-500 text-xs">
{errors.Country}
</div>
):null
}
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Province</p>
<Field as="input" type="text" name="Province" placeholder="Province" className="border-2 p-3 w-full"/>
{
errors.Province && touched.Province ? (
<div className="text-red-500 text-xs">
{errors.Province}
</div>
):null
}
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">District</p>
<Field as="input" type="text" name="District" placeholder="District" className="border-2 p-3 w-full"/>
{
errors.District && touched.District ? (
<div className="text-red-500 text-xs">
{errors.District}
</div>
):null
}
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Village_Nagarpalika</p>
<Field as="input" type="text" name="Village_Nagarpalika" placeholder="Enter Your Gaupalika or Nagarpalika" className="border-2 p-3 w-full"/>
{
errors.Village_Nagarpalika && touched.Village_Nagarpalika ? (
<div className="text-red-500 text-xs">
{errors.Village_Nagarpalika}
</div>
):null
}
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Ward Number</p>
<Field as="input" type="text" min="1" name="WardNo" placeholder="Enter the Ward Number" className="border-2 p-3 w-full"/>
{
errors.WardNo && touched.WardNo ? (
<div className="text-red-500 text-xs">
{errors.WardNo}
</div>
):null
}
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Tole</p>
<Field as="input" type="text" name="Tole" placeholder="Tole" className="border-2 p-3 w-full"/>
{
errors.Tole && touched.Tole ? (
<div className="text-red-500 text-xs">
{errors.Tole}
</div>
):null
}
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Latitude</p>
<Field as="input" type="text" name="Latitude" placeholder="Latitude" className="border-2 p-3 w-full"/>
{
errors.Latitude && touched.Latitude ? (
<div className="text-red-500 text-xs">
{errors.Latitude}
</div>
):null
}
</div>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Longitude</p>
<Field as="input" type="text" name="Longitude" placeholder="Longitude" className="border-2 p-3 w-full"/>
{
errors.Longitude && touched.Longitude ? (
<div className="text-red-500 text-xs">
{errors.Longitude}
</div>
):null
}
</div>
<h3 className="my-5">Leave a Message</h3>
<div className="flex flex-col gap-2 w-full">
<p className="font-medium">Your Message</p>
<Field as="textarea" rows="7" type="text" name="Message" placeholder="Enter Your Message" className="border-2 w-full p-3"/>
{
errors.Message && touched.Message ? (
<div className="text-red-500 text-xs">
{errors.Message}
</div>
):null
}
</div>
</div>
<button
type="submit"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
Submit
</button>
</Form>
)
}
</Formik>
<div className="hidden md:block bg-[url('../public/images/house.jpg')]" />
</div>
</Container>
)
};
House.Layout = Layout;
export default House;