91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { useRouter } from "next/navigation"
|
|
import { useState } from "react"
|
|
|
|
import { updateInvitationLanguageAction } from "@/app/admin/guests/actions"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { supportedLanguages } from "@/lib/i18n/config"
|
|
|
|
interface InvitationLanguageSelectProps {
|
|
invitationId: string
|
|
currentLanguage: string
|
|
displayName: string
|
|
}
|
|
|
|
export function InvitationLanguageSelect({
|
|
invitationId,
|
|
currentLanguage,
|
|
displayName,
|
|
}: InvitationLanguageSelectProps) {
|
|
const router = useRouter()
|
|
const [value, setValue] = useState(currentLanguage)
|
|
const [message, setMessage] = useState<string | null>(null)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
|
|
async function updateLanguage(nextLanguage: string) {
|
|
if (nextLanguage === value) return
|
|
|
|
const previousLanguage = value
|
|
|
|
setValue(nextLanguage)
|
|
setMessage(null)
|
|
setError(null)
|
|
setIsSaving(true)
|
|
|
|
try {
|
|
const result = await updateInvitationLanguageAction({
|
|
invitationId,
|
|
language: nextLanguage,
|
|
})
|
|
|
|
if (!result.ok) {
|
|
setValue(previousLanguage)
|
|
setError(result.error)
|
|
return
|
|
}
|
|
|
|
setMessage("Language updated.")
|
|
router.refresh()
|
|
} catch {
|
|
setValue(previousLanguage)
|
|
setError("Could not update the invitation language.")
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<Select
|
|
value={value}
|
|
disabled={isSaving}
|
|
onValueChange={(next) => void updateLanguage(next)}
|
|
>
|
|
<SelectTrigger
|
|
aria-label={`Invitation language for ${displayName}`}
|
|
className="w-full"
|
|
>
|
|
<SelectValue placeholder="Select language" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{supportedLanguages.map((language) => (
|
|
<SelectItem key={language.code} value={language.code}>
|
|
{language.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{message ? <p className="text-xs text-emerald-700">{message}</p> : null}
|
|
{error ? <p className="text-xs text-destructive">{error}</p> : null}
|
|
</div>
|
|
)
|
|
}
|