@djangocfg/ext-support 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ext-support",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "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,29 +64,33 @@
     "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.124",
+    "@djangocfg/ext-base": "^1.0.18",
+    "@djangocfg/i18n": "^2.1.124",
+    "@djangocfg/ui-core": "^2.1.124",
+    "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
     "next": "^16",
+    "next-intl": "^4",
     "p-retry": "^7.0.0",
     "react": "^19",
     "react-hook-form": "^7.69.0",
-    "@hookform/resolvers": "^5.2.2",
     "swr": "^2.3.7",
     "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.124",
+    "@djangocfg/ext-base": "^1.0.18",
+    "@djangocfg/i18n": "^2.1.124",
+    "@djangocfg/ui-core": "^2.1.124",
+    "@djangocfg/typescript-config": "^2.1.124",
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     "consola": "^3.4.2",
     "moment": "^2.30.1",
+    "next-intl": "^4.1.0",
     "p-retry": "^7.0.0",
     "swr": "^2.3.7",
     "tsup": "^8.5.0",

package/src/i18n/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Support Extension I18n
+ *
+ * Self-contained translations - no app configuration needed.
+ *
+ * @example
+ * ```tsx
+ * import { useSupportT } from '@djangocfg/ext-support/i18n';
+ *
+ * function MyComponent() {
+ *   const t = useSupportT();
+ *   return <h1>{t('layout.title')}</h1>;
+ * }
+ * ```
+ */
+
+// Self-contained hook (recommended)
+export { useSupportT } from './useSupportT';
+
+// Types
+export type { SupportTranslations, SupportLocalKeys } from './types';
+
+// Locales (for direct access if needed)
+export { en } from './locales/en';
+export { ru } from './locales/ru';
+export { ko } from './locales/ko';

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,105 @@
+/**
+ * Support Extension I18n Types
+ */
+
+/**
+ * Helper type to get dot-notation paths from nested object
+ */
+type PathKeys<T, Prefix extends string = ''> = T extends object
+  ? {
+      [K in keyof T]: K extends string
+        ? T[K] extends object
+          ? PathKeys<T[K], `${Prefix}${K}.`>
+          : `${Prefix}${K}`
+        : never;
+    }[keyof T]
+  : never;
+
+/**
+ * Keys for support translations
+ */
+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/i18n/useSupportT.ts

@@ -0,0 +1,60 @@
+'use client';
+
+/**
+ * Self-contained translation hook for ext-support
+ *
+ * Uses built-in translations, no app configuration needed.
+ */
+
+import { useLocale } from 'next-intl';
+import { useMemo, useCallback } from 'react';
+
+import type { SupportTranslations, SupportLocalKeys } from './types';
+import { en } from './locales/en';
+import { ru } from './locales/ru';
+import { ko } from './locales/ko';
+
+const translations: Record<string, SupportTranslations> = { en, ru, ko };
+
+/**
+ * Get nested value from object by dot-notation path
+ */
+function getNestedValue(obj: Record<string, unknown>, path: string): string {
+  const keys = path.split('.');
+  let result: unknown = obj;
+
+  for (const key of keys) {
+    if (result && typeof result === 'object' && key in result) {
+      result = (result as Record<string, unknown>)[key];
+    } else {
+      return path; // Return key if not found
+    }
+  }
+
+  return typeof result === 'string' ? result : path;
+}
+
+/**
+ * Self-contained translation hook for support extension
+ *
+ * Uses built-in translations based on current locale from next-intl.
+ * No need to add translations to app's i18n config.
+ *
+ * @example
+ * ```tsx
+ * function TicketList() {
+ *   const t = useSupportT();
+ *   return <h1>{t('layout.title')}</h1>;
+ * }
+ * ```
+ */
+export function useSupportT(): (key: SupportLocalKeys) => string {
+  const locale = useLocale();
+
+  const t = useMemo(() => translations[locale] || translations.en, [locale]);
+
+  return useCallback(
+    (key: SupportLocalKeys): string => getNestedValue(t as unknown as Record<string, unknown>, key),
+    [t]
+  );
+}

package/src/layouts/SupportLayout/SupportLayout.tsx

@@ -7,8 +7,9 @@
 'use client';
 
 import { ArrowLeft, LifeBuoy, Plus } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useSupportT } from '../../i18n';
 import { Button, ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@djangocfg/ui-core';
 
 import { SupportProvider } from '../../contexts/SupportContext';
@@ -20,10 +21,18 @@ import { SupportLayoutProvider, useSupportLayoutContext } from './context';
 // ─────────────────────────────────────────────────────────────────────────
 
 const SupportLayoutContent: React.FC = () => {
+  const st = useSupportT();
   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 +62,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 +73,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 +110,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 +122,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,11 @@
 '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 { useSupportT } from '../../../i18n';
 import {
     Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Form, FormControl,
     FormField, FormItem, FormLabel, FormMessage, Input, Textarea, useToast
@@ -22,16 +23,37 @@ 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 st = useSupportT();
   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 +67,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 +87,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 +101,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 +115,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 +135,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>