Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement contact form submission with API integration and status feedback, refactor user profiles page layout and scrolling, and remove updateSession call from profile settings.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-20 12:43:23 +05:30
parent f71d47f3b7
commit 64f4234220
4 changed files with 69 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/contact/page.tsx
View File

@@ -6,6 +6,7 @@ import { useState, useEffect } from 'react';
import { CommonHeader } from '@/components/layout/CommonHeader';
import { Footer } from '@/components/layout/Footer';
import { cmsService } from '@/services/cms.service';
import api from '@/services/api';
interface ContactDetails {
title: string;
@@ -55,6 +56,8 @@ export default function ContactPage() {
const [contactDetails, setContactDetails] = useState<ContactDetails>(defaultContactDetails);
const [cta, setCta] = useState<ContactCta>(defaultCta);
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
useEffect(() => {
const loadCms = async () => {
@@ -73,10 +76,27 @@ export default function ContactPage() {
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleSubmit = (e: React.FormEvent) => {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// Handle form submission
console.log('Form submitted:', formData);
if (!formData.name.trim() || !formData.email.trim() || !formData.message.trim()) return;
setIsSubmitting(true);
setSubmitStatus('idle');
try {
await api.post('/contact', {
name: formData.name.trim(),
email: formData.email.trim(),
phone: formData.phone.trim() || undefined,
message: formData.message.trim(),
});
setSubmitStatus('success');
setFormData({ name: '', phone: '', email: '', message: '' });
setTimeout(() => setSubmitStatus('idle'), 5000);
} catch {
setSubmitStatus('error');
} finally {
setIsSubmitting(false);
}
};
const handleCancel = () => {
@@ -188,19 +208,31 @@ export default function ContactPage() {
</div>
{/* Buttons */}
{submitStatus === 'success' && (
<div className="bg-green-50 border border-green-200 rounded-[15px] p-3 text-center">
<p className="font-serif text-[14px] text-green-700">Message sent successfully! We'll get back to you shortly.</p>
</div>
)}
{submitStatus === 'error' && (
<div className="bg-red-50 border border-red-200 rounded-[15px] p-3 text-center">
<p className="font-serif text-[14px] text-red-700">Failed to send message. Please try again.</p>
</div>
)}
<div className="flex items-center justify-center gap-4 pt-4">
<button
type="button"
onClick={handleCancel}
className="w-[163px] h-[46px] border border-[#00293d]/10 rounded-[15px] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-gray-50 transition-colors"
disabled={isSubmitting}
className="w-[163px] h-[46px] border border-[#00293d]/10 rounded-[15px] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-gray-50 transition-colors disabled:opacity-50"
>
Cancel
</button>
<button
type="submit"
className="w-[163px] h-[46px] bg-[#e58625] rounded-[15px] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-[#d47720] transition-colors"
disabled={isSubmitting}
className="w-[163px] h-[46px] bg-[#e58625] rounded-[15px] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-[#d47720] transition-colors disabled:opacity-50"
>
Send Message
{isSubmitting ? 'Sending...' : 'Send Message'}
</button>
</div>
</form>