chore: import codes
This commit is contained in:
@@ -0,0 +1,410 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { formatCurrency } from '../../../shared/utils/currency.js';
|
||||
import { Card, Table, Select } from '../../../shared/components/index.js';
|
||||
import { parseUTCDate, formatDateForDisplay, getDaysBetween, isOverdue, getTodayUTC } from '../../../shared/lib/dates.js';
|
||||
|
||||
const DATE_LOCALE = 'fr-FR';
|
||||
|
||||
/**
|
||||
* Public Invoice Payment Page Component
|
||||
* Allows clients to view and pay invoices via public link
|
||||
*/
|
||||
const PaymentPage = ({
|
||||
invoice,
|
||||
onPaymentSubmit,
|
||||
stripeEnabled = false,
|
||||
interacEnabled = false,
|
||||
interacEmail = null,
|
||||
interacCredentials = null,
|
||||
paymentStatus = null,
|
||||
token = null,
|
||||
publicLogoWhite = '',
|
||||
publicLogoBlack = '',
|
||||
publicDashboardUrl = '',
|
||||
}) => {
|
||||
const [paymentMethod, setPaymentMethod] = useState(
|
||||
stripeEnabled ? 'stripe' : (interacEnabled ? 'interac' : 'other')
|
||||
);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
|
||||
// Payment method options for Select component
|
||||
const paymentMethodOptions = [
|
||||
...(stripeEnabled ? [{ value: 'stripe', label: "Carte de crédit" }] : []),
|
||||
...(interacEnabled ? [{ value: 'interac', label: "Virement Interac" }] : []),
|
||||
{ value: 'other', label: "Autre" }
|
||||
];
|
||||
|
||||
if (!invoice) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-4 bg-white dark:bg-black">
|
||||
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg p-8 max-w-md w-full text-center shadow-sm dark:shadow-none">
|
||||
<h1 className="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">Facture non trouvée</h1>
|
||||
<p className="text-neutral-600 dark:text-neutral-400">
|
||||
La facture que vous recherchez n'existe pas ou a été supprimée.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const clientName = invoice.company_name || `${invoice.first_name} ${invoice.last_name}`;
|
||||
const isPaid = invoice.status === 'paid';
|
||||
const invoiceIsOverdue = isOverdue(invoice.due_date) && !isPaid;
|
||||
const principalAmount = parseFloat(invoice.total_amount);
|
||||
const interestAmount = parseFloat(invoice.interest_amount || 0);
|
||||
const totalWithInterest = principalAmount + interestAmount;
|
||||
const paidAmount = parseFloat(invoice.paid_amount || 0);
|
||||
const remainingAmount = totalWithInterest - paidAmount;
|
||||
const totalAmount = totalWithInterest;
|
||||
const hasInterest = interestAmount > 0;
|
||||
|
||||
const handlePayment = async () => {
|
||||
if (onPaymentSubmit) {
|
||||
setIsProcessing(true);
|
||||
try {
|
||||
await onPaymentSubmit(paymentMethod);
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Calculate days remaining
|
||||
const daysRemaining = getDaysBetween(getTodayUTC(), invoice.due_date);
|
||||
const dueDateFormatted = formatDateForDisplay(invoice.due_date, DATE_LOCALE);
|
||||
|
||||
// Table columns configuration for invoice items
|
||||
const invoiceItemsColumns = [
|
||||
{
|
||||
key: 'name',
|
||||
label: "Description",
|
||||
render: (item) => (
|
||||
<div className="break-words">
|
||||
<p className="text-neutral-900 dark:text-white font-medium break-words">{item.name}</p>
|
||||
{item.description && (
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400 break-words">{item.description}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'quantity',
|
||||
label: "Quantité",
|
||||
noWrap: false,
|
||||
render: (item) => (
|
||||
<div className="text-left text-neutral-900 dark:text-white">{item.quantity}</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'unit_price',
|
||||
label: "Prix unitaire",
|
||||
noWrap: false,
|
||||
render: (item) => (
|
||||
<div className="text-left text-neutral-900 dark:text-white">{formatCurrency(item.unit_price)}</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'total',
|
||||
label: "Total",
|
||||
headerAlign: 'right',
|
||||
noWrap: false,
|
||||
render: (item) => (
|
||||
<div className="text-right text-neutral-900 dark:text-white font-medium">{formatCurrency(item.total)}</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
const hasLogo = publicLogoWhite || publicLogoBlack;
|
||||
const logoHref = publicDashboardUrl && publicDashboardUrl.trim() !== '' ? publicDashboardUrl.trim() : null;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-neutral-100 dark:bg-black">
|
||||
<div className="max-w-7xl mx-auto px-4 py-16 lg:py-24 sm:px-6 lg:px-8">
|
||||
<div className='flex flex-col gap-10'>
|
||||
{/* Invoice to Pay Header */}
|
||||
<div className="flex flex-col gap-[8px] w-full pr-[16%] text-left items-start justify-start py-4">
|
||||
{/* Public logo (black in light theme, white in dark theme); link to dashboard when URL configured */}
|
||||
{hasLogo && (
|
||||
<div className="flex justify-start items-center pb-4">
|
||||
{logoHref ? (
|
||||
<a href={logoHref} className="focus:outline-none focus:ring-2 focus:ring-neutral-400 dark:focus:ring-neutral-500 rounded">
|
||||
{publicLogoBlack && (
|
||||
<img
|
||||
src={publicLogoBlack}
|
||||
alt=""
|
||||
className="max-h-16 dark:hidden object-contain object-left"
|
||||
/>
|
||||
)}
|
||||
{publicLogoWhite && (
|
||||
<img
|
||||
src={publicLogoWhite}
|
||||
alt=""
|
||||
className="max-h-16 hidden dark:block object-contain object-left"
|
||||
/>
|
||||
)}
|
||||
</a>
|
||||
) : (
|
||||
<>
|
||||
{publicLogoBlack && (
|
||||
<img
|
||||
src={publicLogoBlack}
|
||||
alt=""
|
||||
className="max-h-16 dark:hidden object-contain object-left"
|
||||
/>
|
||||
)}
|
||||
{publicLogoWhite && (
|
||||
<img
|
||||
src={publicLogoWhite}
|
||||
alt=""
|
||||
className="max-h-16 hidden dark:block object-contain object-left"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{remainingAmount > 0 && (
|
||||
<>
|
||||
<h1 className="text-neutral-900 dark:text-white font-bold text-left text-4xl">Facture à payer</h1>
|
||||
<p className="text-xs text-neutral-600 dark:text-neutral-400">
|
||||
Vous avez une facture à payer de {formatCurrency(totalAmount)} avant le {dueDateFormatted}.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{remainingAmount === 0 && (
|
||||
<>
|
||||
<h1 className="text-neutral-900 dark:text-white font-bold text-left text-4xl">Facture payée</h1>
|
||||
<p className="text-xs text-neutral-600 dark:text-neutral-400">
|
||||
Vous avez une facture de {formatCurrency(totalAmount)} qui a été payée.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(paymentStatus === 'success' || paymentStatus === 'cancelled' || (invoiceIsOverdue && !isPaid)) && (
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Status Badge */}
|
||||
{paymentStatus === 'success' && (
|
||||
<Card padding='sm' spacing='sm' variant='success'>
|
||||
<p className="text-green-700 dark:text-green-400 font-medium">✓ Paiement effectué avec succès !</p>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">Vous recevrez un email de confirmation sous peu.</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{paymentStatus === 'cancelled' && (
|
||||
<Card padding='sm' spacing='sm' variant='warning'>
|
||||
<p className="text-yellow-700 dark:text-yellow-400 font-medium">Le paiement a été annulé</p>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">Vous pouvez réessayer ci-dessous.</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{(invoiceIsOverdue && !isPaid) && (
|
||||
<Card padding='sm' spacing='sm' variant='danger'>
|
||||
<p className="text-red-700 dark:text-red-400 font-medium">Cette facture est en retard. Veuillez la payer le plus rapidement possible.</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Invoice Details */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Invoice Amount Section */}
|
||||
<Card padding='sm' spacing='sm'>
|
||||
<h2 className="text-neutral-900 dark:text-white text-sm font-semibold">Montant de la facture</h2>
|
||||
<div className="text-neutral-900 dark:text-white font-bold text-left text-2xl">
|
||||
{formatCurrency(totalAmount)}
|
||||
</div>
|
||||
{remainingAmount > 0 && (
|
||||
<p className="text-left text-xs text-neutral-600 dark:text-neutral-400">
|
||||
Payable avant le {dueDateFormatted} ({daysRemaining > 0 ? `${daysRemaining} jours restants` : 'En retard'})
|
||||
</p>
|
||||
)}
|
||||
{remainingAmount === 0 && (
|
||||
<p className="text-left text-xs text-neutral-600 dark:text-neutral-400">
|
||||
Payable avant le {dueDateFormatted}
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Downloads Section */}
|
||||
<Card padding='sm' spacing='sm'>
|
||||
<h2 className="text-neutral-900 dark:text-white text-sm font-semibold">Téléchargements</h2>
|
||||
<div className="flex flex-col gap-2 items-start justify-start">
|
||||
<button
|
||||
onClick={() => {
|
||||
const pdfUrl = token
|
||||
? `/zen/invoice/${token}/pdf`
|
||||
: `/zen/invoice/${invoice.token}/pdf`;
|
||||
window.open(pdfUrl, '_blank');
|
||||
}}
|
||||
className="p-0 text-sm text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400 hover:underline cursor-pointer"
|
||||
>
|
||||
Facture # {invoice.invoice_number}
|
||||
</button>
|
||||
{isPaid && (
|
||||
<button
|
||||
onClick={() => {
|
||||
const receiptUrl = token
|
||||
? `/zen/invoice/${token}/receipt`
|
||||
: `/zen/invoice/${invoice.token}/receipt`;
|
||||
window.open(receiptUrl, '_blank');
|
||||
}}
|
||||
className="p-0 text-sm text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400 hover:underline cursor-pointer"
|
||||
>
|
||||
Reçu # {invoice.invoice_number}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Items Table */}
|
||||
<Card padding="none">
|
||||
<Table
|
||||
columns={invoiceItemsColumns}
|
||||
data={invoice.items}
|
||||
emptyMessage="Aucun article trouvé"
|
||||
emptyDescription="Cette facture n'a aucun article"
|
||||
/>
|
||||
|
||||
{/* Totals Section */}
|
||||
{invoice.items && invoice.items.length > 0 && (
|
||||
<div className="border-t border-neutral-200 dark:border-neutral-700/30 -mt-4">
|
||||
<div className="px-6 py-4">
|
||||
<div className="flex justify-end">
|
||||
<div className="w-full md:w-64 space-y-2">
|
||||
{/* Subtotal */}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium text-neutral-600 dark:text-gray-300">Sous-total</span>
|
||||
<span className="text-sm font-medium text-neutral-900 dark:text-white">
|
||||
{formatCurrency(invoice.items.reduce((sum, item) => sum + parseFloat(item.total || 0), 0))}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Interest (if applicable) */}
|
||||
{hasInterest && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium text-yellow-600 dark:text-yellow-400">Intérêt</span>
|
||||
<span className="text-sm font-medium text-yellow-600 dark:text-yellow-400">
|
||||
{formatCurrency(interestAmount)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Total */}
|
||||
<div className="flex justify-between items-center border-t border-neutral-300 dark:border-neutral-600/50 pt-2">
|
||||
<span className="text-base font-semibold text-neutral-900 dark:text-white">Total</span>
|
||||
<span className="text-base font-semibold text-neutral-900 dark:text-white">
|
||||
{formatCurrency(totalWithInterest)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Notes */}
|
||||
{invoice.notes && (
|
||||
<Card>
|
||||
<h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notes</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 whitespace-pre-wrap">{invoice.notes}</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Payment Section */}
|
||||
<div className="lg:col-span-1 flex flex-col gap-4">
|
||||
<Card padding="sm" spacing="sm">
|
||||
{isPaid ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-green-700 dark:text-green-400 font-medium mb-2">Payé en totalité</p>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Payé le {formatDateForDisplay(invoice.paid_at, DATE_LOCALE)}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="block text-xs font-medium text-neutral-600 dark:text-neutral-400">Montant à payer</p>
|
||||
<p className="text-3xl font-bold text-neutral-900 dark:text-white">
|
||||
{formatCurrency(remainingAmount)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
label="Méthode de paiement"
|
||||
value={paymentMethod}
|
||||
onChange={setPaymentMethod}
|
||||
options={paymentMethodOptions}
|
||||
placeholder="Sélectionner une méthode de paiement..."
|
||||
required
|
||||
/>
|
||||
|
||||
{(paymentMethod === 'stripe') && (
|
||||
<button
|
||||
onClick={handlePayment}
|
||||
disabled={isProcessing}
|
||||
className="w-full cursor-pointer px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-neutral-400 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors"
|
||||
>
|
||||
{isProcessing ? "Traitement..." : `Payer ${formatCurrency(remainingAmount)}`}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{paymentMethod === 'other' && (
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 text-center">
|
||||
Veuillez nous contacter pour les instructions de paiement.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{paymentMethod === 'interac' && interacEnabled && interacEmail && interacCredentials && (
|
||||
<Card padding='sm' spacing='sm'>
|
||||
<h2 className="text-neutral-900 dark:text-white text-sm font-semibold">Virement Interac</h2>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Veuillez envoyer un virement Interac aux informations suivantes :
|
||||
</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className='bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700 rounded-lg p-2'>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mb-1">Courriel</p>
|
||||
<p className="text-sm text-neutral-900 dark:text-white font-mono">{interacEmail}</p>
|
||||
</div>
|
||||
|
||||
<div className='bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700 rounded-lg p-2'>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mb-1">Question de sécurité</p>
|
||||
<p className="text-sm text-neutral-900 dark:text-white font-mono">{interacCredentials.security_question}</p>
|
||||
</div>
|
||||
|
||||
<div className='bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700 rounded-lg p-2'>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mb-1">Réponse</p>
|
||||
<p className="text-sm text-neutral-900 dark:text-white font-mono">{interacCredentials.security_answer}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<p className="text-xs text-neutral-600 dark:text-neutral-400">
|
||||
Votre facture sera marquée comme payée une fois que nous aurons traité votre paiement. Veuillez noter que cela peut prendre un certain temps.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentPage;
|
||||
Reference in New Issue
Block a user