@djangocfg/ext-support 1.0.20 → 1.0.22

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

@@ -7,9 +7,12 @@
 
 import { Headphones, Loader2, MessageSquare, User } from 'lucide-react';
 import moment from 'moment';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
+import { createTypedExtensionT } from '@djangocfg/ext-base/i18n';
+import { useT } from '@djangocfg/i18n';
+import { SUPPORT_NAMESPACE, type SupportTranslations } from '../../../i18n';
 import {
     Avatar, AvatarFallback, AvatarImage, Button, Card, CardContent, ScrollArea, Skeleton
 } from '@djangocfg/ui-core';
@@ -33,9 +36,13 @@ interface MessageBubbleProps {
   message: Message;
   isFromUser: boolean;
   currentUser: any;
+  labels: {
+    supportTeam: string;
+    staff: string;
+  };
 }
 
-const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isFromUser, currentUser }) => {
+const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isFromUser, currentUser, labels }) => {
   const sender = message.sender;
 
   // Pre-compute initials
@@ -56,7 +63,7 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isFromUser, curr
       {!isFromUser && (
         <Avatar className="h-8 w-8 shrink-0">
           {sender?.avatar ? (
-            <AvatarImage src={sender.avatar} alt={sender.display_username || 'Support'} />
+            <AvatarImage src={sender.avatar} alt={sender.display_username || labels.supportTeam} />
           ) : (
             <AvatarFallback className="bg-primary text-primary-foreground">
               {sender?.is_staff ? (
@@ -76,8 +83,8 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isFromUser, curr
         {/* Sender name (for support messages) */}
         {!isFromUser && sender && (
           <span className="text-xs text-muted-foreground px-1">
-            {sender.display_username || sender.email || 'Support Team'}
-            {sender.is_staff && ' (Staff)'}
+            {sender.display_username || sender.email || labels.supportTeam}
+            {sender.is_staff && ` (${labels.staff})`}
           </span>
         )}
 
@@ -117,9 +124,22 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isFromUser, curr
 };
 
 export const MessageList: React.FC = () => {
+  const baseT = useT();
+  const st = createTypedExtensionT<typeof SUPPORT_NAMESPACE, SupportTranslations>(baseT, SUPPORT_NAMESPACE);
   const { selectedTicket } = useSupportLayoutContext();
   const { user } = useAuth();
 
+  const labels = useMemo(() => ({
+    noTicketSelected: st('messageList.noTicketSelected'),
+    noTicketSelectedDescription: st('messageList.noTicketSelectedDescription'),
+    noMessages: st('messageList.noMessages'),
+    noMessagesDescription: st('messageList.noMessagesDescription'),
+    loadingOlder: st('messageList.loadingOlder'),
+    loadOlder: st('messageList.loadOlder'),
+    supportTeam: st('messageList.supportTeam'),
+    staff: st('messageList.staff'),
+  }), [st]);
+
   const {
     messages,
     isLoading,
@@ -193,9 +213,9 @@ export const MessageList: React.FC = () => {
     return (
       <div className="flex flex-col items-center justify-center h-full p-8 text-center animate-in fade-in zoom-in-95 duration-300">
         <MessageSquare className="h-16 w-16 text-muted-foreground mb-4 animate-bounce" />
-        <h3 className="text-lg font-semibold mb-2">No ticket selected</h3>
+        <h3 className="text-lg font-semibold mb-2">{labels.noTicketSelected}</h3>
         <p className="text-sm text-muted-foreground max-w-sm">
-          Select a ticket from the list to view the conversation
+          {labels.noTicketSelectedDescription}
         </p>
       </div>
     );
@@ -222,9 +242,9 @@ export const MessageList: React.FC = () => {
     return (
       <div className="flex flex-col items-center justify-center h-full p-8 text-center animate-in fade-in zoom-in-95 duration-300">
         <MessageSquare className="h-16 w-16 text-muted-foreground mb-4 animate-bounce" />
-        <h3 className="text-lg font-semibold mb-2">No messages yet</h3>
+        <h3 className="text-lg font-semibold mb-2">{labels.noMessages}</h3>
         <p className="text-sm text-muted-foreground max-w-sm">
-          Start the conversation by sending a message below
+          {labels.noMessagesDescription}
         </p>
       </div>
     );
@@ -241,7 +261,7 @@ export const MessageList: React.FC = () => {
           <div className="flex justify-center py-4">
             <div className="flex items-center gap-2 text-muted-foreground">
               <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-sm">Loading older messages...</span>
+              <span className="text-sm">{labels.loadingOlder}</span>
             </div>
           </div>
         )}
@@ -255,7 +275,7 @@ export const MessageList: React.FC = () => {
               onClick={handleLoadMore}
               className="text-xs"
             >
-              Load older messages ({totalCount > 0 ? `${messages.length}/${totalCount}` : ''})
+              {labels.loadOlder} ({totalCount > 0 ? `${messages.length}/${totalCount}` : ''})
             </Button>
           </div>
         )}
@@ -304,6 +324,7 @@ export const MessageList: React.FC = () => {
                   message={message}
                   isFromUser={!!isFromUser}
                   currentUser={user}
+                  labels={{ supportTeam: labels.supportTeam, staff: labels.staff }}
                 />
               </div>
             </React.Fragment>

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

@@ -7,8 +7,11 @@
 
 import { Clock, MessageSquare } from 'lucide-react';
 import moment from 'moment';
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 
+import { createTypedExtensionT } from '@djangocfg/ext-base/i18n';
+import { useT } from '@djangocfg/i18n';
+import { SUPPORT_NAMESPACE, type SupportTranslations } from '../../../i18n';
 import { Badge, Card, CardContent } from '@djangocfg/ui-core';
 import { cn } from '@djangocfg/ui-core/lib';
 
@@ -39,22 +42,42 @@ const getStatusBadgeVariant = (
   }
 };
 
-const formatRelativeTime = (date: string | null | undefined): string => {
-  if (!date) return 'N/A';
+export const TicketCard: React.FC<TicketCardProps> = ({ ticket, isSelected, onClick }) => {
+  const baseT = useT();
+  const st = createTypedExtensionT<typeof SUPPORT_NAMESPACE, SupportTranslations>(baseT, SUPPORT_NAMESPACE);
 
-  const m = moment.utc(date).local();
-  const now = moment();
-  const diffInSeconds = now.diff(m, 'seconds');
+  const labels = useMemo(() => ({
+    status: {
+      open: st('status.open'),
+      waiting_for_user: st('status.waitingForUser'),
+      waiting_for_admin: st('status.waitingForAdmin'),
+      resolved: st('status.resolved'),
+      closed: st('status.closed'),
+    },
+    time: {
+      justNow: st('time.justNow'),
+      minutesAgo: st('time.minutesAgo'),
+      hoursAgo: st('time.hoursAgo'),
+      daysAgo: st('time.daysAgo'),
+    },
+  }), [st]);
 
-  if (diffInSeconds < 60) return 'Just now';
-  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
-  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
-  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`;
+  const formatRelativeTime = useCallback((date: string | null | undefined): string => {
+    if (!date) return 'N/A';
 
-  return m.format('MMM D, YYYY');
-};
+    const m = moment.utc(date).local();
+    const now = moment();
+    const diffInSeconds = now.diff(m, 'seconds');
 
-export const TicketCard: React.FC<TicketCardProps> = ({ ticket, isSelected, onClick }) => {
+    if (diffInSeconds < 60) return labels.time.justNow;
+    if (diffInSeconds < 3600) return labels.time.minutesAgo.replace('{count}', String(Math.floor(diffInSeconds / 60)));
+    if (diffInSeconds < 86400) return labels.time.hoursAgo.replace('{count}', String(Math.floor(diffInSeconds / 3600)));
+    if (diffInSeconds < 604800) return labels.time.daysAgo.replace('{count}', String(Math.floor(diffInSeconds / 86400)));
+
+    return m.format('MMM D, YYYY');
+  }, [labels.time]);
+
+  const statusLabel = labels.status[ticket.status as keyof typeof labels.status] || ticket.status || labels.status.open;
   return (
     <Card
       className={cn(
@@ -81,7 +104,7 @@ export const TicketCard: React.FC<TicketCardProps> = ({ ticket, isSelected, onCl
         <div className="flex items-center justify-between text-xs text-muted-foreground">
           <div className="flex items-center gap-3">
             <Badge variant={getStatusBadgeVariant(ticket.status || 'open')} className="text-xs">
-              {ticket.status || 'open'}
+              {statusLabel}
             </Badge>
             <div className="flex items-center gap-1">
               <Clock className="h-3 w-3" />

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

@@ -6,8 +6,11 @@
 'use client';
 
 import { Loader2, MessageSquare } from 'lucide-react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo } from 'react';
 
+import { createTypedExtensionT } from '@djangocfg/ext-base/i18n';
+import { useT } from '@djangocfg/i18n';
+import { SUPPORT_NAMESPACE, type SupportTranslations } from '../../../i18n';
 import { Button, ScrollArea, Skeleton } from '@djangocfg/ui-core';
 
 import { useSupportLayoutContext } from '../context';
@@ -16,6 +19,8 @@ import { useInfiniteTickets } from '../hooks';
 import { TicketCard } from './TicketCard';
 
 export const TicketList: React.FC = () => {
+  const baseT = useT();
+  const st = createTypedExtensionT<typeof SUPPORT_NAMESPACE, SupportTranslations>(baseT, SUPPORT_NAMESPACE);
   const { selectedTicket, selectTicket } = useSupportLayoutContext();
   const {
     tickets,
@@ -27,6 +32,14 @@ export const TicketList: React.FC = () => {
     refresh
   } = useInfiniteTickets();
 
+  const labels = useMemo(() => ({
+    noTickets: st('ticketList.noTickets'),
+    noTicketsDescription: st('ticketList.noTicketsDescription'),
+    loadingMore: st('ticketList.loadingMore'),
+    loadMore: st('ticketList.loadMore'),
+    allLoaded: st('ticketList.allLoaded'),
+  }), [st]);
+
   const scrollRef = useRef<HTMLDivElement>(null);
   const observerRef = useRef<IntersectionObserver | null>(null);
   const loadMoreRef = useRef<HTMLDivElement>(null);
@@ -90,9 +103,9 @@ export const TicketList: React.FC = () => {
     return (
       <div className="flex flex-col items-center justify-center h-full p-8 text-center animate-in fade-in zoom-in-95 duration-300">
         <MessageSquare className="h-16 w-16 text-muted-foreground mb-4 animate-bounce" />
-        <h3 className="text-lg font-semibold mb-2">No tickets yet</h3>
+        <h3 className="text-lg font-semibold mb-2">{labels.noTickets}</h3>
         <p className="text-sm text-muted-foreground max-w-sm">
-          Create your first support ticket to get help from our team
+          {labels.noTicketsDescription}
         </p>
       </div>
     );
@@ -123,7 +136,7 @@ export const TicketList: React.FC = () => {
           <div className="flex justify-center py-4">
             <div className="flex items-center gap-2 text-muted-foreground">
               <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-sm">Loading more tickets...</span>
+              <span className="text-sm">{labels.loadingMore}</span>
             </div>
           </div>
         )}
@@ -137,7 +150,7 @@ export const TicketList: React.FC = () => {
               onClick={loadMore}
               className="text-xs"
             >
-              Load more ({totalCount > 0 ? `${tickets.length}/${totalCount}` : ''})
+              {labels.loadMore} ({totalCount > 0 ? `${tickets.length}/${totalCount}` : ''})
             </Button>
           </div>
         )}
@@ -145,7 +158,7 @@ export const TicketList: React.FC = () => {
         {/* End message */}
         {!hasMore && tickets.length > 0 && (
           <div className="text-center py-4 text-sm text-muted-foreground">
-            All {totalCount} tickets loaded
+            {labels.allLoaded.replace('{count}', String(totalCount))}
           </div>
         )}
       </div>