feat: add public contact form and update support info
This commit is contained in:
Tiago Yamamoto
parent
30a77789eb
commit
471c5930e2
5 changed files with 189 additions and 17 deletions
|
|
@ -9,6 +9,8 @@ import Image from "next/image"
|
|||
import Link from "next/link"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
|
||||
import { ContactForm } from "@/components/contact-form"
|
||||
|
||||
|
||||
export default function ContactPage() {
|
||||
const { t } = useTranslation()
|
||||
|
|
@ -53,8 +55,11 @@ export default function ContactPage() {
|
|||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{/* FAQ Section - Main Column */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
{/* Contact Form Section */}
|
||||
<ContactForm />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div className="bg-white rounded-2xl shadow-sm p-6 md:p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||
|
|
@ -111,8 +116,8 @@ export default function ContactPage() {
|
|||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-1">{t('contact.contactInfo.email')}</p>
|
||||
<a href="mailto:hello@gohorsejobs.com" className="text-primary hover:underline font-medium">
|
||||
hello@gohorsejobs.com
|
||||
<a href="mailto:wtf@gohorsejobs.com" className="text-primary hover:underline font-medium">
|
||||
wtf@gohorsejobs.com
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -171,7 +176,7 @@ export default function ContactPage() {
|
|||
{t('contact.help.description')}
|
||||
</p>
|
||||
<a
|
||||
href="mailto:hello@gohorsejobs.com"
|
||||
href="mailto:wtf@gohorsejobs.com"
|
||||
className="inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-medium px-4 py-2.5 rounded-lg transition-colors"
|
||||
>
|
||||
Enviar Mensagem
|
||||
|
|
|
|||
167
frontend/src/components/contact-form.tsx
Normal file
167
frontend/src/components/contact-form.tsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { ticketsApi } from "@/lib/api"
|
||||
import { toast } from "sonner"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
import { motion } from "framer-motion"
|
||||
import { Send } from "lucide-react"
|
||||
|
||||
export function ContactForm() {
|
||||
const { t } = useTranslation()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
subject: "",
|
||||
category: "support",
|
||||
message: "",
|
||||
})
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
// For public tickets, we might need to include name/email in the subject or message
|
||||
// if the backend doesn't support guest tickets with these fields directly.
|
||||
// Assuming ticketsApi.create handles guest info via message or similar if not authenticated.
|
||||
|
||||
const payload = {
|
||||
subject: formData.subject,
|
||||
category: formData.category,
|
||||
priority: "medium", // Default priority
|
||||
message: `Name: ${formData.name}\nEmail: ${formData.email}\n\n${formData.message}`,
|
||||
}
|
||||
|
||||
await ticketsApi.create(payload)
|
||||
|
||||
toast.success(t('contact.form.success') || "Mensagem enviada com sucesso! Responderemos em até 72 horas úteis.")
|
||||
setFormData({
|
||||
name: "",
|
||||
email: "",
|
||||
subject: "",
|
||||
category: "support",
|
||||
message: "",
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("Error submitting contact form:", error)
|
||||
toast.error(t('contact.form.error') || "Erro ao enviar mensagem. Tente novamente mais tarde.")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-2xl shadow-sm p-6 md:p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||
<Send className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">{t('contact.form.title') || "Envie uma Mensagem"}</h2>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">{t('contact.form.name') || "Nome"}</Label>
|
||||
<Input
|
||||
id="name"
|
||||
required
|
||||
placeholder={t('contact.form.namePlaceholder') || "Seu nome completo"}
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">{t('contact.form.email') || "E-mail"}</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
placeholder="seu@email.com"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="subject">{t('contact.form.subject') || "Assunto"}</Label>
|
||||
<Input
|
||||
id="subject"
|
||||
required
|
||||
placeholder={t('contact.form.subjectPlaceholder') || "No que podemos ajudar?"}
|
||||
value={formData.subject}
|
||||
onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="category">{t('contact.form.category') || "Categoria"}</Label>
|
||||
<Select
|
||||
value={formData.category}
|
||||
onValueChange={(val) => setFormData({ ...formData, category: val })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={t('contact.form.categoryPlaceholder') || "Selecione uma categoria"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="support">{t('tickets.categories.support') || "Suporte"}</SelectItem>
|
||||
<SelectItem value="bug">{t('tickets.categories.bug') || "Bug / Erro"}</SelectItem>
|
||||
<SelectItem value="feature">{t('tickets.categories.feature') || "Sugestão"}</SelectItem>
|
||||
<SelectItem value="billing">{t('tickets.categories.billing') || "Financeiro"}</SelectItem>
|
||||
<SelectItem value="other">{t('tickets.categories.other') || "Outros"}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="message">{t('contact.form.message') || "Mensagem"}</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
required
|
||||
placeholder={t('contact.form.messagePlaceholder') || "Descreva sua dúvida ou problema detalhadamente..."}
|
||||
className="min-h-[150px] resize-none"
|
||||
value={formData.message}
|
||||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 text-lg font-semibold"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ repeat: Infinity, duration: 1, ease: "linear" }}
|
||||
className="w-6 h-6 border-2 border-white/30 border-t-white rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{t('contact.form.submit') || "Enviar Ticket"}
|
||||
<Send className="ml-2 w-5 h-5" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<p className="text-xs text-center text-gray-500 mt-2">
|
||||
{t('contact.form.disclaimer') || "Responderemos em até 72 horas úteis."}
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
},
|
||||
"support": {
|
||||
"title": "Support",
|
||||
"description": "Monday to Friday, 9am to 6pm"
|
||||
"description": "Tuesday to Thursday, 10am to 5pm (business days)"
|
||||
}
|
||||
},
|
||||
"faq": {
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
},
|
||||
"q8": {
|
||||
"q": "How do I contact support?",
|
||||
"a": "You can contact us via email at hello@gohorsejobs.com or by phone at (11) 9999-9999. Our team is available Monday through Friday, from 9 AM to 6 PM."
|
||||
"a": "You can contact us via email at wtf@gohorsejobs.com or by phone at (11) 9999-9999. Our team is available Tuesday through Thursday, from 10 AM to 5 PM. The response time for tickets is 72 business hours."
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
"email": "Email",
|
||||
"phone": "Phone",
|
||||
"hours": "Business Hours",
|
||||
"hoursValue": "Mon – Fri: 9 AM to 6 PM"
|
||||
"hoursValue": "Tue – Thu: 10 AM to 5 PM (business days)"
|
||||
},
|
||||
"resources": {
|
||||
"title": "Useful Resources",
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
},
|
||||
"help": {
|
||||
"title": "Need more help?",
|
||||
"description": "Our support team is ready to assist you.",
|
||||
"description": "Our support team is ready to assist you. The response time for tickets is 72 business hours.",
|
||||
"button": "Send Message"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@
|
|||
},
|
||||
"support": {
|
||||
"title": "Soporte",
|
||||
"description": "Lunes a viernes, de 9 a 18 h"
|
||||
"description": "Martes a jueves, de 10 a 17 h (días hábiles)"
|
||||
}
|
||||
},
|
||||
"faq": {
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
},
|
||||
"q8": {
|
||||
"q": "¿Cómo contacto con el soporte?",
|
||||
"a": "Puedes contactarnos por correo electrónico a hello@gohorsejobs.com o por teléfono al (11) 9999-9999. Nuestro equipo está disponible de lunes a viernes, de 9:00 a 18:00."
|
||||
"a": "Puedes contactarnos por correo electrónico a wtf@gohorsejobs.com o por teléfono al (11) 9999-9999. Nuestro equipo está disponible de martes a jueves, de 10:00 a 17:00. El plazo de respuesta para tickets es de 72 horas hábiles."
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
"email": "Correo electrónico",
|
||||
"phone": "Teléfono",
|
||||
"hours": "Horario de Atención",
|
||||
"hoursValue": "Lun – Vie: 9:00 a 18:00"
|
||||
"hoursValue": "Mar – Jue: 10:00 a 17:00 (días hábiles)"
|
||||
},
|
||||
"resources": {
|
||||
"title": "Recursos Útiles",
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
},
|
||||
"help": {
|
||||
"title": "¿Necesitas más ayuda?",
|
||||
"description": "Nuestro equipo de soporte está listo para ayudarte.",
|
||||
"description": "Nuestro equipo de soporte está listo para ayudarte. El plazo de respuesta para tickets es de 72 horas hábiles.",
|
||||
"button": "Enviar Mensaje"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@
|
|||
},
|
||||
"support": {
|
||||
"title": "Suporte",
|
||||
"description": "Segunda a sexta-feira, das 9h às 18h"
|
||||
"description": "Terça a quinta-feira, das 10h às 17h (dias úteis)"
|
||||
}
|
||||
},
|
||||
"intro": {
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
},
|
||||
"q8": {
|
||||
"q": "Como entro em contato com o suporte?",
|
||||
"a": "Você pode entrar em contato conosco pelo e-mail hello@gohorsejobs.com ou pelo telefone (11) 9999-9999. Nosso time está disponível de segunda a sexta-feira, das 9h às 18h."
|
||||
"a": "Você pode entrar em contato conosco pelo e-mail wtf@gohorsejobs.com ou pelo telefone (11) 9999-9999. Nosso time está disponível de terça a quinta-feira, das 10h às 17h. O prazo de resposta para tickets é de 72 horas úteis."
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
"email": "E-mail",
|
||||
"phone": "Telefone",
|
||||
"hours": "Horário de Atendimento",
|
||||
"hoursValue": "Segunda a sexta-feira: 9h às 18h"
|
||||
"hoursValue": "Terça a quinta-feira: 10h às 17h (dias úteis)"
|
||||
},
|
||||
"resources": {
|
||||
"title": "Recursos Úteis",
|
||||
|
|
@ -242,7 +242,7 @@
|
|||
},
|
||||
"help": {
|
||||
"title": "Precisa de mais ajuda?",
|
||||
"description": "Nossa equipe de suporte está pronta para ajudar você.",
|
||||
"description": "Nossa equipe de suporte está pronta para ajudar você. O prazo de resposta para tickets é de 72 horas úteis.",
|
||||
"button": "Enviar Mensagem"
|
||||
},
|
||||
"actions": {
|
||||
|
|
|
|||
Loading…
Reference in a new issue