All files / src/app/(site)/unsubscribe-error page.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Unsubscribe Error Page
 *
 * Displayed when an email unsubscribe action fails.
 */

import { Metadata } from 'next';
import Link from 'next/link';
import { Icon } from '@/components/ui/icons';

export const metadata: Metadata = {
  title: 'Unsubscribe Error | Elite Events',
  description: 'There was an error processing your unsubscribe request.',
  robots: 'noindex, nofollow'
};

interface UnsubscribeErrorPageProps {
  searchParams: Promise<{ reason?: string }>;
}

const reasonMessages: Record<string, { title: string; description: string }> = {
  'missing-token': {
    title: 'Invalid link',
    description: 'This unsubscribe link appears to be incomplete. Please use the link directly from your email.'
  },
  'invalid-token': {
    title: 'Link expired or invalid',
    description: 'This unsubscribe link has expired or is no longer valid. Please use a more recent email or sign in to manage your preferences.'
  },
  'server-error': {
    title: 'Something went wrong',
    description: "We couldn't process your request right now. Please try again later or sign in to manage your preferences."
  }
};

export default async function UnsubscribeErrorPage({ searchParams }: UnsubscribeErrorPageProps) {
  const resolvedParams = await searchParams;
  const reason = resolvedParams.reason || 'server-error';
  const message = reasonMessages[reason] || reasonMessages['server-error'];

  return (
    <div className="min-h-[60vh] flex items-center justify-center px-4">
      <div className="max-w-md w-full text-center">
        {/* Error icon */}
        <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-6">
          <Icon name="alert-circle" size={32} className="text-red-600 dark:text-red-400" />
        </div>

        {/* Title */}
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
          {message.title}
        </h1>

        {/* Description */}
        <p className="text-gray-600 dark:text-gray-400 mb-8">
          {message.description}
        </p>

        {/* Actions */}
        <div className="space-y-4">
          <p className="text-sm text-gray-500 dark:text-gray-500">
            You can manage your email preferences from your account settings.
          </p>

          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link
              href="/signin"
              className="inline-flex items-center justify-center px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
            >
              Sign In to Manage
            </Link>
            <Link
              href="/"
              className="inline-flex items-center justify-center px-6 py-2.5 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors font-medium"
            >
              Return Home
            </Link>
          </div>

          {/* Contact support */}
          <p className="text-sm text-gray-500 dark:text-gray-500 pt-4">
            Need help?{' '}
            <Link href="/contact" className="text-blue-600 dark:text-blue-400 hover:underline">
              Contact support
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
}