300 lines
11 KiB
JavaScript
300 lines
11 KiB
JavaScript
import { useState } from 'react'
|
|
import { useMutation } from '@tanstack/react-query'
|
|
import { toast } from 'sonner'
|
|
import { Button } from '@/components/ui/Button'
|
|
import { Input } from '@/components/ui/Input'
|
|
import { Textarea } from '@/components/ui/Textarea'
|
|
import { Select } from '@/components/ui/Select'
|
|
import { api } from '@/lib/api'
|
|
|
|
const Support = () => {
|
|
const [formState, setFormState] = useState({
|
|
name: '',
|
|
company: '',
|
|
email: '',
|
|
phone: '',
|
|
issue: '',
|
|
priority: 'medium',
|
|
})
|
|
const [errors, setErrors] = useState({
|
|
name: '',
|
|
company: '',
|
|
email: '',
|
|
issue: '',
|
|
})
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: (data) => api.post('/support', data),
|
|
onSuccess: () => {
|
|
toast.success('Thanks! We\'ll get back to you soon.')
|
|
setFormState({
|
|
name: '',
|
|
company: '',
|
|
email: '',
|
|
phone: '',
|
|
issue: '',
|
|
priority: 'medium',
|
|
})
|
|
setErrors({
|
|
name: '',
|
|
company: '',
|
|
email: '',
|
|
issue: '',
|
|
})
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || 'Failed to submit form. Please try again.')
|
|
},
|
|
})
|
|
|
|
const validateForm = () => {
|
|
const newErrors = {
|
|
name: '',
|
|
company: '',
|
|
email: '',
|
|
issue: '',
|
|
}
|
|
|
|
// Validate required fields
|
|
if (!formState.name.trim()) newErrors.name = 'Name is required'
|
|
if (!formState.company.trim()) newErrors.company = 'Company name is required'
|
|
if (!formState.issue.trim()) newErrors.issue = 'Please describe your issue'
|
|
|
|
// Validate email format
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
|
if (!formState.email.trim()) {
|
|
newErrors.email = 'Email is required'
|
|
} else if (!emailRegex.test(formState.email)) {
|
|
newErrors.email = 'Please enter a valid email address'
|
|
}
|
|
|
|
// Validate issue minimum length (10 chars matches server-side Zod rule)
|
|
if (formState.issue.trim().length < 10) {
|
|
newErrors.issue = 'Issue description must be at least 10 characters'
|
|
}
|
|
|
|
const hasErrors = Object.values(newErrors).some(error => error !== '')
|
|
setErrors(newErrors)
|
|
|
|
if (hasErrors) {
|
|
toast.error('Please fix the errors in the form')
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault()
|
|
if (!validateForm()) return
|
|
mutation.mutate(formState)
|
|
}
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target
|
|
setFormState(prev => ({ ...prev, [name]: value }))
|
|
// Clear error for this field as user types
|
|
if (errors[name]) {
|
|
setErrors(prev => ({ ...prev, [name]: '' }))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-16 md:py-24">
|
|
{/* Page Hero */}
|
|
<section className="mb-16">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Support</h1>
|
|
<p className="text-xl text-soft-text max-w-3xl">
|
|
Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly.
|
|
</p>
|
|
</section>
|
|
|
|
{/* Support Form */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
{/* Left - Info */}
|
|
<div>
|
|
<div className="mb-8">
|
|
<h2 className="text-2xl font-bold text-primary-navy mb-4">Support Services</h2>
|
|
<p className="text-soft-text mb-6">
|
|
We provide comprehensive support for all our services, including 24/7 monitoring, rapid response, and dedicated support engineers.
|
|
</p>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="font-semibold text-text mb-2">Visit Support Center</h3>
|
|
<a
|
|
href="https://queuenorth.zoho.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center justify-center px-4 py-2 bg-primary-navy text-white font-medium rounded-md hover:bg-navy-darker transition-colors text-sm"
|
|
>
|
|
Visit Support Center
|
|
<svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-text mb-2">Phone</h3>
|
|
<p className="text-soft-text">(906) 482-6616</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-text mb-2">Support Hours</h3>
|
|
<p className="text-soft-text">24/7 Monitoring with rapid response SLAs</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-text mb-2">Priority Levels</h3>
|
|
<p className="text-soft-text">
|
|
Low: General inquiries (response within 24 hours)<br/>
|
|
Medium: Standard issues (response within 4 hours)<br/>
|
|
High: Critical issues (response within 1 hour)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-section-alt rounded-lg p-6">
|
|
<h3 className="font-semibold text-primary-navy mb-4">What We Support</h3>
|
|
<ul className="space-y-3">
|
|
{[
|
|
'8x8 Communications Platform',
|
|
'VoIP Phone Systems',
|
|
'Contact Center Solutions',
|
|
'Network Infrastructure',
|
|
'Cloud Migration Support',
|
|
].map((item, index) => (
|
|
<li key={index} className="flex items-center gap-3 text-text">
|
|
<svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right - Form */}
|
|
<div>
|
|
<form onSubmit={handleSubmit} className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-text mb-2">
|
|
Name <span className="text-red-600">*</span>
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formState.name}
|
|
onChange={handleChange}
|
|
required
|
|
placeholder="Your full name"
|
|
className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
|
/>
|
|
{errors.name && (
|
|
<p className="text-xs text-red-600 mt-1">{errors.name}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="company" className="block text-sm font-medium text-text mb-2">
|
|
Company Name <span className="text-red-600">*</span>
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
id="company"
|
|
name="company"
|
|
value={formState.company}
|
|
onChange={handleChange}
|
|
required
|
|
placeholder="Your company name"
|
|
className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
|
/>
|
|
{errors.company && (
|
|
<p className="text-xs text-red-600 mt-1">{errors.company}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-text mb-2">
|
|
Email <span className="text-red-600">*</span>
|
|
</label>
|
|
<Input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value={formState.email}
|
|
onChange={handleChange}
|
|
required
|
|
placeholder="your.email@example.com"
|
|
className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
|
/>
|
|
{errors.email && (
|
|
<p className="text-xs text-red-600 mt-1">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
|
|
Phone (Optional)
|
|
</label>
|
|
<Input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
value={formState.phone}
|
|
onChange={handleChange}
|
|
placeholder="(555) 123-4567"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="priority" className="block text-sm font-medium text-text mb-2">
|
|
Priority <span className="text-red-600">*</span>
|
|
</label>
|
|
<Select
|
|
id="priority"
|
|
name="priority"
|
|
value={formState.priority}
|
|
onChange={handleChange}
|
|
>
|
|
<option value="low">Low - General inquiries (24 hours)</option>
|
|
<option value="medium">Medium - Standard issues (4 hours)</option>
|
|
<option value="high">High - Critical issues (1 hour)</option>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="issue" className="block text-sm font-medium text-text mb-2">
|
|
Describe Your Issue <span className="text-red-600">*</span>
|
|
</label>
|
|
<textarea
|
|
id="issue"
|
|
name="issue"
|
|
value={formState.issue}
|
|
onChange={handleChange}
|
|
required
|
|
placeholder="Please describe your issue in detail..."
|
|
rows={5}
|
|
className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.issue ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
|
|
/>
|
|
{errors.issue && (
|
|
<p className="text-xs text-red-600 mt-1">{errors.issue}</p>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={mutation.isPending}
|
|
>
|
|
{mutation.isPending ? 'Submitting...' : 'Submit Request'}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Support
|