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

2025-12-21 13:09:21 +01:00
parent 8a136dde55
commit e1f826357d
15 changed files with 499 additions and 41 deletions
@@ -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>
@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
 import {useForm} from 'react-hook-form';
 import {zodResolver} from '@hookform/resolvers/zod';
-import {ProjectSchemas} from '@plunk/shared';
+import {ProjectSchemas, SUPPORTED_LANGUAGES} from '@plunk/shared';
 import {TrackingMode} from '@plunk/db';
 import {
  Alert,
@@ -181,6 +181,7 @@ export default function Settings() {
    defaultValues: {
      name: activeProject?.name || '',
      tracking: activeProject?.tracking ?? TrackingMode.ENABLED,
+      language: activeProject?.language || 'en',
    },
  });

@@ -190,6 +191,7 @@ export default function Settings() {
      form.reset({
        name: activeProject.name,
        tracking: activeProject.tracking ?? TrackingMode.ENABLED,
+        language: activeProject.language || 'en',
      });
    }
  }, [activeProject, form]);
@@ -464,6 +466,39 @@ export default function Settings() {
                        />
                      )}

+                      {/* Language Selection */}
+                      <FormField
+                        control={form.control}
+                        name="language"
+                        render={({field}) => (
+                          <FormItem>
+                            <FormLabel>Customer Language</FormLabel>
+                            <Select onValueChange={field.onChange} defaultValue={field.value || 'en'}>
+                              <FormControl>
+                                <SelectTrigger>
+                                  <SelectValue placeholder="Select language" />
+                                </SelectTrigger>
+                              </FormControl>
+                              <SelectContent>
+                                {SUPPORTED_LANGUAGES.map((lang) => (
+                                  <SelectItem key={lang.code} value={lang.code}>
+                                    <div className="flex items-center gap-2">
+                                      <span>{lang.flag}</span>
+                                      <span>{lang.nativeName}</span>
+                                      <span className="text-neutral-500 text-xs">({lang.name})</span>
+                                    </div>
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <FormDescription>
+                              Language for customer-facing pages (unsubscribe, preferences) and email footers.
+                            </FormDescription>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
                      <div className="flex justify-end">
                        <Button type="submit" disabled={form.formState.isSubmitting}>
                          {form.formState.isSubmitting ? 'Saving...' : 'Save Changes'}
@@ -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 Subscribe() {
@@ -16,6 +18,7 @@ export default function Subscribe() {
  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 [subscribing, setSubscribing] = useState(false);
@@ -29,6 +32,11 @@ export default function Subscribe() {
        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');
@@ -56,7 +64,8 @@ export default function Subscribe() {
    }
  };

-  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'}>
@@ -85,6 +94,35 @@ export default function Subscribe() {
    );
  }

+  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'}>
@@ -105,7 +143,7 @@ export default function Subscribe() {
                    <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>
@@ -140,8 +178,10 @@ export default function Subscribe() {
                    <path d="M5 13l4 4L19 7" />
                  </svg>
                </motion.div>
-                <h1 className="text-2xl font-bold text-neutral-900">You&apos;re subscribed!</h1>
-                <p className="text-neutral-500">{contact?.email} is now subscribed to receive emails from us.</p>
+                <h1 className="text-2xl font-bold text-neutral-900">{translator.t('pages.subscribe.successTitle')}</h1>
+                <p className="text-neutral-500">
+                  {translator.t('pages.subscribe.successDescription', {email: contact?.email || ''})}
+                </p>
              </div>
            </CardContent>
          </Card>
@@ -157,9 +197,9 @@ export default function Subscribe() {
          <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">Subscribe to updates</h1>
+                <h1 className="text-2xl font-bold text-neutral-900">{translator.t('pages.subscribe.title')}</h1>
                <p className="text-neutral-500">
-                  Would you like to subscribe <strong>{contact?.email}</strong> to receive emails?
+                  {translator.t('pages.subscribe.description', {email: contact?.email || ''})}
                </p>
              </div>

@@ -192,10 +232,10 @@ export default function Subscribe() {
                        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>
-                    <span>Subscribing...</span>
+                    <span>{translator.t('pages.subscribe.buttonLoading')}</span>
                  </div>
                ) : (
-                  'Subscribe'
+                  translator.t('pages.subscribe.button')
                )}
              </Button>
            </div>
@@ -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 Unsubscribe() {
@@ -16,6 +18,7 @@ export default function Unsubscribe() {
  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 [unsubscribing, setUnsubscribing] = useState(false);
@@ -29,6 +32,11 @@ export default function Unsubscribe() {
        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');
@@ -56,7 +64,8 @@ export default function Unsubscribe() {
    }
  };

-  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'}>
@@ -85,6 +94,35 @@ export default function Unsubscribe() {
    );
  }

+  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'}>
@@ -105,7 +143,7 @@ export default function Unsubscribe() {
                    <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>
@@ -140,17 +178,17 @@ export default function Unsubscribe() {
                    <path d="M5 13l4 4L19 7" />
                  </svg>
                </motion.div>
-                <h1 className="text-2xl font-bold text-neutral-900">You&apos;re unsubscribed</h1>
+                <h1 className="text-2xl font-bold text-neutral-900">{translator.t('pages.unsubscribe.successTitle')}</h1>
                <p className="text-neutral-500">
-                  {contact?.email} has been unsubscribed. You won&apos;t receive any more emails from us.
+                  {translator.t('pages.unsubscribe.successDescription', {email: contact?.email || ''})}
                </p>
                <p className="text-sm text-neutral-400 mt-2">
-                  Changed your mind?{' '}
+                  {translator.t('pages.unsubscribe.changedMind')}{' '}
                  <button
                    onClick={() => router.push(`/subscribe/${id as string}`)}
                    className="underline hover:text-neutral-600"
                  >
-                    Subscribe again
+                    {translator.t('pages.unsubscribe.subscribeAgain')}
                  </button>
                </p>
              </div>
@@ -168,10 +206,9 @@ export default function Unsubscribe() {
          <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">Unsubscribe</h1>
+                <h1 className="text-2xl font-bold text-neutral-900">{translator.t('pages.unsubscribe.title')}</h1>
                <p className="text-neutral-500">
-                  We&apos;re sorry to see you go. Are you sure you want to unsubscribe <strong>{contact?.email}</strong>{' '}
-                  from receiving emails?
+                  {translator.t('pages.unsubscribe.description', {email: contact?.email || ''})}
                </p>
              </div>

@@ -210,14 +247,14 @@ export default function Unsubscribe() {
                          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>
-                      <span>Unsubscribing...</span>
+                      <span>{translator.t('pages.unsubscribe.buttonLoading')}</span>
                    </div>
                  ) : (
-                    'Unsubscribe'
+                    translator.t('pages.unsubscribe.button')
                  )}
                </Button>
                <Button variant="outline" className="w-full" onClick={() => router.push(`/manage/${id as string}`)}>
-                  Manage preferences instead
+                  {translator.t('pages.unsubscribe.managePreferences')}
                </Button>
              </div>
            </div>