Redesign user dashboard with overview tab and i18n payment copy.

Consolidate profile and security into AccountTab, add shared dashboard components, and move awaiting-approval payment messages to translations. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-29 07:39:52 +00:00
parent f5fe87613f
commit 38526f17b5
15 changed files with 1999 additions and 1237 deletions
@@ -0,0 +1,93 @@
+'use client';
+
+import {
+  ExclamationTriangleIcon,
+  CheckCircleIcon,
+} from '@heroicons/react/24/outline';
+import type { UserTicket } from '@/lib/api';
+import { useLanguage } from '@/context/LanguageContext';
+import PayActions from './PayActions';
+import { HoldCountdown } from './Countdown';
+import {
+  holdExpiry,
+  ticketAmount,
+  pyg,
+  isAwaitingApproval,
+} from './helpers';
+
+/**
+ * The very-top Overview banner. Shown only when a booking needs attention:
+ *   • unpaid   -> red banner naming event + amount, a hold-expiry countdown,
+ *                 and the "Pay now" / "I've paid" actions.
+ *   • awaiting -> calm amber "payment received, we will confirm it
+ *                 shortly" state with no further action.
+ */
+export default function AttentionBanner({
+  ticket,
+  locale,
+  onChange,
+}: {
+  ticket: UserTicket;
+  locale: string;
+  onChange: () => void;
+}) {
+  const { t } = useLanguage();
+  const eventTitle =
+    (locale === 'es' && ticket.event?.titleEs
+      ? ticket.event.titleEs
+      : ticket.event?.title) || (locale === 'es' ? 'tu evento' : 'your event');
+  const { amount, currency } = ticketAmount(ticket);
+
+  if (isAwaitingApproval(ticket)) {
+    return (
+      <div className="flex items-start gap-3 rounded-card border border-amber-200 bg-amber-50 p-4">
+        <CheckCircleIcon className="mt-0.5 h-6 w-6 flex-shrink-0 text-amber-600" />
+        <div>
+          <p className="font-semibold text-amber-900">
+            {t('dashboard.payment.received')}
+          </p>
+          <p className="text-sm text-amber-800">
+            {t('dashboard.payment.confirmForEvent', {
+              amount: pyg(amount, currency),
+              event: eventTitle,
+            })}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const expiry = holdExpiry(ticket);
+
+  return (
+    <div className="rounded-card border border-red-200 bg-red-50 p-4">
+      <div className="flex items-start gap-3">
+        <ExclamationTriangleIcon className="mt-0.5 h-6 w-6 flex-shrink-0 text-red-600" />
+        <div className="min-w-0 flex-1">
+          <p className="font-semibold text-red-900">
+            {locale === 'es'
+              ? `Debes ${pyg(amount, currency)} para ${eventTitle}`
+              : `You owe ${pyg(amount, currency)} for ${eventTitle}`}
+          </p>
+          {expiry && (
+            <p className="mt-0.5 text-sm text-red-700">
+              <HoldCountdown target={expiry} locale={locale} />
+            </p>
+          )}
+        </div>
+      </div>
+      <div className="mt-3 sm:pl-9">
+        <PayActions
+          ticketId={ticket.id}
+          amount={amount}
+          currency={currency}
+          destination={eventTitle}
+          locale={locale}
+          onPaid={onChange}
+          layout="inline"
+          size="sm"
+        />
+      </div>
+    </div>
+  );
+}