email marketing

src/app/(main)/(marketing)/unsubscribe/page.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+export default function UnsubscribePage() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get('token');
+  const [status, setStatus] = useState<'idle' | 'saving' | 'success' | 'error'>('idle');
+
+  async function unsubscribe() {
+    setStatus('saving');
+
+    const response = await fetch('/api/marketing/unsubscribe', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ token }),
+    });
+
+    setStatus(response.ok ? 'success' : 'error');
+  }
+
+  return (
+    <main className="mx-auto flex min-h-[60vh] max-w-xl items-center px-6 py-20">
+      <section className="w-full border border-slate-200 bg-white p-8 text-center shadow-sm">
+        {status === 'success' ? (
+          <>
+            <h1 className="text-3xl font-semibold text-slate-900">You’re unsubscribed.</h1>
+            <p className="mt-4 text-slate-600">
+              You will no longer receive QR Master product and upgrade emails.
+            </p>
+          </>
+        ) : (
+          <>
+            <h1 className="text-3xl font-semibold text-slate-900">Unsubscribe from product updates?</h1>
+            <p className="mt-4 text-slate-600">
+              You will still receive essential account, billing, and security emails.
+            </p>
+            <button
+              type="button"
+              onClick={unsubscribe}
+              disabled={!token || status === 'saving'}
+              className="mt-8 bg-slate-900 px-5 py-3 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {status === 'saving' ? 'Unsubscribing…' : 'Unsubscribe'}
+            </button>
+            {status === 'error' && (
+              <p className="mt-4 text-sm text-red-700">This link is invalid or has expired.</p>
+            )}
+          </>
+        )}
+      </section>
+    </main>
+  );
+}