feat: change language

components/admin/invitation-language-select.tsx

@@ -0,0 +1,90 @@
+"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>
+  )
+}