bender/f7d9141a-25b4-4177-b8d9-c987afccea40
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add src/app/service-request/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-10 15:48:15 +00:00
parent 175ae4498f
commit e98c8c5d5f
1 changed files with 258 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/app/service-request/page.tsx Normal file
View File

@@ -0,0 +1,258 @@
"use client";
import { ThemeProvider } from "@/components/theme/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import { useState } from "react";
import { Upload } from "lucide-react";
const navItems = [
{ name: "Home", id: "/" },
{ name: "Membership", id: "/membership" },
{ name: "Services", id: "#services" },
{ name: "Dashboard", id: "/dashboard" },
];
interface ServiceRequestFormData {
memberName: string;
phone: string;
address: string;
membershipPlan: string;
issueType: string;
description: string;
photoFile: File | null;
}
export default function ServiceRequestPage() {
const [formData, setFormData] = useState<ServiceRequestFormData>({
memberName: "", phone: "", address: "", membershipPlan: "", issueType: "", description: "", photoFile: null,
});
const [submitted, setSubmitted] = useState(false);
const handleInputChange = (
e: React.ChangeEvent<
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
>
) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files[0]) {
setFormData((prev) => ({
...prev,
photoFile: e.target.files![0],
}));
}
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log("Service request submitted:", formData);
setSubmitted(true);
setTimeout(() => {
setFormData({
memberName: "", phone: "", address: "", membershipPlan: "", issueType: "", description: "", photoFile: null,
});
setSubmitted(false);
}, 3000);
};
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<NavbarStyleFullscreen
navItems={navItems}
brandName="OW HomeShield"
bottomLeftText="24/7 Support"
bottomRightText="support@owhomeshield.com"
/>
<div className="min-h-screen pt-20 pb-20 px-4">
<div className="max-w-2xl mx-auto">
<h1 className="text-4xl font-bold mb-4 text-center">
Service Request
</h1>
<p className="text-center text-foreground/70 mb-12">
Submit a service request and our team will respond within 24 hours.
</p>
<div className="bg-card rounded-lg p-8 border border-foreground/10">
{submitted ? (
<div className="text-center py-12">
<div className="text-5xl mb-4">✓</div>
<h2 className="text-2xl font-bold mb-2">
Service Request Submitted!
</h2>
<p className="text-foreground/70">
A technician will contact you within 24 hours.
</p>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
{/* Member Name */}
<div>
<label className="block text-sm font-medium mb-2">
Member Name *
</label>
<input
type="text"
name="memberName"
value={formData.memberName}
onChange={handleInputChange}
required
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
placeholder="John Doe"
/>
</div>
{/* Phone */}
<div>
<label className="block text-sm font-medium mb-2">
Phone Number *
</label>
<input
type="tel"
name="phone"
value={formData.phone}
onChange={handleInputChange}
required
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
placeholder="(555) 123-4567"
/>
</div>
{/* Address */}
<div>
<label className="block text-sm font-medium mb-2">
Service Address *
</label>
<input
type="text"
name="address"
value={formData.address}
onChange={handleInputChange}
required
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
placeholder="123 Main Street, City, State 12345"
/>
</div>
{/* Membership Plan */}
<div>
<label className="block text-sm font-medium mb-2">
Membership Plan *
</label>
<select
name="membershipPlan"
value={formData.membershipPlan}
onChange={handleInputChange}
required
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
>
<option value="">Select a plan</option>
<option value="basic">Basic Plan</option>
<option value="standard">Standard Plan</option>
<option value="premium">Premium Plan</option>
<option value="elite">Elite Plan</option>
</select>
</div>
{/* Issue Type */}
<div>
<label className="block text-sm font-medium mb-2">
Issue Type *
</label>
<select
name="issueType"
value={formData.issueType}
onChange={handleInputChange}
required
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
>
<option value="">Select issue type</option>
<option value="plumbing">Plumbing</option>
<option value="electrical">Electrical</option>
<option value="hvac">HVAC</option>
<option value="roofing">Roofing</option>
<option value="general">General Maintenance</option>
<option value="emergency">Emergency Repair</option>
</select>
</div>
{/* Description */}
<div>
<label className="block text-sm font-medium mb-2">
Issue Description *
</label>
<textarea
name="description"
value={formData.description}
onChange={handleInputChange}
required
rows={4}
className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
placeholder="Describe the issue in detail..."
/>
</div>
{/* Photo Upload */}
<div>
<label className="block text-sm font-medium mb-2">
Upload Photo (Optional)
</label>
<div className="border-2 border-dashed border-foreground/20 rounded-lg p-6 text-center hover:border-primary-cta transition-colors">
<input
type="file"
name="photo"
onChange={handleFileChange}
accept="image/*"
className="hidden"
id="photo-upload"
/>
<label
htmlFor="photo-upload"
className="cursor-pointer flex flex-col items-center gap-2"
>
<Upload className="w-8 h-8 text-primary-cta" />
<span className="text-sm font-medium">
{formData.photoFile
? formData.photoFile.name
: "Click to upload or drag and drop"}
</span>
<span className="text-xs text-foreground/50">
PNG, JPG, GIF up to 10MB
</span>
</label>
</div>
</div>
{/* Submit Button */}
<button
type="submit"
className="w-full bg-primary-cta text-white font-medium py-3 rounded-lg hover:opacity-90 transition-opacity"
>
Submit Service Request
</button>
</form>
)}
</div>
</div>
</div>
</ThemeProvider>
);
}