Implement i18n with German and English support (default DE)
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user