function MainComponent() { const [step, setStep] = React.useState(1); const [formValues, setFormValues] = React.useState({ houseSize: '', cleaningType: '' }); const [formErrors, setFormErrors] = React.useState({}); const [isSubmitting, setIsSubmitting] = React.useState(false); const handleChange = (e)=>{ setFormValues({ ...formValues, [e.target.name]: e.target.value }); }; const handleNext = (e)=>{ e.preventDefault(); setFormErrors(validate(formValues, step)); if (isValid(formErrors)) { setStep(2); } }; const handleSubmit = async (e)=>{ e.preventDefault(); const errors = validate(formValues, step); setFormErrors(errors); if (isValid(errors)) { setIsSubmitting(true); await fetch('/api/db/db1', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `cleaning_requests` (house_size, cleaning_type) VALUES (?, ?)", values: [ formValues.houseSize, formValues.cleaningType ] }), headers: { 'Content-Type': 'application/json' } }); setIsSubmitting(false); } }; function validate(values, step) { let errors = {}; if (step === 1) { if (!values.houseSize) { errors.houseSize = "House size is required"; } else if (values.houseSize <= 0) { errors.houseSize = "House size must be greater than 0"; } } else if (step === 2 && !values.cleaningType) { errors.cleaningType = "Select a cleaning type"; } return errors; } function isValid(errors) { return Object.keys(errors).length === 0; } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: step === 1 ? handleNext : handleSubmit, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, step === 1 && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "houseSize", className: "block text-gray-700 text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "How big is your house in SQ FT?"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "houseSize", id: "houseSize", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: "SQ FT", min: "0", value: formValues.houseSize, onChange: handleChange, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }), formErrors.houseSize && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs italic", __source: { fileName: "", lineNumber: 81, columnNumber: 38 }, __self: this }, formErrors.houseSize), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4f46e5] hover:bg-[#4338ca] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Next"))), step === 2 && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "What cleaning do you need?"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-between", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "cleaningType", value: "basic", id: "basicCleaning", className: "mr-2", checked: formValues.cleaningType === "basic", onChange: handleChange, __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "basicCleaning", className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, "Basic Cleaning")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "cleaningType", value: "deep", id: "deepCleaning", className: "mr-2", checked: formValues.cleaningType === "deep", onChange: handleChange, __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "deepCleaning", className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, "Deep Cleaning")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "cleaningType", value: "move", id: "moveCleaning", className: "mr-2", checked: formValues.cleaningType === "move", onChange: handleChange, __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "moveCleaning", className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }, "Move in/out Cleaning"))), formErrors.cleaningType && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs italic", __source: { fileName: "", lineNumber: 141, columnNumber: 41 }, __self: this }, formErrors.cleaningType), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4f46e5] hover:bg-[#4338ca] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", disabled: isSubmitting, __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, isSubmitting ? 'Submitting...' : 'Submit'))))); }