Implement i18n with German and English support (default DE)

This commit is contained in:
2026-01-12 21:38:05 +01:00
parent a60d456b3b
commit 62e1f5f1b4
14 changed files with 471 additions and 228 deletions

View File

@@ -1,12 +1,11 @@
"use client"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { toast } from "sonner"
import { Settings } from "lucide-react"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Settings } from "lucide-react"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
import {
@@ -32,46 +31,53 @@ import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { updatePlan } from "@/app/actions/plan"
const formSchema = z.object({
webhookUrl: z.string().optional().or(z.literal("")),
instructions: z.string().optional().or(z.literal("")),
notifyAll: z.boolean(),
})
type FormValues = z.infer<typeof formSchema>
type PlanSettingsProps = {
interface PlanSettingsProps {
planId: string
initialWebhookUrl?: string | null
initialInstructions?: string | null
initialNotifyAll?: boolean
initialInstructions: string | null
initialWebhookUrl: string | null
initialNotifyAll: boolean
dict: any
lang: string
}
export function PlanSettings({ planId, initialWebhookUrl, initialInstructions, initialNotifyAll = true }: PlanSettingsProps) {
export function PlanSettings({
planId,
initialInstructions,
initialWebhookUrl,
initialNotifyAll,
dict,
lang
}: PlanSettingsProps) {
const [open, setOpen] = useState(false)
const router = useRouter()
const [isPending, setIsPending] = useState(false)
const formSchema = z.object({
instructions: z.string().optional(),
webhookUrl: z.string().url().optional().or(z.literal("")),
notifyAll: z.boolean(),
})
type FormValues = z.infer<typeof formSchema>
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
webhookUrl: initialWebhookUrl || "",
instructions: initialInstructions || "",
webhookUrl: initialWebhookUrl || "",
notifyAll: initialNotifyAll,
},
})
async function onSubmit(values: FormValues) {
async function onSubmit(data: FormValues) {
setIsPending(true)
try {
await updatePlan(planId, {
webhookUrl: values.webhookUrl || "",
instructions: values.instructions || "",
notifyAll: values.notifyAll,
})
toast.success("Settings updated")
await updatePlan(planId, data, lang)
toast.success(dict.success)
setOpen(false)
router.refresh()
} catch {
toast.error("Failed to update settings")
} catch (error) {
toast.error(dict.error)
} finally {
setIsPending(false)
}
}
@@ -80,49 +86,32 @@ export function PlanSettings({ planId, initialWebhookUrl, initialInstructions, i
<DialogTrigger asChild>
<Button variant="outline" size="sm">
<Settings className="w-4 h-4 mr-2" />
Settings
{dict.title.split(" ")[1] || "Settings"}
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Plan Settings</DialogTitle>
<DialogTitle>{dict.title}</DialogTitle>
<DialogDescription>
Configure notification webhooks and cat care instructions.
{dict.description}
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="instructions"
name="webhookUrl"
render={({ field }) => (
<FormItem>
<FormLabel>Cat Instructions</FormLabel>
<FormLabel>{dict.webhookLabel}</FormLabel>
<FormControl>
<Textarea
placeholder="Feeding times, vet contact, special needs..."
className="min-h-[100px]"
<Input
placeholder={dict.webhookPlaceholder}
{...field}
/>
</FormControl>
<FormDescription>
Visible to all sitters.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="webhookUrl"
render={({ field }) => (
<FormItem>
<FormLabel>Notification Webhook</FormLabel>
<FormControl>
<Input placeholder="https://discord.com/api/webhooks/..." {...field} />
</FormControl>
<FormDescription>
Telegram or Discord webhook URL.
{dict.webhookDesc}
</FormDescription>
<FormMessage />
</FormItem>
@@ -141,17 +130,36 @@ export function PlanSettings({ planId, initialWebhookUrl, initialInstructions, i
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel>
Notify for all events
{dict.notifyAllLabel}
</FormLabel>
<FormDescription>
If disabled, only cancellations will be notified.
{dict.notifyAllDesc}
</FormDescription>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="instructions"
render={({ field }) => (
<FormItem>
<FormLabel>{dict.instructionsLabel}</FormLabel>
<FormControl>
<Textarea
placeholder={dict.instructionsPlaceholder}
className="h-32"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter>
<Button type="submit">Save changes</Button>
<Button type="submit" disabled={isPending}>
{isPending ? dict.saving : dict.save}
</Button>
</DialogFooter>
</form>
</Form>