feat: Add tickets module and PayPal integration
Introduces a new 'Tickets' module for users to submit and manage issues within their condominium. This includes defining ticket types, statuses, priorities, and categories. Additionally, this commit integrates PayPal as a payment option for family fee payments, enabling users to pay directly via PayPal using their client ID. Key changes: - Added `Ticket` related types and enums. - Implemented `TicketService` functions for CRUD operations. - Integrated `@paypal/react-paypal-js` library. - Added `paypalClientId` to `AppSettings` and `Condo` types. - Updated `FamilyDetail` page to include PayPal payment option. - Added 'Segnalazioni' navigation link to `Layout`.
This commit is contained in:
@@ -4,6 +4,7 @@ import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { CondoService } from '../services/mockDb';
|
||||
import { Family, Payment, AppSettings, MonthStatus, PaymentStatus, Condo } from '../types';
|
||||
import { ArrowLeft, CheckCircle2, AlertCircle, Plus, Calendar, CreditCard, TrendingUp } from 'lucide-react';
|
||||
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
|
||||
|
||||
const MONTH_NAMES = [
|
||||
"Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno",
|
||||
@@ -26,6 +27,10 @@ export const FamilyDetail: React.FC = () => {
|
||||
const [newPaymentMonth, setNewPaymentMonth] = useState<number>(new Date().getMonth() + 1);
|
||||
const [newPaymentAmount, setNewPaymentAmount] = useState<number>(0);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Payment Method Selection
|
||||
const [paymentMethod, setPaymentMethod] = useState<'manual' | 'paypal'>('manual');
|
||||
const [paypalSuccessMsg, setPaypalSuccessMsg] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
@@ -117,33 +122,45 @@ export const FamilyDetail: React.FC = () => {
|
||||
return max > 0 ? Math.max(max * 1.2, baseline) : baseline;
|
||||
}, [chartData, condo, family]);
|
||||
|
||||
const handleAddPayment = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const handlePaymentSuccess = async (details?: any) => {
|
||||
if (!family || !id) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const payment = await CondoService.addPayment({
|
||||
familyId: id,
|
||||
amount: newPaymentAmount,
|
||||
forMonth: newPaymentMonth,
|
||||
forYear: selectedYear,
|
||||
datePaid: new Date().toISOString()
|
||||
});
|
||||
const payment = await CondoService.addPayment({
|
||||
familyId: id,
|
||||
amount: newPaymentAmount,
|
||||
forMonth: newPaymentMonth,
|
||||
forYear: selectedYear,
|
||||
datePaid: new Date().toISOString(),
|
||||
notes: details ? `Pagato con PayPal (ID: ${details.id})` : ''
|
||||
});
|
||||
|
||||
setPayments([...payments, payment]);
|
||||
if (!availableYears.includes(selectedYear)) {
|
||||
setAvailableYears([...availableYears, selectedYear].sort((a,b) => b-a));
|
||||
}
|
||||
|
||||
setShowAddModal(false);
|
||||
setPayments([...payments, payment]);
|
||||
if (!availableYears.includes(selectedYear)) {
|
||||
setAvailableYears([...availableYears, selectedYear].sort((a,b) => b-a));
|
||||
}
|
||||
|
||||
if (details) {
|
||||
setPaypalSuccessMsg("Pagamento riuscito!");
|
||||
setTimeout(() => {
|
||||
setShowAddModal(false);
|
||||
setPaypalSuccessMsg("");
|
||||
}, 2000);
|
||||
} else {
|
||||
setShowAddModal(false);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to add payment", e);
|
||||
console.error("Failed to add payment", e);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleManualSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
handlePaymentSuccess();
|
||||
};
|
||||
|
||||
if (loading) return <div className="p-8 text-center text-slate-500">Caricamento dettagli...</div>;
|
||||
if (!family) return <div className="p-8 text-center text-red-500">Famiglia non trovata.</div>;
|
||||
|
||||
@@ -184,7 +201,10 @@ export const FamilyDetail: React.FC = () => {
|
||||
</select>
|
||||
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
onClick={() => {
|
||||
setPaymentMethod(condo?.paypalClientId ? 'paypal' : 'manual');
|
||||
setShowAddModal(true);
|
||||
}}
|
||||
className="flex-1 md:flex-none flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg shadow-sm font-medium transition-all active:scale-95 whitespace-nowrap"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
@@ -285,6 +305,7 @@ export const FamilyDetail: React.FC = () => {
|
||||
<button
|
||||
onClick={() => {
|
||||
setNewPaymentMonth(month.monthIndex + 1);
|
||||
setPaymentMethod(condo?.paypalClientId ? 'paypal' : 'manual');
|
||||
setShowAddModal(true);
|
||||
}}
|
||||
className="ml-auto text-blue-600 hover:text-blue-800 text-xs font-bold uppercase tracking-wide px-2 py-1 rounded hover:bg-blue-50 transition-colors"
|
||||
@@ -353,49 +374,117 @@ export const FamilyDetail: React.FC = () => {
|
||||
<button onClick={() => setShowAddModal(false)} className="text-slate-400 hover:text-slate-600 w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-200">✕</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleAddPayment} className="p-6 space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1.5">Mese di Riferimento</label>
|
||||
<select
|
||||
value={newPaymentMonth}
|
||||
onChange={(e) => setNewPaymentMonth(parseInt(e.target.value))}
|
||||
className="w-full border border-slate-300 rounded-xl p-3 focus:ring-2 focus:ring-blue-500 outline-none bg-white"
|
||||
>
|
||||
{MONTH_NAMES.map((name, i) => (
|
||||
<option key={i} value={i + 1}>{name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
{/* Payment Method Switcher */}
|
||||
{condo?.paypalClientId && (
|
||||
<div className="flex bg-slate-100 rounded-lg p-1 mb-6">
|
||||
<button
|
||||
onClick={() => setPaymentMethod('manual')}
|
||||
className={`flex-1 py-1.5 text-sm font-medium rounded-md transition-all ${paymentMethod === 'manual' ? 'bg-white text-slate-800 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
|
||||
>
|
||||
Manuale
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPaymentMethod('paypal')}
|
||||
className={`flex-1 py-1.5 text-sm font-medium rounded-md transition-all ${paymentMethod === 'paypal' ? 'bg-white text-blue-800 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
|
||||
>
|
||||
PayPal
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1.5">Importo (€)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
required
|
||||
value={newPaymentAmount}
|
||||
onChange={(e) => setNewPaymentAmount(parseFloat(e.target.value))}
|
||||
className="w-full border border-slate-300 rounded-xl p-3 focus:ring-2 focus:ring-blue-500 outline-none text-lg font-medium"
|
||||
/>
|
||||
</div>
|
||||
{paymentMethod === 'manual' ? (
|
||||
<form onSubmit={handleManualSubmit} className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1.5">Mese di Riferimento</label>
|
||||
<select
|
||||
value={newPaymentMonth}
|
||||
onChange={(e) => setNewPaymentMonth(parseInt(e.target.value))}
|
||||
className="w-full border border-slate-300 rounded-xl p-3 focus:ring-2 focus:ring-blue-500 outline-none bg-white"
|
||||
>
|
||||
{MONTH_NAMES.map((name, i) => (
|
||||
<option key={i} value={i + 1}>{name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAddModal(false)}
|
||||
className="flex-1 px-4 py-3 border border-slate-300 text-slate-700 rounded-xl hover:bg-slate-50 font-bold text-sm"
|
||||
>
|
||||
Annulla
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 px-4 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 font-bold text-sm disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? '...' : 'Conferma'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1.5">Importo (€)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
required
|
||||
value={newPaymentAmount}
|
||||
onChange={(e) => setNewPaymentAmount(parseFloat(e.target.value))}
|
||||
className="w-full border border-slate-300 rounded-xl p-3 focus:ring-2 focus:ring-blue-500 outline-none text-lg font-medium"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAddModal(false)}
|
||||
className="flex-1 px-4 py-3 border border-slate-300 text-slate-700 rounded-xl hover:bg-slate-50 font-bold text-sm"
|
||||
>
|
||||
Annulla
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 px-4 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 font-bold text-sm disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? '...' : 'Conferma'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-blue-50 p-4 rounded-xl text-center">
|
||||
<p className="text-sm text-slate-500 mb-1">Stai per pagare</p>
|
||||
<p className="text-3xl font-bold text-blue-700">€ {newPaymentAmount.toFixed(2)}</p>
|
||||
<p className="text-sm font-medium text-slate-600 mt-1">{MONTH_NAMES[newPaymentMonth - 1]} {selectedYear}</p>
|
||||
</div>
|
||||
|
||||
{paypalSuccessMsg ? (
|
||||
<div className="bg-green-100 text-green-700 p-4 rounded-xl text-center font-bold flex items-center justify-center gap-2">
|
||||
<CheckCircle2 className="w-5 h-5"/>
|
||||
{paypalSuccessMsg}
|
||||
</div>
|
||||
) : (
|
||||
<div className="min-h-[150px] flex items-center justify-center">
|
||||
{condo?.paypalClientId && (
|
||||
<PayPalScriptProvider options={{ clientId: condo.paypalClientId, currency: "EUR" }}>
|
||||
<PayPalButtons
|
||||
style={{ layout: "vertical" }}
|
||||
createOrder={(data, actions) => {
|
||||
return actions.order.create({
|
||||
intent: "CAPTURE",
|
||||
purchase_units: [
|
||||
{
|
||||
description: `Quota ${MONTH_NAMES[newPaymentMonth - 1]} ${selectedYear} - Famiglia ${family.name}`,
|
||||
amount: {
|
||||
currency_code: "EUR",
|
||||
value: newPaymentAmount.toString(),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}}
|
||||
onApprove={(data, actions) => {
|
||||
if(!actions.order) return Promise.resolve();
|
||||
return actions.order.capture().then((details) => {
|
||||
handlePaymentSuccess(details);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</PayPalScriptProvider>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-center text-slate-400">Il pagamento sarà registrato automaticamente.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user