67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import type { EventAddonSummary } from '../../api';
|
|
|
|
type Props = {
|
|
addons: EventAddonSummary[];
|
|
t: (key: string, fallback: string, options?: Record<string, unknown>) => string;
|
|
};
|
|
|
|
export function AddonSummaryList({ addons, t }: Props) {
|
|
if (!addons.length) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{addons.map((addon) => (
|
|
<div key={addon.id} className="flex flex-col gap-1 rounded-2xl border border-slate-200/70 bg-white/70 p-4 text-sm dark:border-white/10 dark:bg-white/5 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="font-semibold text-slate-900 dark:text-white">{addon.label ?? addon.key}</p>
|
|
<p className="text-xs text-slate-500">
|
|
{buildSummary(addon, t)}
|
|
</p>
|
|
{addon.purchased_at ? (
|
|
<p className="text-xs text-slate-400">
|
|
{t('events.sections.addons.purchasedAt', `Purchased ${new Date(addon.purchased_at).toLocaleString()}`, {
|
|
date: new Date(addon.purchased_at).toLocaleString(),
|
|
})}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
<Badge variant={addon.status === 'completed' ? 'outline' : addon.status === 'pending' ? 'secondary' : 'destructive'}>
|
|
{t(`events.sections.addons.status.${addon.status}`, addon.status)}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function buildSummary(addon: EventAddonSummary, t: (key: string, fallback: string, options?: Record<string, unknown>) => string): string {
|
|
const parts: string[] = [];
|
|
if (addon.extra_photos > 0) {
|
|
parts.push(
|
|
t('events.sections.addons.summary.photos', `+${addon.extra_photos} photos`, {
|
|
count: addon.extra_photos.toLocaleString(),
|
|
}),
|
|
);
|
|
}
|
|
if (addon.extra_guests > 0) {
|
|
parts.push(
|
|
t('events.sections.addons.summary.guests', `+${addon.extra_guests} guests`, {
|
|
count: addon.extra_guests.toLocaleString(),
|
|
}),
|
|
);
|
|
}
|
|
if (addon.extra_gallery_days > 0) {
|
|
parts.push(
|
|
t('events.sections.addons.summary.gallery', `+${addon.extra_gallery_days} days gallery`, {
|
|
count: addon.extra_gallery_days,
|
|
}),
|
|
);
|
|
}
|
|
|
|
return parts.join(' · ');
|
|
}
|