Add support for project Travel Mate
This commit is contained in:
Van Leemput Dayron
@@ -14,6 +14,8 @@ app.use(cors());
|
||||
app.use(express.json());
|
||||
|
||||
app.use('/api/messages', messagesRouter);
|
||||
import supportRouter from './routes/support';
|
||||
app.use('/api/support', supportRouter);
|
||||
|
||||
// Basic health check
|
||||
app.get('/api/health', (req, res) => {
|
||||
|
||||
56
backend/src/routes/support.ts
Normal file
56
backend/src/routes/support.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import { Router, Request, Response } from 'express';
|
||||
import pool from '../config/db';
|
||||
import { ResultSetHeader } from 'mysql2';
|
||||
|
||||
const router = Router();
|
||||
|
||||
// Validation helper
|
||||
const isValidEmail = (email: string) => {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
};
|
||||
|
||||
router.post('/', async (req: Request, res: Response): Promise<void> => {
|
||||
const { nom, prenom, account_email, contact_email, message } = req.body;
|
||||
|
||||
// 1. Validation
|
||||
const errors: string[] = [];
|
||||
|
||||
if (!nom || nom.trim() === '') errors.push('Le nom est requis.');
|
||||
if (!prenom || prenom.trim() === '') errors.push('Le prénom est requis.');
|
||||
|
||||
if (!account_email || account_email.trim() === '') {
|
||||
errors.push("L'email du compte est requis.");
|
||||
} else if (!isValidEmail(account_email)) {
|
||||
errors.push("Le format de l'email du compte est invalide.");
|
||||
}
|
||||
|
||||
if (!contact_email || contact_email.trim() === '') {
|
||||
errors.push("L'email de contact est requis.");
|
||||
} else if (!isValidEmail(contact_email)) {
|
||||
errors.push("Le format de l'email de contact est invalide.");
|
||||
}
|
||||
|
||||
if (!message || message.trim() === '') errors.push('Le message est requis.');
|
||||
|
||||
if (errors.length > 0) {
|
||||
res.status(400).json({ status: 'error', errors });
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Insert into Database
|
||||
try {
|
||||
const query = 'INSERT INTO support_requests (nom, prenom, account_email, contact_email, message) VALUES (?, ?, ?, ?, ?)';
|
||||
const [result] = await pool.query<ResultSetHeader>(query, [nom, prenom, account_email, contact_email, message]);
|
||||
|
||||
res.status(201).json({
|
||||
status: 'success',
|
||||
message: 'Demande de support envoyée avec succès.',
|
||||
id: result.insertId
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error('Error inserting support request:', error);
|
||||
res.status(500).json({ status: 'error', message: 'Erreur serveur lors de la sauvegarde.' });
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -7,6 +7,7 @@ import Footer from './components/Footer';
|
||||
import Policies from './components/Policies';
|
||||
import TravelMate from './components/TravelMate';
|
||||
import EraseData from './components/TravelMate/EraseData';
|
||||
import Support from './components/TravelMate/Support';
|
||||
import HomeSync from './components/HomeSync';
|
||||
import ScrollToTop from './components/ScrollToTop';
|
||||
import './styles/main.scss';
|
||||
@@ -66,6 +67,7 @@ function AppContent() {
|
||||
<Route path="/travelmate/erasedata" element={<EraseData />} />
|
||||
<Route path="/homesync" element={<HomeSync />} />
|
||||
<Route path="/policies" element={<Policies />} />
|
||||
<Route path="/travelmate/support" element={<Support />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Shield, Smartphone, Map, DollarSign, Users, Globe, Code } from 'lucide-react';
|
||||
import { Shield, Smartphone, Map, DollarSign, Users, Globe, Code, ArrowLeft } from 'lucide-react';
|
||||
import appIcon from '../assets/app_icon.png';
|
||||
|
||||
const itemVariants = {
|
||||
@@ -219,7 +219,7 @@ const TravelMate = () => {
|
||||
<Code /> {t('travelmate.tech.api')}
|
||||
</h3>
|
||||
<ul style={{ listStyle: 'none', padding: 0 }}>
|
||||
{[1, 2, 3].map(i => (
|
||||
{[1, 2].map(i => (
|
||||
<li key={i} style={{ marginBottom: '0.8rem', paddingLeft: '1rem', borderLeft: '2px solid var(--primary-color)' }}>
|
||||
{t(`travelmate.tech.api.${i}`)}
|
||||
</li>
|
||||
@@ -230,51 +230,99 @@ const TravelMate = () => {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Policies CTA */}
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
style={{
|
||||
padding: '2rem',
|
||||
background: 'var(--card-bg, rgba(255, 255, 255, 0.05))',
|
||||
borderRadius: '1rem',
|
||||
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))',
|
||||
{/* Legal & Support Section */}
|
||||
<motion.div variants={itemVariants} style={{ marginBottom: '6rem' }}>
|
||||
<h2 style={{
|
||||
textAlign: 'center',
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto'
|
||||
}}
|
||||
>
|
||||
<Shield className="text-primary" size={48} style={{ marginBottom: '1rem', color: 'var(--primary-color)' }} />
|
||||
<h3 style={{ marginBottom: '1.5rem' }}>
|
||||
{t('policies.title')}
|
||||
</h3>
|
||||
<div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||
<Link
|
||||
to={`/${language}/travelmate/policies`}
|
||||
className="btn btn-secondary"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
{t('travelmate.policies.link')}
|
||||
marginBottom: '4rem',
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: '700',
|
||||
color: 'var(--text-color)'
|
||||
}}>{t('travelmate.legal.title')}</h2>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
|
||||
{/* Privacy Policy Card */}
|
||||
<Link to={`/${language}/travelmate/policies`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', borderColor: 'var(--primary-color)' }}
|
||||
style={{
|
||||
background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
|
||||
backdropFilter: 'blur(10px)',
|
||||
padding: '2rem',
|
||||
borderRadius: '1.5rem',
|
||||
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Shield size={32} style={{ color: 'var(--primary-color)', marginBottom: '1.5rem' }} />
|
||||
<h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '1rem' }}>{t('policies.title')}</h3>
|
||||
<p style={{ opacity: 0.7, marginBottom: '2rem', flex: 1, lineHeight: '1.6' }}>
|
||||
{t('travelmate.legal.privacy.desc')}
|
||||
</p>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
{t('travelmate.policies.link')} <ArrowLeft size={16} style={{ rotate: '180deg' }} />
|
||||
</span>
|
||||
</motion.div>
|
||||
</Link>
|
||||
<Link
|
||||
to={`/${language}/travelmate/erasedata`}
|
||||
className="btn btn-secondary"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
textDecoration: 'none',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
color: '#EF4444',
|
||||
borderColor: 'rgba(239, 68, 68, 0.2)'
|
||||
}}
|
||||
>
|
||||
<Shield size={18} />
|
||||
{t('travelmate.erasedata.link')}
|
||||
|
||||
{/* Erase Data Card */}
|
||||
<Link to={`/${language}/travelmate/erasedata`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', borderColor: '#EF4444' }}
|
||||
style={{
|
||||
background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
|
||||
backdropFilter: 'blur(10px)',
|
||||
padding: '2rem',
|
||||
borderRadius: '1.5rem',
|
||||
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Shield size={32} style={{ color: '#EF4444', marginBottom: '1.5rem' }} />
|
||||
<h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '1rem' }}>{t('erasedata.title').split(' ').slice(0, 2).join(' ')}...</h3> {/* Truncate title or use specific one */}
|
||||
<p style={{ opacity: 0.7, marginBottom: '2rem', flex: 1, lineHeight: '1.6' }}>
|
||||
{t('travelmate.legal.erasedata.desc')}
|
||||
</p>
|
||||
<span style={{ color: '#EF4444', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
{t('travelmate.erasedata.link')} <ArrowLeft size={16} style={{ rotate: '180deg' }} />
|
||||
</span>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Support Card */}
|
||||
<Link to={`/${language}/travelmate/support`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', borderColor: '#10B981' }}
|
||||
style={{
|
||||
background: 'var(--card-bg, rgba(255, 255, 255, 0.03))',
|
||||
backdropFilter: 'blur(10px)',
|
||||
padding: '2rem',
|
||||
borderRadius: '1.5rem',
|
||||
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.08))',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Users size={32} style={{ color: '#10B981', marginBottom: '1.5rem' }} />
|
||||
<h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '1rem' }}>{t('support.title')}</h3>
|
||||
<p style={{ opacity: 0.7, marginBottom: '2rem', flex: 1, lineHeight: '1.6' }}>
|
||||
{t('travelmate.legal.support.desc')}
|
||||
</p>
|
||||
<span style={{ color: '#10B981', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
{t('travelmate.support.link')} <ArrowLeft size={16} style={{ rotate: '180deg' }} />
|
||||
</span>
|
||||
</motion.div>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@@ -17,16 +17,20 @@ const EraseData = () => {
|
||||
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
||||
|
||||
const handleInitialSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!formData.confirm) return;
|
||||
setShowConfirmModal(true);
|
||||
};
|
||||
|
||||
const handleFinalSubmit = async () => {
|
||||
setShowConfirmModal(false);
|
||||
setStatus('submitting');
|
||||
setErrorMessage('');
|
||||
|
||||
try {
|
||||
// Using absolute URL for localhost dev, in prod simple /api might work if proxied or configured
|
||||
// Assuming localhost:3000 for backend based on previous steps
|
||||
await axios.post('/api/messages', {
|
||||
nom: formData.nom,
|
||||
prenom: formData.prenom,
|
||||
@@ -48,7 +52,7 @@ const EraseData = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="erase-data-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px' }}>
|
||||
<div className="erase-data-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px', position: 'relative' }}>
|
||||
<div className="container" style={{ maxWidth: '800px', margin: '0 auto', padding: '0 20px' }}>
|
||||
<Link
|
||||
to={`/${language}/travelmate`}
|
||||
@@ -96,7 +100,7 @@ const EraseData = () => {
|
||||
<p>{t('erasedata.success.message')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||||
<form onSubmit={handleInitialSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.lastname')}</label>
|
||||
@@ -193,6 +197,80 @@ const EraseData = () => {
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Confirmation Modal */}
|
||||
{showConfirmModal && (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
backdropFilter: 'blur(5px)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 1000,
|
||||
padding: '20px'
|
||||
}}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
style={{
|
||||
background: '#1a1a1a', // Assuming dark theme is default or hardcoded for now, ideally use var(--card-bg) but opacity might be issue
|
||||
backgroundColor: 'var(--card-bg, #1a1a1a)',
|
||||
padding: '2rem',
|
||||
borderRadius: '1rem',
|
||||
border: '1px solid var(--border-color, rgba(255,255,255,0.1))',
|
||||
maxWidth: '500px',
|
||||
width: '100%',
|
||||
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
|
||||
}}
|
||||
>
|
||||
<h2 style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<AlertCircle size={24} color="var(--primary-color)" />
|
||||
{t('modal.confirm.title')}
|
||||
</h2>
|
||||
<p style={{ marginBottom: '1.5rem', opacity: 0.8 }}>
|
||||
{t('modal.confirm.message')}
|
||||
</p>
|
||||
|
||||
<div style={{ background: 'rgba(255,255,255,0.05)', padding: '1rem', borderRadius: '0.5rem', marginBottom: '2rem', fontSize: '0.95rem' }}>
|
||||
<p style={{ marginBottom: '0.5rem' }}><strong>{t('erasedata.form.lastname')}:</strong> {formData.nom}</p>
|
||||
<p style={{ marginBottom: '0.5rem' }}><strong>{t('erasedata.form.firstname')}:</strong> {formData.prenom}</p>
|
||||
<p style={{ marginBottom: '0.5rem' }}><strong>{t('erasedata.form.email')}:</strong> {formData.email}</p>
|
||||
{formData.message && <p><strong>{t('erasedata.form.message')}:</strong> <span style={{ opacity: 0.8, display: 'block', marginTop: '4px', fontStyle: 'italic' }}>"{formData.message}"</span></p>}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
|
||||
<button
|
||||
onClick={() => setShowConfirmModal(false)}
|
||||
style={{
|
||||
padding: '0.8rem 1.5rem',
|
||||
borderRadius: '0.5rem',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border-color)',
|
||||
color: 'inherit',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
{t('modal.btn.cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleFinalSubmit}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
padding: '0.8rem 1.5rem',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
{t('modal.btn.confirm')}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
324
frontend/src/components/TravelMate/Support.tsx
Normal file
324
frontend/src/components/TravelMate/Support.tsx
Normal file
@@ -0,0 +1,324 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { ArrowLeft, Send, CheckCircle, AlertCircle } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
|
||||
const Support = () => {
|
||||
const { t, language } = useLanguage();
|
||||
const [formData, setFormData] = useState({
|
||||
nom: '',
|
||||
prenom: '',
|
||||
account_email: '',
|
||||
contact_email: '',
|
||||
useSameEmail: false,
|
||||
message: ''
|
||||
});
|
||||
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
||||
const handleSameEmailChange = (checked: boolean) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
useSameEmail: checked,
|
||||
contact_email: checked ? prev.account_email : prev.contact_email
|
||||
}));
|
||||
};
|
||||
|
||||
const handleAccountEmailChange = (value: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
account_email: value,
|
||||
contact_email: prev.useSameEmail ? value : prev.contact_email
|
||||
}));
|
||||
};
|
||||
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
||||
|
||||
const handleInitialSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setShowConfirmModal(true);
|
||||
};
|
||||
|
||||
const handleFinalSubmit = async () => {
|
||||
setShowConfirmModal(false);
|
||||
setStatus('submitting');
|
||||
setErrorMessage('');
|
||||
|
||||
try {
|
||||
await axios.post('/api/support', {
|
||||
nom: formData.nom,
|
||||
prenom: formData.prenom,
|
||||
account_email: formData.account_email,
|
||||
contact_email: formData.contact_email,
|
||||
message: formData.message
|
||||
});
|
||||
setStatus('success');
|
||||
setFormData({
|
||||
nom: '',
|
||||
prenom: '',
|
||||
account_email: '',
|
||||
contact_email: '',
|
||||
useSameEmail: false,
|
||||
message: ''
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error('Submission error', error);
|
||||
setStatus('error');
|
||||
setErrorMessage(error.response?.data?.message || t('support.error.generic'));
|
||||
}
|
||||
};
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="support-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px', position: 'relative' }}>
|
||||
<div className="container" style={{ maxWidth: '800px', margin: '0 auto', padding: '0 20px' }}>
|
||||
<Link
|
||||
to={`/${language}/travelmate`}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
marginBottom: '2rem',
|
||||
textDecoration: 'none',
|
||||
color: 'var(--text-color)',
|
||||
opacity: 0.8
|
||||
}}
|
||||
>
|
||||
<ArrowLeft size={18} />
|
||||
{t('policies.back')}
|
||||
</Link>
|
||||
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={containerVariants}
|
||||
style={{
|
||||
background: 'var(--card-bg, rgba(255, 255, 255, 0.05))',
|
||||
padding: '2.5rem',
|
||||
borderRadius: '1.5rem',
|
||||
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))',
|
||||
}}
|
||||
>
|
||||
<h1 style={{ marginBottom: '1.5rem', fontSize: '2rem' }}>{t('support.title')}</h1>
|
||||
<p style={{ marginBottom: '2rem', opacity: 0.8, lineHeight: '1.6' }}>
|
||||
{t('support.description')}
|
||||
</p>
|
||||
|
||||
{status === 'success' ? (
|
||||
<div style={{
|
||||
padding: '2rem',
|
||||
background: 'rgba(16, 185, 129, 0.1)',
|
||||
borderRadius: '1rem',
|
||||
border: '1px solid rgba(16, 185, 129, 0.2)',
|
||||
textAlign: 'center',
|
||||
color: '#10B981'
|
||||
}}>
|
||||
<CheckCircle size={48} style={{ marginBottom: '1rem' }} />
|
||||
<h3>{t('support.success.title')}</h3>
|
||||
<p>{t('support.success.message')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleInitialSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('support.form.lastname')}</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.nom}
|
||||
onChange={e => setFormData({ ...formData, nom: e.target.value })}
|
||||
className="form-input"
|
||||
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('support.form.firstname')}</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.prenom}
|
||||
onChange={e => setFormData({ ...formData, prenom: e.target.value })}
|
||||
className="form-input"
|
||||
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('support.form.accountemail')}</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={formData.account_email}
|
||||
onChange={e => handleAccountEmailChange(e.target.value)}
|
||||
className="form-input"
|
||||
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '-0.5rem' }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer', opacity: 0.9 }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.useSameEmail}
|
||||
onChange={e => handleSameEmailChange(e.target.checked)}
|
||||
style={{ width: '18px', height: '18px' }}
|
||||
/>
|
||||
<span style={{ fontSize: '0.9rem' }}>
|
||||
{t('support.form.sameemail')}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('support.form.contactemail')}</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={formData.contact_email}
|
||||
onChange={e => setFormData({ ...formData, contact_email: e.target.value })}
|
||||
disabled={formData.useSameEmail} // Optional: disable if same
|
||||
className="form-input"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '0.8rem',
|
||||
borderRadius: '0.5rem',
|
||||
border: '1px solid var(--border-color)',
|
||||
background: formData.useSameEmail ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.2)',
|
||||
color: 'inherit',
|
||||
opacity: formData.useSameEmail ? 0.7 : 1
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('support.form.message')}</label>
|
||||
<textarea
|
||||
required
|
||||
rows={5}
|
||||
value={formData.message}
|
||||
onChange={e => setFormData({ ...formData, message: e.target.value })}
|
||||
className="form-input"
|
||||
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{status === 'error' && (
|
||||
<div style={{ color: '#EF4444', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.95rem' }}>
|
||||
<AlertCircle size={16} />
|
||||
{errorMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status === 'submitting'}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
marginTop: '1rem',
|
||||
padding: '1rem',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
opacity: status === 'submitting' ? 0.7 : 1,
|
||||
cursor: status === 'submitting' ? 'wait' : 'pointer'
|
||||
}}
|
||||
>
|
||||
{status === 'submitting' ? t('support.form.submitting') : (
|
||||
<>
|
||||
<Send size={18} />
|
||||
{t('support.form.submit')}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Confirmation Modal */}
|
||||
{showConfirmModal && (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
backdropFilter: 'blur(5px)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 1000,
|
||||
padding: '20px'
|
||||
}}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
style={{
|
||||
background: '#1a1a1a',
|
||||
backgroundColor: 'var(--card-bg, #1a1a1a)',
|
||||
padding: '2rem',
|
||||
borderRadius: '1rem',
|
||||
border: '1px solid var(--border-color, rgba(255,255,255,0.1))',
|
||||
maxWidth: '500px',
|
||||
width: '100%',
|
||||
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
|
||||
}}
|
||||
>
|
||||
<h2 style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<AlertCircle size={24} color="var(--primary-color)" />
|
||||
{t('modal.confirm.title')}
|
||||
</h2>
|
||||
<p style={{ marginBottom: '1.5rem', opacity: 0.8 }}>
|
||||
{t('modal.confirm.message')}
|
||||
</p>
|
||||
|
||||
<div style={{ background: 'rgba(255,255,255,0.05)', padding: '1rem', borderRadius: '0.5rem', marginBottom: '2rem', fontSize: '0.95rem' }}>
|
||||
<p style={{ marginBottom: '0.5rem' }}><strong>{t('support.form.lastname')}:</strong> {formData.nom}</p>
|
||||
<p style={{ marginBottom: '0.5rem' }}><strong>{t('support.form.firstname')}:</strong> {formData.prenom}</p>
|
||||
<p style={{ marginBottom: '0.5rem' }}><strong>{t('support.form.accountemail')}:</strong> {formData.account_email}</p>
|
||||
<p style={{ marginBottom: '0.5rem' }}><strong>{t('support.form.contactemail')}:</strong> {formData.contact_email}</p>
|
||||
{formData.message && <p><strong>{t('support.form.message')}:</strong> <span style={{ opacity: 0.8, display: 'block', marginTop: '4px', fontStyle: 'italic' }}>"{formData.message}"</span></p>}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
|
||||
<button
|
||||
onClick={() => setShowConfirmModal(false)}
|
||||
style={{
|
||||
padding: '0.8rem 1.5rem',
|
||||
borderRadius: '0.5rem',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border-color)',
|
||||
color: 'inherit',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
{t('modal.btn.cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleFinalSubmit}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
padding: '0.8rem 1.5rem',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
{t('modal.btn.confirm')}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Support;
|
||||
@@ -34,6 +34,12 @@ const translations = {
|
||||
'btn.viewProjects': 'Voir mes projets',
|
||||
'btn.contactMe': 'Me contacter',
|
||||
|
||||
// Modal
|
||||
'modal.confirm.title': 'Vérification',
|
||||
'modal.confirm.message': 'Veuillez vérifier vos informations avant d\'envoyer.',
|
||||
'modal.btn.cancel': 'Annuler',
|
||||
'modal.btn.confirm': 'Confirmer & Envoyer',
|
||||
|
||||
// Hero
|
||||
'hero.greeting': 'Salut, je suis',
|
||||
'hero.title': 'Dayron Van Leemput',
|
||||
@@ -175,8 +181,7 @@ const translations = {
|
||||
'travelmate.tech.backend.4': 'Storage (Médias)',
|
||||
'travelmate.tech.api': 'APIs & Outils',
|
||||
'travelmate.tech.api.1': 'Google Maps API / Mapbox',
|
||||
'travelmate.tech.api.2': 'Stripe (tbc) pour les paiements',
|
||||
'travelmate.tech.api.3': 'CI/CD avec Gitea Actions',
|
||||
'travelmate.tech.api.2': 'CI/CD avec Gitea Actions',
|
||||
'travelmate.viewCode': 'Voir le code',
|
||||
|
||||
// Erase Data Page
|
||||
@@ -193,8 +198,29 @@ const translations = {
|
||||
'erasedata.form.submit': 'Envoyer la demande',
|
||||
'erasedata.form.submitting': 'Envoi en cours...',
|
||||
|
||||
'travelmate.policies.link': 'Voir les politiques de confidentialité',
|
||||
'travelmate.erasedata.link': 'Supprimer mes données',
|
||||
'travelmate.policies.link': 'Voir les politiques',
|
||||
'travelmate.erasedata.link': 'Suppression',
|
||||
'travelmate.support.link': 'Assistance',
|
||||
|
||||
'travelmate.legal.title': 'Centre d\'Aide & Légal',
|
||||
'travelmate.legal.privacy.desc': 'Consultez nos engagements concernant vos données personnelles.',
|
||||
'travelmate.legal.erasedata.desc': 'Exercez votre droit à l\'oubli en demandant la suppression de vos données.',
|
||||
'travelmate.legal.support.desc': 'Une question ? Un problème ? Contactez notre équipe support.',
|
||||
|
||||
// Support Page
|
||||
'support.title': 'Assistance Travel Mate',
|
||||
'support.description': 'Besoin d\'aide ? Remplissez le formulaire ci-dessous.',
|
||||
'support.form.lastname': 'Nom',
|
||||
'support.form.firstname': 'Prénom',
|
||||
'support.form.accountemail': 'Email du compte',
|
||||
'support.form.contactemail': 'Email de contact',
|
||||
'support.form.sameemail': 'Utiliser le même email pour le contact',
|
||||
'support.form.message': 'Message',
|
||||
'support.form.submit': 'Envoyer',
|
||||
'support.form.submitting': 'Envoi en cours...',
|
||||
'support.success.title': 'Demande envoyée',
|
||||
'support.success.message': 'Nous vous répondrons dès que possible.',
|
||||
'support.error.generic': 'Une erreur est survenue.',
|
||||
|
||||
// Policies Page
|
||||
'policies.back': 'Retour',
|
||||
@@ -289,6 +315,12 @@ const translations = {
|
||||
'btn.viewProjects': 'View my projects',
|
||||
'btn.contactMe': 'Contact me',
|
||||
|
||||
// Modal
|
||||
'modal.confirm.title': 'Verification',
|
||||
'modal.confirm.message': 'Please review your information before sending.',
|
||||
'modal.btn.cancel': 'Cancel',
|
||||
'modal.btn.confirm': 'Confirm & Send',
|
||||
|
||||
// Hero
|
||||
'hero.greeting': 'Hi, I am',
|
||||
'hero.title': 'Dayron Van Leemput',
|
||||
@@ -431,8 +463,7 @@ const translations = {
|
||||
'travelmate.tech.backend.5': 'Storage (Media)',
|
||||
'travelmate.tech.api': 'APIs & Tools',
|
||||
'travelmate.tech.api.1': 'Google Maps API / Mapbox',
|
||||
'travelmate.tech.api.2': 'Stripe (tbc) for payments',
|
||||
'travelmate.tech.api.3': 'CI/CD with Gitea Actions',
|
||||
'travelmate.tech.api.2': 'CI/CD with Gitea Actions',
|
||||
'travelmate.viewCode': 'View Code',
|
||||
|
||||
// Erase Data Page
|
||||
@@ -450,7 +481,28 @@ const translations = {
|
||||
'erasedata.form.submitting': 'Sending...',
|
||||
|
||||
'travelmate.policies.link': 'View Privacy Policy',
|
||||
'travelmate.erasedata.link': 'Request Data Erasure',
|
||||
'travelmate.erasedata.link': 'Data Deletion',
|
||||
'travelmate.support.link': 'Support',
|
||||
|
||||
'travelmate.legal.title': 'Help & Legal Center',
|
||||
'travelmate.legal.privacy.desc': 'Read about our commitments regarding your personal data.',
|
||||
'travelmate.legal.erasedata.desc': 'Exercise your right to be forgotten by requesting data deletion.',
|
||||
'travelmate.legal.support.desc': 'A question? A problem? Contact our support team.',
|
||||
|
||||
// Support Page
|
||||
'support.title': 'Travel Mate Support',
|
||||
'support.description': 'Need help? Fill out the form below.',
|
||||
'support.form.lastname': 'Last Name',
|
||||
'support.form.firstname': 'First Name',
|
||||
'support.form.accountemail': 'Account Email',
|
||||
'support.form.contactemail': 'Contact Email',
|
||||
'support.form.sameemail': 'Use same email for contact',
|
||||
'support.form.message': 'Message',
|
||||
'support.form.submit': 'Send',
|
||||
'support.form.submitting': 'Sending...',
|
||||
'support.success.title': 'Request Sent',
|
||||
'support.success.message': 'We will reply as soon as possible.',
|
||||
'support.error.generic': 'An error occurred.',
|
||||
|
||||
// Policies Page
|
||||
'policies.back': 'Back',
|
||||
|
||||
@@ -10,7 +10,9 @@
|
||||
background: var(--bg-secondary);
|
||||
|
||||
&-grid {
|
||||
@include grid-responsive(400px, 40px);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 40px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
@include respond-to(md) {
|
||||
|
||||
Reference in New Issue
Block a user