infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

feat: Add project-scoped language for unsubscribe footer and contact-facing pages

Browse Source
This commit is contained in:
Dries Augustyns
2025-12-21 13:09:21 +01:00
parent 8a136dde55
commit e1f826357d
15 changed files with 499 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/manage/[id].tsx
+54 -15
View File
@@ -1,4 +1,5 @@
import {Button, Card, CardContent} from '@plunk/ui';
import {createTranslator, type Translator} from '@plunk/shared';
import {AnimatePresence, motion} from 'framer-motion';
import {useRouter} from 'next/router';
import React, {useEffect, useState} from 'react';
@@ -9,6 +10,7 @@ interface ContactInfo {
id: string;
email: string;
subscribed: boolean;
language: string;
}
export default function Manage() {
@@ -16,6 +18,7 @@ export default function Manage() {
const {id} = router.query;
const [contact, setContact] = useState<ContactInfo | null>(null);
const [translator, setTranslator] = useState<Translator | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [updating, setUpdating] = useState(false);
@@ -29,6 +32,11 @@ export default function Manage() {
setLoading(true);
const data = await network.fetch<ContactInfo>('GET', `/contacts/public/${id}`);
setContact(data);
// Load translations for the project's language
const t = await createTranslator(data.language || 'en');
setTranslator(t);
setError(null);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load contact information');
@@ -41,7 +49,7 @@ export default function Manage() {
}, [id]);
const handleToggleSubscription = async () => {
if (!id || typeof id !== 'string' || !contact) return;
if (!id || typeof id !== 'string' || !contact || !translator) return;
try {
setUpdating(true);
@@ -51,7 +59,11 @@ export default function Manage() {
const data = await network.fetch<ContactInfo>('POST', endpoint);
setContact(data);
setSaveMessage(data.subscribed ? 'Subscribed successfully!' : 'Unsubscribed successfully!');
setSaveMessage(
data.subscribed
? translator.t('pages.manage.subscribedSuccess')
: translator.t('pages.manage.unsubscribedSuccess'),
);
setError(null);
// Clear success message after 3 seconds
@@ -63,7 +75,8 @@ export default function Manage() {
}
};
if (loading) {
// Don't render until translations are loaded
if (!translator) {
return (
<div className={'h-screen flex items-center justify-center bg-neutral-50'}>
<div className={'flex flex-col gap-6 max-w-2xl w-full px-4'}>
@@ -92,6 +105,35 @@ export default function Manage() {
);
}
if (loading) {
return (
<div className={'h-screen flex items-center justify-center bg-neutral-50'}>
<div className={'flex flex-col gap-6 max-w-2xl w-full px-4'}>
<Card>
<CardContent className="p-8">
<div className="flex flex-col items-center gap-4">
<svg
className="h-8 w-8 animate-spin text-neutral-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
<p className="text-sm text-neutral-500">{translator.t('pages.common.loading')}</p>
</div>
</CardContent>
</Card>
</div>
</div>
);
}
if (error && !contact) {
return (
<div className={'h-screen flex items-center justify-center bg-neutral-50'}>
@@ -112,7 +154,7 @@ export default function Manage() {
<path d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<h1 className="text-2xl font-bold text-neutral-900">Error</h1>
<h1 className="text-2xl font-bold text-neutral-900">{translator.t('pages.common.error')}</h1>
<p className="text-neutral-500">{error}</p>
</div>
</CardContent>
@@ -129,20 +171,20 @@ export default function Manage() {
<CardContent className="p-8">
<div className="flex flex-col gap-6">
<div className="flex flex-col items-center text-center gap-2">
<h1 className="text-2xl font-bold text-neutral-900">Manage Preferences</h1>
<h1 className="text-2xl font-bold text-neutral-900">{translator.t('pages.manage.title')}</h1>
<p className="text-neutral-500">
Manage email preferences for <strong>{contact?.email}</strong>
{translator.t('pages.manage.description', {email: contact?.email || ''})}
</p>
</div>
<div className="border rounded-lg p-6 bg-white">
<div className="flex items-center justify-between">
<div className="flex-1">
<h3 className="font-medium text-neutral-900">Email Subscription</h3>
<h3 className="font-medium text-neutral-900">{translator.t('pages.manage.subscriptionLabel')}</h3>
<p className="text-sm text-neutral-500 mt-1">
{contact?.subscribed
? 'You are currently subscribed to receive emails'
: 'You are currently unsubscribed from emails'}
? translator.t('pages.manage.subscribedStatus')
: translator.t('pages.manage.unsubscribedStatus')}
</p>
</div>
<button
@@ -194,7 +236,7 @@ export default function Manage() {
className="w-full"
onClick={() => router.push(`/unsubscribe/${id as string}`)}
>
Unsubscribe completely
{translator.t('pages.manage.unsubscribeCompletely')}
</Button>
) : (
<Button
@@ -202,16 +244,13 @@ export default function Manage() {
className="w-full"
onClick={() => router.push(`/subscribe/${id as string}`)}
>
Subscribe to emails
{translator.t('pages.manage.subscribeToEmails')}
</Button>
)}
</div>
<div className="text-center text-xs text-neutral-400 mt-2">
<p>
This page allows you to manage your email preferences. Your subscription status is updated in
real-time.
</p>
<p>{translator.t('pages.manage.disclaimer')}</p>
</div>
</div>
</CardContent>