@djangocfg/ext-support 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ext-support",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Support ticket system extension for DjangoCFG",
   "keywords": [
     "django",
@@ -46,6 +46,11 @@
       "types": "./dist/config.d.ts",
       "import": "./dist/config.js",
       "require": "./dist/config.cjs"
+    },
+    "./i18n": {
+      "types": "./dist/i18n.d.ts",
+      "import": "./dist/i18n.js",
+      "require": "./dist/i18n.cjs"
     }
   },
   "files": [
@@ -59,9 +64,10 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.109",
-    "@djangocfg/ext-base": "^1.0.16",
-    "@djangocfg/ui-core": "^2.1.109",
+    "@djangocfg/api": "^2.1.111",
+    "@djangocfg/ext-base": "^1.0.17",
+    "@djangocfg/i18n": "^2.1.111",
+    "@djangocfg/ui-core": "^2.1.111",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -74,10 +80,11 @@
     "zod": "^4.3.4"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.109",
-    "@djangocfg/ext-base": "^1.0.16",
-    "@djangocfg/ui-core": "^2.1.109",
-    "@djangocfg/typescript-config": "^2.1.109",
+    "@djangocfg/api": "^2.1.111",
+    "@djangocfg/ext-base": "^1.0.17",
+    "@djangocfg/i18n": "^2.1.111",
+    "@djangocfg/ui-core": "^2.1.111",
+    "@djangocfg/typescript-config": "^2.1.111",
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     "consola": "^3.4.2",

package/src/i18n/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Support Extension I18n
+ */
+
+import { createExtensionI18n } from '@djangocfg/ext-base/i18n';
+import type { SupportTranslations } from './types';
+import { en } from './locales/en';
+import { ru } from './locales/ru';
+import { ko } from './locales/ko';
+
+/** Support extension namespace */
+export const SUPPORT_NAMESPACE = 'support' as const;
+
+export const supportI18n = createExtensionI18n<SupportTranslations>({
+  namespace: SUPPORT_NAMESPACE,
+  defaultLocale: 'en',
+  locales: { en, ru, ko },
+});
+
+export const supportTranslations = supportI18n.getAllTranslations();
+
+// Types
+export type { SupportTranslations, SupportKeys, SupportLocalKeys } from './types';

package/src/i18n/locales/en.ts

@@ -0,0 +1,76 @@
+import type { SupportTranslations } from '../types';
+
+export const en: SupportTranslations = {
+  layout: {
+    title: 'Support Center',
+    titleShort: 'Support',
+    subtitle: 'Get help from our support team',
+    newTicket: 'New Ticket',
+  },
+
+  status: {
+    open: 'Open',
+    waitingForUser: 'Waiting for you',
+    waitingForAdmin: 'Waiting for support',
+    resolved: 'Resolved',
+    closed: 'Closed',
+  },
+
+  ticketList: {
+    noTickets: 'No tickets yet',
+    noTicketsDescription: 'Create your first support ticket to get help',
+    loadingMore: 'Loading more...',
+    loadMore: 'Load more',
+    allLoaded: 'All {count} tickets loaded',
+  },
+
+  createTicket: {
+    title: 'New Support Ticket',
+    description: 'Describe your issue and we will help you',
+    subjectLabel: 'Subject',
+    subjectPlaceholder: 'Brief description of your issue',
+    messageLabel: 'Message',
+    messagePlaceholder: 'Describe your issue in detail...',
+    cancel: 'Cancel',
+    creating: 'Creating...',
+    create: 'Create Ticket',
+  },
+
+  validation: {
+    subjectRequired: 'Subject is required',
+    subjectTooLong: 'Subject is too long (max 200 characters)',
+    messageRequired: 'Message is required',
+    messageTooLong: 'Message is too long (max 5000 characters)',
+  },
+
+  messages: {
+    ticketCreated: 'Ticket created successfully',
+    ticketCreateFailed: 'Failed to create ticket',
+    messageSent: 'Message sent',
+    messageSendFailed: 'Failed to send message',
+  },
+
+  messageInput: {
+    placeholder: 'Type your message...',
+    ticketClosed: 'Ticket closed',
+    ticketClosedDescription: 'This ticket has been closed. Create a new ticket if you need further assistance.',
+  },
+
+  messageList: {
+    noTicketSelected: 'No ticket selected',
+    noTicketSelectedDescription: 'Select a ticket from the list to view messages',
+    noMessages: 'No messages yet',
+    noMessagesDescription: 'Start the conversation by sending a message',
+    loadingOlder: 'Loading older messages...',
+    loadOlder: 'Load older messages',
+    supportTeam: 'Support Team',
+    staff: 'Staff',
+  },
+
+  time: {
+    justNow: 'Just now',
+    minutesAgo: '{count} min ago',
+    hoursAgo: '{count}h ago',
+    daysAgo: '{count}d ago',
+  },
+};

package/src/i18n/locales/ko.ts

@@ -0,0 +1,76 @@
+import type { SupportTranslations } from '../types';
+
+export const ko: SupportTranslations = {
+  layout: {
+    title: '고객지원 센터',
+    titleShort: '고객지원',
+    subtitle: '고객지원팀의 도움을 받으세요',
+    newTicket: '새 문의',
+  },
+
+  status: {
+    open: '열림',
+    waitingForUser: '회신 대기',
+    waitingForAdmin: '지원팀 대기',
+    resolved: '해결됨',
+    closed: '종료',
+  },
+
+  ticketList: {
+    noTickets: '문의 내역 없음',
+    noTicketsDescription: '첫 번째 문의를 등록하여 도움을 받으세요',
+    loadingMore: '불러오는 중...',
+    loadMore: '더 보기',
+    allLoaded: '총 {count}개의 문의가 로드됨',
+  },
+
+  createTicket: {
+    title: '새 문의',
+    description: '문제를 설명해 주시면 도움을 드리겠습니다',
+    subjectLabel: '제목',
+    subjectPlaceholder: '문제에 대한 간략한 설명',
+    messageLabel: '내용',
+    messagePlaceholder: '문제를 자세히 설명해 주세요...',
+    cancel: '취소',
+    creating: '생성 중...',
+    create: '문의 등록',
+  },
+
+  validation: {
+    subjectRequired: '제목을 입력해 주세요',
+    subjectTooLong: '제목이 너무 깁니다 (최대 200자)',
+    messageRequired: '내용을 입력해 주세요',
+    messageTooLong: '내용이 너무 깁니다 (최대 5000자)',
+  },
+
+  messages: {
+    ticketCreated: '문의가 등록되었습니다',
+    ticketCreateFailed: '문의 등록에 실패했습니다',
+    messageSent: '메시지가 전송되었습니다',
+    messageSendFailed: '메시지 전송에 실패했습니다',
+  },
+
+  messageInput: {
+    placeholder: '메시지를 입력하세요...',
+    ticketClosed: '문의 종료됨',
+    ticketClosedDescription: '이 문의는 종료되었습니다. 추가 도움이 필요하시면 새 문의를 등록해 주세요.',
+  },
+
+  messageList: {
+    noTicketSelected: '문의가 선택되지 않음',
+    noTicketSelectedDescription: '메시지를 보려면 목록에서 문의를 선택하세요',
+    noMessages: '메시지 없음',
+    noMessagesDescription: '메시지를 보내 대화를 시작하세요',
+    loadingOlder: '이전 메시지 불러오는 중...',
+    loadOlder: '이전 메시지 보기',
+    supportTeam: '고객지원팀',
+    staff: '담당자',
+  },
+
+  time: {
+    justNow: '방금 전',
+    minutesAgo: '{count}분 전',
+    hoursAgo: '{count}시간 전',
+    daysAgo: '{count}일 전',
+  },
+};

package/src/i18n/locales/ru.ts

@@ -0,0 +1,76 @@
+import type { SupportTranslations } from '../types';
+
+export const ru: SupportTranslations = {
+  layout: {
+    title: 'Центр поддержки',
+    titleShort: 'Поддержка',
+    subtitle: 'Получите помощь от нашей команды поддержки',
+    newTicket: 'Новое обращение',
+  },
+
+  status: {
+    open: 'Открыт',
+    waitingForUser: 'Ожидает вас',
+    waitingForAdmin: 'Ожидает поддержку',
+    resolved: 'Решён',
+    closed: 'Закрыт',
+  },
+
+  ticketList: {
+    noTickets: 'Нет обращений',
+    noTicketsDescription: 'Создайте первое обращение, чтобы получить помощь',
+    loadingMore: 'Загрузка...',
+    loadMore: 'Загрузить ещё',
+    allLoaded: 'Все {count} обращений загружено',
+  },
+
+  createTicket: {
+    title: 'Новое обращение',
+    description: 'Опишите вашу проблему, и мы поможем вам',
+    subjectLabel: 'Тема',
+    subjectPlaceholder: 'Краткое описание проблемы',
+    messageLabel: 'Сообщение',
+    messagePlaceholder: 'Опишите вашу проблему подробно...',
+    cancel: 'Отмена',
+    creating: 'Создание...',
+    create: 'Создать обращение',
+  },
+
+  validation: {
+    subjectRequired: 'Тема обязательна',
+    subjectTooLong: 'Тема слишком длинная (макс. 200 символов)',
+    messageRequired: 'Сообщение обязательно',
+    messageTooLong: 'Сообщение слишком длинное (макс. 5000 символов)',
+  },
+
+  messages: {
+    ticketCreated: 'Обращение создано',
+    ticketCreateFailed: 'Не удалось создать обращение',
+    messageSent: 'Сообщение отправлено',
+    messageSendFailed: 'Не удалось отправить сообщение',
+  },
+
+  messageInput: {
+    placeholder: 'Введите сообщение...',
+    ticketClosed: 'Обращение закрыто',
+    ticketClosedDescription: 'Это обращение закрыто. Создайте новое, если вам нужна помощь.',
+  },
+
+  messageList: {
+    noTicketSelected: 'Обращение не выбрано',
+    noTicketSelectedDescription: 'Выберите обращение из списка для просмотра сообщений',
+    noMessages: 'Нет сообщений',
+    noMessagesDescription: 'Начните диалог, отправив сообщение',
+    loadingOlder: 'Загрузка старых сообщений...',
+    loadOlder: 'Загрузить старые',
+    supportTeam: 'Служба поддержки',
+    staff: 'Сотрудник',
+  },
+
+  time: {
+    justNow: 'Только что',
+    minutesAgo: '{count} мин назад',
+    hoursAgo: '{count}ч назад',
+    daysAgo: '{count}д назад',
+  },
+};

package/src/i18n/types.ts

@@ -0,0 +1,99 @@
+/**
+ * Support Extension I18n Types
+ */
+
+import type { ExtensionKeys, PathKeys } from '@djangocfg/ext-base/i18n';
+
+/**
+ * All valid keys for support translations (with namespace)
+ */
+export type SupportKeys = ExtensionKeys<'support', SupportTranslations>;
+
+/**
+ * Keys without namespace prefix (for createTypedExtensionT)
+ */
+export type SupportLocalKeys = PathKeys<SupportTranslations>;
+
+export interface SupportTranslations {
+  /** Layout */
+  layout: {
+    title: string;
+    titleShort: string;
+    subtitle: string;
+    newTicket: string;
+  };
+
+  /** Ticket statuses */
+  status: {
+    open: string;
+    waitingForUser: string;
+    waitingForAdmin: string;
+    resolved: string;
+    closed: string;
+  };
+
+  /** Ticket list */
+  ticketList: {
+    noTickets: string;
+    noTicketsDescription: string;
+    loadingMore: string;
+    loadMore: string;
+    allLoaded: string;
+  };
+
+  /** Create ticket dialog */
+  createTicket: {
+    title: string;
+    description: string;
+    subjectLabel: string;
+    subjectPlaceholder: string;
+    messageLabel: string;
+    messagePlaceholder: string;
+    cancel: string;
+    creating: string;
+    create: string;
+  };
+
+  /** Validation */
+  validation: {
+    subjectRequired: string;
+    subjectTooLong: string;
+    messageRequired: string;
+    messageTooLong: string;
+  };
+
+  /** Messages */
+  messages: {
+    ticketCreated: string;
+    ticketCreateFailed: string;
+    messageSent: string;
+    messageSendFailed: string;
+  };
+
+  /** Message input */
+  messageInput: {
+    placeholder: string;
+    ticketClosed: string;
+    ticketClosedDescription: string;
+  };
+
+  /** Message list */
+  messageList: {
+    noTicketSelected: string;
+    noTicketSelectedDescription: string;
+    noMessages: string;
+    noMessagesDescription: string;
+    loadingOlder: string;
+    loadOlder: string;
+    supportTeam: string;
+    staff: string;
+  };
+
+  /** Time labels */
+  time: {
+    justNow: string;
+    minutesAgo: string;
+    hoursAgo: string;
+    daysAgo: string;
+  };
+}

package/src/layouts/SupportLayout/SupportLayout.tsx

@@ -7,8 +7,11 @@
 'use client';
 
 import { ArrowLeft, LifeBuoy, Plus } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { createTypedExtensionT } from '@djangocfg/ext-base/i18n';
+import { useT } from '@djangocfg/i18n';
+import { SUPPORT_NAMESPACE, type SupportTranslations } from '../../i18n';
 import { Button, ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@djangocfg/ui-core';
 
 import { SupportProvider } from '../../contexts/SupportContext';
@@ -20,10 +23,19 @@ import { SupportLayoutProvider, useSupportLayoutContext } from './context';
 // ─────────────────────────────────────────────────────────────────────────
 
 const SupportLayoutContent: React.FC = () => {
+  const baseT = useT();
+  const st = createTypedExtensionT<typeof SUPPORT_NAMESPACE, SupportTranslations>(baseT, SUPPORT_NAMESPACE);
   const { selectedTicket, selectTicket, openCreateDialog, getUnreadCount } =
     useSupportLayoutContext();
   const [isMobile, setIsMobile] = React.useState(false);
-  
+
+  const labels = useMemo(() => ({
+    title: st('layout.title'),
+    titleShort: st('layout.titleShort'),
+    subtitle: st('layout.subtitle'),
+    newTicket: st('layout.newTicket'),
+  }), [st]);
+
   React.useEffect(() => {
     const checkMobile = () => setIsMobile(window.innerWidth <= 768);
     checkMobile();
@@ -53,7 +65,7 @@ const SupportLayoutContent: React.FC = () => {
               <LifeBuoy className="h-6 w-6 text-primary" />
             )}
             <h1 className="text-xl font-semibold">
-              {selectedTicket ? selectedTicket.subject : 'Support'}
+              {selectedTicket ? selectedTicket.subject : labels.titleShort}
             </h1>
             {unreadCount > 0 && !selectedTicket && (
               <div className="h-5 w-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
@@ -64,7 +76,7 @@ const SupportLayoutContent: React.FC = () => {
           {!selectedTicket && (
             <Button onClick={openCreateDialog} size="sm">
               <Plus className="h-4 w-4 mr-2" />
-              New Ticket
+              {labels.newTicket}
             </Button>
           )}
         </div>
@@ -101,8 +113,8 @@ const SupportLayoutContent: React.FC = () => {
         <div className="flex items-center gap-3">
           <LifeBuoy className="h-7 w-7 text-primary" />
           <div>
-            <h1 className="text-2xl font-bold">Support Center</h1>
-            <p className="text-sm text-muted-foreground">Get help from our support team</p>
+            <h1 className="text-2xl font-bold">{labels.title}</h1>
+            <p className="text-sm text-muted-foreground">{labels.subtitle}</p>
           </div>
           {unreadCount > 0 && (
             <div className="h-6 w-6 bg-red-500 text-white text-sm rounded-full flex items-center justify-center">
@@ -113,7 +125,7 @@ const SupportLayoutContent: React.FC = () => {
 
         <Button onClick={openCreateDialog}>
           <Plus className="h-4 w-4 mr-2" />
-          New Ticket
+          {labels.newTicket}
         </Button>
       </div>
 

package/src/layouts/SupportLayout/components/CreateTicketDialog.tsx

@@ -7,10 +7,13 @@
 'use client';
 
 import { Loader2, Plus } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { createTypedExtensionT } from '@djangocfg/ext-base/i18n';
+import { useT } from '@djangocfg/i18n';
+import { SUPPORT_NAMESPACE, type SupportTranslations } from '../../../i18n';
 import {
     Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Form, FormControl,
     FormField, FormItem, FormLabel, FormMessage, Input, Textarea, useToast
@@ -22,16 +25,38 @@ import { useSupportLayoutContext } from '../context';
 
 import type { TicketFormData } from '../types';
 
-const createTicketSchema = z.object({
-  subject: z.string().min(1, 'Subject is required').max(200, 'Subject too long'),
-  message: z.string().min(1, 'Message is required').max(5000, 'Message too long'),
-});
-
 export const CreateTicketDialog: React.FC = () => {
+  const baseT = useT();
+  const st = createTypedExtensionT<typeof SUPPORT_NAMESPACE, SupportTranslations>(baseT, SUPPORT_NAMESPACE);
   const { uiState, createTicket, closeCreateDialog } = useSupportLayoutContext();
   const { toast } = useToast();
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
+  const labels = useMemo(() => ({
+    title: st('createTicket.title'),
+    description: st('createTicket.description'),
+    subjectLabel: st('createTicket.subjectLabel'),
+    subjectPlaceholder: st('createTicket.subjectPlaceholder'),
+    messageLabel: st('createTicket.messageLabel'),
+    messagePlaceholder: st('createTicket.messagePlaceholder'),
+    cancel: st('createTicket.cancel'),
+    creating: st('createTicket.creating'),
+    create: st('createTicket.create'),
+    ticketCreated: st('messages.ticketCreated'),
+    ticketCreateFailed: st('messages.ticketCreateFailed'),
+    validation: {
+      subjectRequired: st('validation.subjectRequired'),
+      subjectTooLong: st('validation.subjectTooLong'),
+      messageRequired: st('validation.messageRequired'),
+      messageTooLong: st('validation.messageTooLong'),
+    },
+  }), [st]);
+
+  const createTicketSchema = useMemo(() => z.object({
+    subject: z.string().min(1, labels.validation.subjectRequired).max(200, labels.validation.subjectTooLong),
+    message: z.string().min(1, labels.validation.messageRequired).max(5000, labels.validation.messageTooLong),
+  }), [labels.validation]);
+
   const form = useForm<TicketFormData>({
     resolver: zodResolver(createTicketSchema),
     defaultValues: {
@@ -45,10 +70,10 @@ export const CreateTicketDialog: React.FC = () => {
     try {
       await createTicket(data);
       form.reset();
-      toast.success('Support ticket created successfully');
+      toast.success(labels.ticketCreated);
     } catch (error) {
       supportLogger.error('Failed to create ticket:', error);
-      toast.error('Failed to create ticket. Please try again.');
+      toast.error(labels.ticketCreateFailed);
     } finally {
       setIsSubmitting(false);
     }
@@ -65,10 +90,10 @@ export const CreateTicketDialog: React.FC = () => {
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Plus className="h-5 w-5" />
-            Create Support Ticket
+            {labels.title}
           </DialogTitle>
           <DialogDescription>
-            Describe your issue and we'll help you resolve it as quickly as possible.
+            {labels.description}
           </DialogDescription>
         </DialogHeader>
 
@@ -79,9 +104,9 @@ export const CreateTicketDialog: React.FC = () => {
               name="subject"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Subject</FormLabel>
+                  <FormLabel>{labels.subjectLabel}</FormLabel>
                   <FormControl>
-                    <Input placeholder="Brief description of your issue..." {...field} />
+                    <Input placeholder={labels.subjectPlaceholder} {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -93,10 +118,10 @@ export const CreateTicketDialog: React.FC = () => {
               name="message"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Message</FormLabel>
+                  <FormLabel>{labels.messageLabel}</FormLabel>
                   <FormControl>
                     <Textarea
-                      placeholder="Describe your issue in detail. Include any error messages, steps to reproduce, or relevant information..."
+                      placeholder={labels.messagePlaceholder}
                       className="min-h-[120px]"
                       {...field}
                     />
@@ -113,18 +138,18 @@ export const CreateTicketDialog: React.FC = () => {
                 onClick={handleClose}
                 disabled={isSubmitting}
               >
-                Cancel
+                {labels.cancel}
               </Button>
               <Button type="submit" disabled={isSubmitting}>
                 {isSubmitting ? (
                   <>
                     <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                    Creating...
+                    {labels.creating}
                   </>
                 ) : (
                   <>
                     <Plus className="h-4 w-4 mr-2" />
-                    Create Ticket
+                    {labels.create}
                   </>
                 )}
               </Button>

package/src/layouts/SupportLayout/components/MessageInput.tsx

@@ -6,8 +6,11 @@
 'use client';
 
 import { Send } from 'lucide-react';
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 
+import { createTypedExtensionT } from '@djangocfg/ext-base/i18n';
+import { useT } from '@djangocfg/i18n';
+import { SUPPORT_NAMESPACE, type SupportTranslations } from '../../../i18n';
 import { Button, Textarea } from '@djangocfg/ui-core';
 import { useToast } from '@djangocfg/ui-core/hooks';
 
@@ -15,24 +18,34 @@ import { supportLogger } from '../../../utils/logger';
 import { useSupportLayoutContext } from '../context';
 
 export const MessageInput: React.FC = () => {
+  const baseT = useT();
+  const st = createTypedExtensionT<typeof SUPPORT_NAMESPACE, SupportTranslations>(baseT, SUPPORT_NAMESPACE);
   const { selectedTicket, sendMessage } = useSupportLayoutContext();
   const { toast } = useToast();
   const [message, setMessage] = useState('');
   const [isSending, setIsSending] = useState(false);
 
+  const labels = useMemo(() => ({
+    placeholder: st('messageInput.placeholder'),
+    ticketClosed: st('messageInput.ticketClosed'),
+    ticketClosedDescription: st('messageInput.ticketClosedDescription'),
+    messageSent: st('messages.messageSent'),
+    messageSendFailed: st('messages.messageSendFailed'),
+  }), [st]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!message.trim() || !selectedTicket) return;
 
     setIsSending(true);
     try {
       await sendMessage(message.trim());
       setMessage('');
-      toast.success('Message sent successfully');
+      toast.success(labels.messageSent);
     } catch (error) {
       supportLogger.error('Failed to send message:', error);
-      toast.error('Failed to send message');
+      toast.error(labels.messageSendFailed);
     } finally {
       setIsSending(false);
     }
@@ -58,12 +71,8 @@ export const MessageInput: React.FC = () => {
           value={message}
           onChange={(e) => setMessage(e.target.value)}
           onKeyDown={handleKeyDown}
-          placeholder={
-            canSendMessage
-              ? 'Type your message... (Shift+Enter for new line)'
-              : 'This ticket is closed'
-          }
-          className="min-h-[60px] max-h-[200px] transition-all duration-200 
+          placeholder={canSendMessage ? labels.placeholder : labels.ticketClosed}
+          className="min-h-[60px] max-h-[200px] transition-all duration-200
                      focus:ring-2 focus:ring-primary/20"
           disabled={!canSendMessage || isSending}
         />
@@ -79,7 +88,7 @@ export const MessageInput: React.FC = () => {
       </div>
       {!canSendMessage && (
         <p className="text-xs text-muted-foreground mt-2 animate-in fade-in slide-in-from-top-1 duration-200">
-          This ticket is closed. You cannot send new messages.
+          {labels.ticketClosedDescription}
         </p>
       )}
     </form>