import { useTranslation } from '@/hooks/use-translation'; import { Head, useForm } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Checkbox } from '@/components/ui/checkbox'; import { useState } from 'react'; import membershipBilling from '@/routes/settings/membership-billing'; interface MembershipBillingSettings { billing_method: 'anniversary' | 'fixed_date'; fixed_month: string; fixed_day: string; grace_period_days: string; auto_generate: boolean; invoice_due_days: string; } interface Props { settings: MembershipBillingSettings; months: Record; } export default function MembershipBilling({ settings, months }: Props) { const { t } = useTranslation(); const [previewData, setPreviewData] = useState(null); const [isPreviewLoading, setIsPreviewLoading] = useState(false); const { data, setData, put, processing, errors } = useForm({ billing_method: settings.billing_method, fixed_month: parseInt(settings.fixed_month), fixed_day: parseInt(settings.fixed_day), grace_period_days: parseInt(settings.grace_period_days), auto_generate: settings.auto_generate, invoice_due_days: parseInt(settings.invoice_due_days), }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); put(route('settings.membership-billing.update')); }; const handlePreview = async () => { setIsPreviewLoading(true); try { const response = await fetch(membershipBilling.preview.url()); const data = await response.json(); setPreviewData(data); } catch (error) { console.error('Error fetching preview:', error); } finally { setIsPreviewLoading(false); } }; const handleGenerate = () => { if (confirm('Are you sure you want to generate membership dues invoices now?')) { fetch(membershipBilling.generate.url(), { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '', }, }).then(() => { globalThis.location.reload(); }); } }; return (
{t('Membership Billing Configuration')} {t('Configure how and when membership dues are billed')}
{/* Billing Method */}

{data.billing_method === 'anniversary' ? 'Members will be billed on their membership anniversary date each year' : 'All members will be billed on the same date each year'}

{errors.billing_method && (

{errors.billing_method}

)}
{/* Fixed Date Settings (only show when fixed_date is selected) */} {data.billing_method === 'fixed_date' && (
{errors.fixed_month && (

{errors.fixed_month}

)}
{errors.fixed_day && (

{errors.fixed_day}

)}
)} {/* Grace Period */}
setData('grace_period_days', parseInt(e.target.value))} />

{t('Number of days before/after billing date to check for renewals and avoid duplicates')}

{errors.grace_period_days && (

{errors.grace_period_days}

)}
{/* Invoice Due Days */}
setData('invoice_due_days', parseInt(e.target.value))} />

{t('Number of days after invoice date when payment is due')}

{errors.invoice_due_days && (

{errors.invoice_due_days}

)}
{/* Auto Generate */}
setData('auto_generate', checked as boolean)} />

{t('Automatically generate membership dues invoices via scheduled task')}

{/* Preview and Manual Generation */} {t('Manual Operations')} {t('Preview and manually generate membership dues invoices')}
{previewData && (

{previewData.count} members due for renewal on {previewData.date}

{previewData.members.map((member: any) => (
{member.name}
{member.email}
{member.tiers.map((tier: any, idx: number) => (
{tier.name} - ${tier.price}
))}
))}
)}
); }