done
This commit is contained in:
omkieit
parent
4e938cd3a4
commit
cd02a6405b
|
|
@ -1,5 +1,19 @@
|
|||
import mongoose from "mongoose";
|
||||
|
||||
// Schema for property tax information
|
||||
const propertyTaxInfoSchema = mongoose.Schema({
|
||||
propertytaxowned: { type: String },
|
||||
ownedyear: { type: String },
|
||||
taxassessed: { type: String },
|
||||
taxyear: { type: String },
|
||||
});
|
||||
|
||||
// Schema for images
|
||||
const imageSchema = mongoose.Schema({
|
||||
title: { type: String }, // Title of the image
|
||||
file: { type: String }, // Uploaded image URL
|
||||
});
|
||||
|
||||
const propertySchema = mongoose.Schema({
|
||||
address: { type: String, required: true },
|
||||
city: { type: String, required: true },
|
||||
|
|
@ -10,9 +24,28 @@ const propertySchema = mongoose.Schema({
|
|||
subdivision: { type: String, required: true },
|
||||
legal: { type: String, required: true },
|
||||
propertyType: { type: String, required: true },
|
||||
title: {type: String, required: true },
|
||||
lotacres: { type: String, required: true },
|
||||
yearBuild: { type: String, required: true },
|
||||
totallivingsqft: { type: String, required: true },
|
||||
beds: { type: String, required: true },
|
||||
baths: { type: String, required: true },
|
||||
stories: { type: String, required: true },
|
||||
garage: { type: String, required: true },
|
||||
garagesqft: { type: String, required: true },
|
||||
poolspa: { type: String, required: true },
|
||||
fireplaces: { type: String, required: true },
|
||||
ac: { type: String, required: true },
|
||||
heating: { type: String, required: true },
|
||||
buildingstyle: { type: String, required: true },
|
||||
sitevacant: { type: String, required: true },
|
||||
extwall: { type: String, required: true },
|
||||
roofing: { type: String, required: true },
|
||||
totalSqft: { type: String, required: true },
|
||||
|
||||
// Remove individual property tax fields and replace with array
|
||||
propertyTaxInfo: [propertyTaxInfoSchema], // Array of tax info objects
|
||||
images: [imageSchema],
|
||||
googleMapLink: { type: String },
|
||||
userfirstname: String,
|
||||
usermiddlename: String,
|
||||
userlastname: String,
|
||||
|
|
@ -33,10 +66,8 @@ const propertySchema = mongoose.Schema({
|
|||
type: Number,
|
||||
default: new Date().getFullYear(),
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
const PropertyModal = mongoose.model("property", propertySchema);
|
||||
|
||||
export default PropertyModal;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -45,8 +45,8 @@
|
|||
|
||||
|
||||
|
||||
<script type="module" crossorigin src="/assets/index-VmwLz7OH.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CAj3mSy-.css">
|
||||
<script type="module" crossorigin src="/assets/index-Bapz8xqd.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DepkKhoc.css">
|
||||
</head>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"prop-types": "^15.8.1",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-file-base64": "^1.0.3",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-loading-icons": "^1.1.0",
|
||||
"react-redux": "^9.1.2",
|
||||
|
|
@ -972,6 +973,12 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/asap": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
|
||||
"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
|
|
@ -1174,6 +1181,23 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
|
||||
"integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
|
||||
"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/create-react-class": {
|
||||
"version": "15.7.0",
|
||||
"resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
|
||||
"integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.3.1",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"dev": true,
|
||||
|
|
@ -1333,6 +1357,15 @@
|
|||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/encoding": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
|
||||
"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"iconv-lite": "^0.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/es-abstract": {
|
||||
"version": "1.23.3",
|
||||
"dev": true,
|
||||
|
|
@ -1750,6 +1783,21 @@
|
|||
"reusify": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/fbjs": {
|
||||
"version": "0.8.18",
|
||||
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
|
||||
"integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"core-js": "^1.0.0",
|
||||
"isomorphic-fetch": "^2.1.1",
|
||||
"loose-envify": "^1.0.0",
|
||||
"object-assign": "^4.1.0",
|
||||
"promise": "^7.1.1",
|
||||
"setimmediate": "^1.0.5",
|
||||
"ua-parser-js": "^0.7.30"
|
||||
}
|
||||
},
|
||||
"node_modules/file-entry-cache": {
|
||||
"version": "8.0.0",
|
||||
"dev": true,
|
||||
|
|
@ -2056,6 +2104,18 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
||||
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"dev": true,
|
||||
|
|
@ -2346,6 +2406,15 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-stream": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
|
||||
"integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-string": {
|
||||
"version": "1.0.7",
|
||||
"dev": true,
|
||||
|
|
@ -2435,6 +2504,16 @@
|
|||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/isomorphic-fetch": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
|
||||
"integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"node-fetch": "^1.0.1",
|
||||
"whatwg-fetch": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/iterator.prototype": {
|
||||
"version": "1.1.2",
|
||||
"dev": true,
|
||||
|
|
@ -2675,6 +2754,16 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/node-fetch": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
|
||||
"integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"encoding": "^0.1.11",
|
||||
"is-stream": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/node-releases": {
|
||||
"version": "2.0.18",
|
||||
"dev": true,
|
||||
|
|
@ -2899,6 +2988,15 @@
|
|||
"integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/promise": {
|
||||
"version": "7.3.1",
|
||||
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
|
||||
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asap": "~2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
|
|
@ -2974,6 +3072,34 @@
|
|||
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-file-base64": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-file-base64/-/react-file-base64-1.0.3.tgz",
|
||||
"integrity": "sha512-itGMFH6IkJUZF2p0YXQnUBqzUHFaMYcs+ssD9e4j1XJGHRibGe8kiLr6y46oAIw1JknX/bJUUogDJOk/o91TMg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react": "^15.6.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-file-base64/node_modules/react": {
|
||||
"version": "15.7.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-15.7.0.tgz",
|
||||
"integrity": "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"create-react-class": "^15.6.0",
|
||||
"fbjs": "^0.8.9",
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.0",
|
||||
"prop-types": "^15.5.10"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
|
||||
|
|
@ -3267,6 +3393,12 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.2",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
|
||||
|
|
@ -3314,6 +3446,12 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/setimmediate": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
|
||||
"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"dev": true,
|
||||
|
|
@ -3581,6 +3719,32 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/ua-parser-js": {
|
||||
"version": "0.7.39",
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
|
||||
"integrity": "sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/ua-parser-js"
|
||||
},
|
||||
{
|
||||
"type": "paypal",
|
||||
"url": "https://paypal.me/faisalman"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/faisalman"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"ua-parser-js": "script/cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/unbox-primitive": {
|
||||
"version": "1.0.2",
|
||||
"dev": true,
|
||||
|
|
@ -3708,6 +3872,12 @@
|
|||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/whatwg-fetch": {
|
||||
"version": "3.6.20",
|
||||
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
|
||||
"integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"dev": true,
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"prop-types": "^15.8.1",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-file-base64": "^1.0.3",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-loading-icons": "^1.1.0",
|
||||
"react-redux": "^9.1.2",
|
||||
|
|
|
|||
|
|
@ -63,6 +63,6 @@
|
|||
padding: 20px;
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
background-color: #f9f9f9; /* Optional: light background for better contrast */
|
||||
background-color: #f3eded; /* Optional: light background for better contrast */
|
||||
}
|
||||
|
||||
|
|
@ -4,17 +4,18 @@ import { useState, useEffect } from "react";
|
|||
import Navbar from "./Navbar";
|
||||
import { toast } from "react-toastify";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
import FileBase64 from "react-file-base64";
|
||||
import "../addproperty.css";
|
||||
|
||||
const Addproperty = () => {
|
||||
const [activeTab, setActiveTab] = useState("propertydetails");
|
||||
|
||||
const handleContinue = () => {
|
||||
if (activeTab === "propertydetails") setActiveTab("shipping");
|
||||
if (activeTab === "propertydetails") setActiveTab("Images");
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (activeTab === "shipping") setActiveTab("propertydetails");
|
||||
if (activeTab === "Images") setActiveTab("propertydetails");
|
||||
};
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
|
@ -31,20 +32,84 @@ const Addproperty = () => {
|
|||
subdivision: "",
|
||||
legal: "",
|
||||
propertyType: "",
|
||||
title: "",
|
||||
lotacres: "",
|
||||
yearBuild: "",
|
||||
totalSqft: "", // Used in the shipping tab
|
||||
totallivingsqft: "",
|
||||
beds: "",
|
||||
baths: "",
|
||||
stories: "",
|
||||
garage: "",
|
||||
garagesqft: "",
|
||||
poolspa: "",
|
||||
fireplaces: "",
|
||||
ac: "",
|
||||
heating: "",
|
||||
buildingstyle: "",
|
||||
sitevacant: "",
|
||||
extwall: "",
|
||||
roofing: "",
|
||||
propertyTaxInfo: [
|
||||
{ propertytaxowned: "", ownedyear: "", taxassessed: "", taxyear: "" },
|
||||
],
|
||||
images: [], // Array to hold image objects
|
||||
googleMapLink: "", // Field for Google Maps link
|
||||
totalSqft: "",
|
||||
});
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const handleImageChange = (file, index) => {
|
||||
const updatedImages = [...formData.images];
|
||||
updatedImages[index].file = file.base64; // store base64 format of image
|
||||
setFormData({ ...formData, images: updatedImages });
|
||||
};
|
||||
|
||||
const handleAddImage = () => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value,
|
||||
images: [...formData.images, { title: "", file: "" }],
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteImage = (index) => {
|
||||
const updatedImages = formData.images.filter((_, i) => i !== index);
|
||||
setFormData({ ...formData, images: updatedImages });
|
||||
};
|
||||
|
||||
const handleImageTitleChange = (index, e) => {
|
||||
const updatedImages = [...formData.images];
|
||||
updatedImages[index].title = e.target.value;
|
||||
setFormData({ ...formData, images: updatedImages });
|
||||
};
|
||||
|
||||
const handleInputChange = (e, index, fieldName) => {
|
||||
const { name, value } = e.target;
|
||||
if (fieldName === "propertyTaxInfo") {
|
||||
const updatedPropertyTaxInfo = [...formData.propertyTaxInfo];
|
||||
updatedPropertyTaxInfo[index][name] = value;
|
||||
setFormData({ ...formData, propertyTaxInfo: updatedPropertyTaxInfo });
|
||||
} else {
|
||||
setFormData({ ...formData, [name]: value });
|
||||
}
|
||||
};
|
||||
|
||||
const addPropertyTaxField = () => {
|
||||
setFormData({
|
||||
...formData,
|
||||
propertyTaxInfo: [
|
||||
...formData.propertyTaxInfo,
|
||||
{ propertytaxowned: "", ownedyear: "", taxassessed: "", taxyear: "" },
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
const deletePropertyTaxField = (index) => {
|
||||
const updatedPropertyTaxInfo = formData.propertyTaxInfo.filter(
|
||||
(_, i) => i !== index
|
||||
);
|
||||
setFormData({ ...formData, propertyTaxInfo: updatedPropertyTaxInfo });
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (
|
||||
formData.address &&
|
||||
|
|
@ -56,11 +121,25 @@ const Addproperty = () => {
|
|||
formData.subdivision &&
|
||||
formData.legal &&
|
||||
formData.propertyType &&
|
||||
formData.title &&
|
||||
formData.lotacres &&
|
||||
formData.yearBuild &&
|
||||
formData.totallivingsqft &&
|
||||
formData.beds &&
|
||||
formData.baths &&
|
||||
formData.stories &&
|
||||
formData.garage &&
|
||||
formData.garagesqft &&
|
||||
formData.poolspa &&
|
||||
formData.fireplaces &&
|
||||
formData.ac &&
|
||||
formData.heating &&
|
||||
formData.buildingstyle &&
|
||||
formData.sitevacant &&
|
||||
formData.extwall &&
|
||||
formData.roofing &&
|
||||
formData.totalSqft
|
||||
) {
|
||||
// Add user info to formData
|
||||
// Add user info to formData, including the propertyTaxInfo array
|
||||
const formDataWithUserInfo = {
|
||||
...formData,
|
||||
userfirstname: user?.result?.firstName,
|
||||
|
|
@ -71,6 +150,16 @@ const Addproperty = () => {
|
|||
userId: user?.result?.userId,
|
||||
};
|
||||
|
||||
// Check if propertyTaxInfo is an array and has values
|
||||
if (
|
||||
Array.isArray(formData.propertyTaxInfo) &&
|
||||
formData.propertyTaxInfo.length > 0
|
||||
) {
|
||||
formDataWithUserInfo.propertyTaxInfo = formData.propertyTaxInfo; // Include propertyTaxInfo
|
||||
} else {
|
||||
formDataWithUserInfo.propertyTaxInfo = []; // Ensure it's an empty array if not filled
|
||||
}
|
||||
|
||||
// Dispatch the form data with user info
|
||||
dispatch(submitProperty(formDataWithUserInfo));
|
||||
setSubmitted(true);
|
||||
|
|
@ -116,10 +205,10 @@ const Addproperty = () => {
|
|||
</li>
|
||||
<li
|
||||
role="presentation"
|
||||
className={activeTab === "shipping" ? "active tab" : "tab"}
|
||||
className={activeTab === "Images" ? "active tab" : "tab"}
|
||||
>
|
||||
<a onClick={() => setActiveTab("shipping")} role="tab">
|
||||
Delivery Address
|
||||
<a onClick={() => setActiveTab("Images")} role="tab">
|
||||
Images, Maps
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -127,12 +216,22 @@ const Addproperty = () => {
|
|||
<div className="tab-content">
|
||||
{activeTab === "propertydetails" && (
|
||||
<div role="tabpanel" className="tab-pane active">
|
||||
|
||||
<form>
|
||||
<h3>Property Location</h3>
|
||||
<h3
|
||||
style={{
|
||||
color: "#fda417",
|
||||
border: "#fda417",
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Property Location
|
||||
</h3>
|
||||
<hr />
|
||||
<div className="row gy-3">
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Property Address
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -142,11 +241,11 @@ const Addproperty = () => {
|
|||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
<label htmlFor="title">Property Address</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
City
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -156,10 +255,11 @@ const Addproperty = () => {
|
|||
placeholder="city"
|
||||
required
|
||||
/>
|
||||
<label htmlFor="title">City</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
State
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="state"
|
||||
|
|
@ -168,17 +268,66 @@ const Addproperty = () => {
|
|||
required
|
||||
>
|
||||
<option value="">Please Select State</option>
|
||||
<option value="Residential">Residential</option>
|
||||
<option value="Land">Land</option>
|
||||
<option value="Commercial">Commercial</option>
|
||||
<option value="Industrial">Industrial</option>
|
||||
<option value="Water">Water</option>
|
||||
<option value="Alaska">Alaska</option>
|
||||
<option value="Alabama">Alabama</option>
|
||||
<option value="Arkansas">Arkansas</option>
|
||||
<option value="Arizona">Arizona</option>
|
||||
<option value="California">California</option>
|
||||
<option value="Colorado">Colorado</option>
|
||||
<option value="Connecticut">Connecticut</option>
|
||||
<option value="District Of Columbia">
|
||||
District Of Columbia
|
||||
</option>
|
||||
<option value="Delaware">Delaware</option>
|
||||
<option value="Florida">Florida</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Hawaii">Hawaii</option>
|
||||
<option value="Iowa">Iowa</option>
|
||||
<option value="Idaho">Idaho</option>
|
||||
<option value="Illinois">Illinois</option>
|
||||
<option value="Indiana">Indiana</option>
|
||||
<option value="Kansas">Kansas</option>
|
||||
<option value="Kentucky">Kentucky</option>
|
||||
<option value="Louisiana">Louisiana</option>
|
||||
<option value="Massachusetts">Massachusetts</option>
|
||||
<option value="Maryland">Maryland</option>
|
||||
<option value="Michigan">Michigan</option>
|
||||
<option value="Minnesota">Minnesota</option>
|
||||
<option value="Missouri">Missouri</option>
|
||||
<option value="Mississippi">Mississippi</option>
|
||||
<option value="Montana">Montana</option>
|
||||
<option value="North Carolina">North Carolina</option>
|
||||
<option value="North Dakota">North Dakota</option>
|
||||
<option value="Nebraska">Nebraska</option>
|
||||
<option value="New Hampshire">New Hampshire</option>
|
||||
<option value="New Jersey">New Jersey</option>
|
||||
<option value="New Mexico">New Mexico</option>
|
||||
<option value="Nevada">Nevada</option>
|
||||
<option value="New York">New York</option>
|
||||
<option value="Ohio">Ohio</option>
|
||||
<option value="Oklahoma">Oklahoma</option>
|
||||
<option value="Oregon">Oregon</option>
|
||||
<option value="Pennsylvania">Pennsylvania</option>
|
||||
<option value="Rhode Island">Rhode Island</option>
|
||||
<option value="South Carolina">South Carolina</option>
|
||||
<option value="South Dakota">South Dakota</option>
|
||||
<option value="Tennessee">Tennessee</option>
|
||||
<option value="Texas">Texas</option>
|
||||
<option value="Utah">Utah</option>
|
||||
<option value="Virginia">Virginia</option>
|
||||
<option value="Vermont">Vermont</option>
|
||||
<option value="Washington">Washington</option>
|
||||
<option value="Wisconsin">Wisconsin</option>
|
||||
<option value="West Virginia">West Virginia</option>
|
||||
<option value="Wyoming">Wyoming</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row gy-3">
|
||||
<div className="col-md-4">
|
||||
County
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="county"
|
||||
|
|
@ -187,15 +336,57 @@ const Addproperty = () => {
|
|||
required
|
||||
>
|
||||
<option value="">Please Select County</option>
|
||||
<option value="Residential">Residential</option>
|
||||
<option value="Land">Land</option>
|
||||
<option value="Commercial">Commercial</option>
|
||||
<option value="Industrial">Industrial</option>
|
||||
<option value="Water">Water</option>
|
||||
<option value="Abbeville">Abbeville</option>
|
||||
<option value="Aiken">Aiken</option>
|
||||
<option value="Allendale">Allendale</option>
|
||||
<option value="Anderson">Anderson</option>
|
||||
<option value="Bamberg">Bamberg</option>
|
||||
<option value="Barnwell">Barnwell</option>
|
||||
<option value="Beaufort">Beaufort</option>
|
||||
<option value="Berkeley">Berkeley</option>
|
||||
<option value="Calhoun">Calhoun</option>
|
||||
<option value="Charleston">Charleston</option>
|
||||
<option value="Cherokee">Cherokee</option>
|
||||
<option value="Chester">Chester</option>
|
||||
<option value="Chesterfield">Chesterfield</option>
|
||||
<option value="Clarendon">Clarendon</option>
|
||||
<option value="Colleton">Colleton</option>
|
||||
<option value="Darlington">Darlington</option>
|
||||
<option value="Dillon">Dillon</option>
|
||||
<option value="Dorchester">Dorchester</option>
|
||||
<option value="Edgefield">Edgefield</option>
|
||||
<option value="Fairfield">Fairfield</option>
|
||||
<option value="Florence">Florence</option>
|
||||
<option value="Georgetown">Georgetown</option>
|
||||
<option value="Greenville">Greenville</option>
|
||||
<option value="Greenwood">Greenwood</option>
|
||||
<option value="Hampton">Hampton</option>
|
||||
<option value="Horry">Horry</option>
|
||||
<option value="Jasper">Jasper</option>
|
||||
<option value="Kershaw">Kershaw</option>
|
||||
<option value="Lancaster">Lancaster</option>
|
||||
<option value="Laurens">Laurens</option>
|
||||
<option value="Lee">Lee</option>
|
||||
<option value="Lexington">Lexington</option>
|
||||
<option value="Marion">Marion</option>
|
||||
<option value="Marlboro">Marlboro</option>
|
||||
<option value="McCormick">McCormick</option>
|
||||
<option value="Newberry">Newberry</option>
|
||||
<option value="Oconee">Oconee</option>
|
||||
<option value="Orangeburg">Orangeburg</option>
|
||||
<option value="Pickens">Pickens</option>
|
||||
<option value="Richland">Richland</option>
|
||||
<option value="Saluda">Saluda</option>
|
||||
<option value="Spartanburg">Spartanburg</option>
|
||||
<option value="Sumter">Sumter</option>
|
||||
<option value="Union">Union</option>
|
||||
<option value="Williamsburg">Williamsburg</option>
|
||||
<option value="York">York</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Zip
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -205,11 +396,11 @@ const Addproperty = () => {
|
|||
placeholder="zip"
|
||||
required
|
||||
/>
|
||||
<label htmlFor="zip">Zip</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Parcel
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -219,16 +410,14 @@ const Addproperty = () => {
|
|||
placeholder="parcel"
|
||||
required
|
||||
/>
|
||||
<label htmlFor="parcel">Parcel</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="row gy-3">
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Sub division
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -238,11 +427,11 @@ const Addproperty = () => {
|
|||
placeholder="subdivision"
|
||||
required
|
||||
/>
|
||||
<label htmlFor="subdivision">Sub division</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Legal Description
|
||||
<textarea
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -252,14 +441,13 @@ const Addproperty = () => {
|
|||
placeholder="legal"
|
||||
required
|
||||
/>
|
||||
<label htmlFor="legal">Legal Description</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="row gy-3">
|
||||
<div className="col-md-4">
|
||||
Please Select Property Type
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="propertyType"
|
||||
|
|
@ -277,20 +465,21 @@ const Addproperty = () => {
|
|||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Lot Acres/Sqft
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="title"
|
||||
value={formData.title}
|
||||
name="lotacres"
|
||||
value={formData.lotacres}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Property Title"
|
||||
placeholder="Lot Acres/Sqft"
|
||||
required
|
||||
/>
|
||||
<label htmlFor="title">Property Title</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Year Build
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -300,30 +489,325 @@ const Addproperty = () => {
|
|||
placeholder="Year Build"
|
||||
required
|
||||
/>
|
||||
<label htmlFor="yearBuild">Year Build</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
<button
|
||||
className="btn btn-primary continue"
|
||||
onClick={handleContinue}
|
||||
style={{ backgroundColor: "#fda417", border: "#fda417" }}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{activeTab === "shipping" && (
|
||||
<div role="tabpanel" className="tab-pane active">
|
||||
<h3>Shipping Address</h3>
|
||||
<form>
|
||||
<div className="row gy-3">
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Total Living SQFT
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="totallivingsqft"
|
||||
value={formData.totallivingsqft}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Total Living SQFT"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Beds
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="beds"
|
||||
value={formData.beds}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Beds"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Baths
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="baths"
|
||||
value={formData.baths}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Baths"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row gy-3">
|
||||
<div className="col-md-4">
|
||||
Please Select Stories
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="stories"
|
||||
value={formData.stories}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
>
|
||||
<option value="">Please Select Stories</option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
Please Select Garage
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="garage"
|
||||
value={formData.garage}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
>
|
||||
<option value="">Please Select Garage</option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Garage SQFT
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="garagesqft"
|
||||
value={formData.garagesqft}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Garage SQFT"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row gy-3">
|
||||
<div className="col-md-4">
|
||||
Please Select Pool/SPA
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="poolspa"
|
||||
value={formData.poolspa}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
>
|
||||
<option value="">Please Select Pool/SPA</option>
|
||||
<option value="N/A">N/A</option>
|
||||
<option value="Yes- Pool Only">Yes- Pool Only</option>
|
||||
<option value="Yes- SPA only">Yes- SPA only</option>
|
||||
<option value="Yes - Both Pool and SPA">
|
||||
Yes - Both Pool and SPA
|
||||
</option>
|
||||
<option value="4">None</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
Please Select Fire places
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="fireplaces"
|
||||
value={formData.fireplaces}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
>
|
||||
<option value="">Please Select Fire places</option>
|
||||
<option value="N/A">N/A</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
Please Select A/C
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="ac"
|
||||
value={formData.ac}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
>
|
||||
<option value="">Please Select A/C</option>
|
||||
<option value="N/A">N/A</option>
|
||||
<option value="Central">Central</option>
|
||||
<option value="Heat Pump">Heat Pump</option>
|
||||
<option value="Warm Air">Warm Air</option>
|
||||
<option value="Forced Air">Forced Air</option>
|
||||
<option value="Gas">Gas</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row gy-3">
|
||||
<div className="col-md-4">
|
||||
Please Select Heating
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="heating"
|
||||
value={formData.heating}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
>
|
||||
<option value="">Please Select Heating</option>
|
||||
<option value="N/A">N/A</option>
|
||||
<option value="Central">Central</option>
|
||||
<option value="Heat Pump">Heat Pump</option>
|
||||
<option value="Warm Air">Warm Air</option>
|
||||
<option value="Forced Air">Forced Air</option>
|
||||
<option value="Gas">Gas</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
Please Select Building Style
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="buildingstyle"
|
||||
value={formData.buildingstyle}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
>
|
||||
<option value="">Please Select Building Style</option>
|
||||
<option value="One Story">One Story</option>
|
||||
<option value="Craftsman">Craftsman</option>
|
||||
<option value="Log/Cabin">Log/Cabin</option>
|
||||
<option value="Split-Level">Split-Level</option>
|
||||
<option value="Split-Foyer">Split-Foyer</option>
|
||||
<option value="Stick Built">Stick Built</option>
|
||||
<option value="Single wide">Single wide</option>
|
||||
<option value="Double wide">Double wide</option>
|
||||
<option value="Duplex">Duplex</option>
|
||||
<option value="Triplex">Triplex</option>
|
||||
<option value="Quadruplex">Quadruplex</option>
|
||||
<option value="Two Story">Two Story</option>
|
||||
<option value="Victorian">Victorian</option>
|
||||
<option value="Tudor">Tudor</option>
|
||||
<option value="Modern">Modern</option>
|
||||
<option value="Art Deco">Art Deco</option>
|
||||
<option value="Bungalow">Bungalow</option>
|
||||
<option value="Mansion">Mansion</option>
|
||||
<option value="Farmhouse">Farmhouse</option>
|
||||
<option value="Conventional">Conventional</option>
|
||||
<option value="Ranch">Ranch</option>
|
||||
<option value="Ranch with Basement">
|
||||
Ranch with Basement
|
||||
</option>
|
||||
<option value="Cape Cod">Cape Cod</option>
|
||||
<option value="Contemporary">Contemporary</option>
|
||||
<option value="Colonial">Colonial</option>
|
||||
<option value="Mediterranean">Mediterranean</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
Site Vacant
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="sitevacant"
|
||||
value={formData.sitevacant}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
>
|
||||
<option value="">Site Vacant</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row gy-3">
|
||||
<div className="col-md-4">
|
||||
Please Select Ext Wall
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="extwall"
|
||||
value={formData.extwall}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
>
|
||||
<option value="">Please Select Ext Wall</option>
|
||||
<option value="N/A">N/A</option>
|
||||
<option value="Brick">Brick</option>
|
||||
<option value="Brick/Vinyl Siding">
|
||||
Brick/Vinyl Siding
|
||||
</option>
|
||||
<option value="Wood/Vinyl Siding">
|
||||
Wood/Vinyl Siding
|
||||
</option>
|
||||
<option value="Brick/Wood Siding">
|
||||
Brick/Wood Siding
|
||||
</option>
|
||||
<option value="Stone">Stone</option>
|
||||
<option value="Masonry">Masonry</option>
|
||||
<option value="Metal">Metal</option>
|
||||
<option value="Fiberboard">Fiberboard</option>
|
||||
<option value="Asphalt Siding">Asphalt Siding</option>
|
||||
<option value="Concrete Block">Concrete Block</option>
|
||||
<option value="Gable">Gable</option>
|
||||
<option value="Brick Veneer">Brick Veneer</option>
|
||||
<option value="Frame">Frame</option>
|
||||
<option value="Siding">Siding</option>
|
||||
<option value="Cement/Wood Fiber Siding">
|
||||
Cement/Wood Fiber Siding
|
||||
</option>
|
||||
<option value="Fiber/Cement Siding">
|
||||
Fiber/Cement Siding
|
||||
</option>
|
||||
<option value="Wood Siding">Wood Siding</option>
|
||||
<option value="Vinyl Siding">Vinyl Siding</option>
|
||||
<option value="Aluminium Siding">Aluminium Siding</option>
|
||||
<option value="Wood/Vinyl Siding">
|
||||
Alum/Vinyl Siding
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
Please Select Roofing
|
||||
<select
|
||||
className="form-floating mb-3 form-control"
|
||||
name="roofing"
|
||||
value={formData.roofing}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
>
|
||||
<option value="">Please Select Roofing</option>
|
||||
<option value="N/A">N/A</option>
|
||||
<option value="Asphalt Shingle">Asphalt Shingle</option>
|
||||
<option value="Green Roofs">Green Roofs</option>
|
||||
<option value="Built-up Roofing">Built-up Roofing</option>
|
||||
<option value="Composition Shingle">
|
||||
Composition Shingle
|
||||
</option>
|
||||
<option value="Composition Shingle Heavy">
|
||||
Composition Shingle Heavy
|
||||
</option>
|
||||
<option value="Solar tiles">Solar tiles</option>
|
||||
<option value="Metal">Metal</option>
|
||||
<option value="Stone-coated steel">
|
||||
Stone-coated steel
|
||||
</option>
|
||||
<option value="Slate">Slate</option>
|
||||
<option value="Rubber Slate">Rubber Slate</option>
|
||||
<option value="Clay and Concrete tiles">
|
||||
Clay and Concrete tiles
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="form-floating mb-3">
|
||||
Total SQFT
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -333,10 +817,229 @@ const Addproperty = () => {
|
|||
placeholder="Total SQFT"
|
||||
required
|
||||
/>
|
||||
<label htmlFor="totalSqft">Total SQFT</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
style={{
|
||||
color: "#fda417",
|
||||
border: "#fda417",
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
<br />
|
||||
Property Tax Information
|
||||
</h3>
|
||||
<hr />
|
||||
|
||||
{formData.propertyTaxInfo.map((taxInfo, index) => (
|
||||
<div className="row gy-4" key={index}>
|
||||
<div className="col-md-3">
|
||||
<div className="form-floating mb-3">
|
||||
Property Tax Owned
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="propertytaxowned"
|
||||
placeholder="Property Tax Owned"
|
||||
value={taxInfo.propertytaxowned}
|
||||
onChange={(e) =>
|
||||
handleInputChange(e, index, "propertyTaxInfo")
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<div className="form-floating mb-2">
|
||||
Owed Year
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="ownedyear"
|
||||
placeholder="Owed Year"
|
||||
value={taxInfo.ownedyear}
|
||||
onChange={(e) =>
|
||||
handleInputChange(e, index, "propertyTaxInfo")
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<div className="form-floating mb-2">
|
||||
Tax Assessed
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="taxassessed"
|
||||
placeholder="Tax Assessed"
|
||||
value={taxInfo.taxassessed}
|
||||
onChange={(e) =>
|
||||
handleInputChange(e, index, "propertyTaxInfo")
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<div className="form-floating mb-2">
|
||||
Tax Year
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="taxyear"
|
||||
placeholder="Tax Year"
|
||||
value={taxInfo.taxyear}
|
||||
onChange={(e) =>
|
||||
handleInputChange(e, index, "propertyTaxInfo")
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-3">
|
||||
<div className="form-floating mb-2">
|
||||
<br />
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={() => deletePropertyTaxField(index)}
|
||||
style={{ height: "25px", width: "35px" }}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Adjusting the delete button column */}
|
||||
{/* <div className="col-md-1 d-flex align-items-center">
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={() => deletePropertyTaxField(index)}
|
||||
style={{ height: "40px", width: "40px" }}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
</div> */}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={addPropertyTaxField}
|
||||
>
|
||||
+ Add Another Property Tax Info
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<button
|
||||
className="btn btn-primary continue"
|
||||
onClick={handleContinue}
|
||||
style={{ backgroundColor: "#fda417", border: "#fda417" }}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "Images" && (
|
||||
<div role="tabpanel" className="tab-pane active">
|
||||
<h3
|
||||
style={{
|
||||
color: "#fda417",
|
||||
border: "#fda417",
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Upload Images{" "}
|
||||
</h3>
|
||||
<form>
|
||||
{formData.images.map((image, index) => (
|
||||
<div key={index} className="row gy-3">
|
||||
<div className="col-md-4">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={image.title}
|
||||
placeholder="Image Title"
|
||||
onChange={(e) => handleImageTitleChange(index, e)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<FileBase64
|
||||
multiple={false}
|
||||
onDone={(file) => handleImageChange(file, index)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
onClick={() => handleDeleteImage(index)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{image.file && (
|
||||
<div className="col-md-12">
|
||||
<img
|
||||
src={image.file}
|
||||
alt="uploaded"
|
||||
style={{ width: "150px", height: "150px" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={handleAddImage}
|
||||
style={{ backgroundColor: "#fda417", border: "#fda417" }}
|
||||
>
|
||||
+ Add Image
|
||||
</button>
|
||||
|
||||
<hr />
|
||||
<div className="mb-3">
|
||||
<label htmlFor="googleMapLink" className="form-label">
|
||||
<h3
|
||||
style={{
|
||||
color: "#fda417",
|
||||
border: "#fda417",
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Google Maps Link{" "}
|
||||
</h3>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="googleMapLink"
|
||||
value={formData.googleMapLink}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Google Maps link"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{formData.googleMapLink && (
|
||||
<iframe
|
||||
title="Google Map"
|
||||
width="100%"
|
||||
height="300"
|
||||
src={`https://www.google.com/maps/embed/v1/view?key=YOUR_API_KEY¢er=${formData.googleMapLink}&zoom=10`}
|
||||
frameBorder="0"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
)}
|
||||
</form>
|
||||
<button
|
||||
className="btn btn-primary back"
|
||||
|
|
|
|||
Loading…
Reference in New Issue