@parlr/react-native 0.1.0

package/src/components/ParlrConversationList.tsx

@@ -0,0 +1,559 @@
+// ---------------------------------------------------------------------------
+// Parlr React Native SDK - Conversation List Screen
+// ---------------------------------------------------------------------------
+//
+// Displays all conversations for the current contact with last message preview,
+// unread badges, status indicators, and pull-to-refresh.
+// ---------------------------------------------------------------------------
+
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  RefreshControl,
+  StyleSheet,
+  Text,
+  View,
+  useColorScheme,
+  type ListRenderItemInfo,
+} from 'react-native';
+import type { Conversation } from '../core/types';
+import { ParlrContext } from '../provider/ParlrContext';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface ParlrConversationListProps {
+  /** Callback when a conversation is tapped. */
+  onSelectConversation: (conversationId: string) => void;
+  /** Callback for the "New Conversation" button. */
+  onNewConversation?: () => void;
+  /** Header title. Default: "Conversations". */
+  headerTitle?: string;
+  /** Primary accent color. */
+  accentColor?: string;
+  /** Show header bar. Default: true. */
+  showHeader?: boolean;
+  /** Filter conversations by status. */
+  statusFilter?: 'open' | 'closed' | 'pending';
+}
+
+// ---------------------------------------------------------------------------
+// i18n
+// ---------------------------------------------------------------------------
+
+function getI18n(locale?: string) {
+  if (locale?.startsWith('en')) {
+    return {
+      headerTitle: 'Conversations',
+      newConversation: 'New conversation',
+      empty: 'No conversations yet',
+      emptyDescription: 'Start a new conversation to get help.',
+      open: 'Open',
+      closed: 'Closed',
+      pending: 'Pending',
+      unread: 'unread',
+    };
+  }
+  return {
+    headerTitle: 'Conversations',
+    newConversation: 'Nouvelle conversation',
+    empty: 'Aucune conversation',
+    emptyDescription: 'D\u00e9marrez une conversation pour obtenir de l\u2019aide.',
+    open: 'Ouvert',
+    closed: 'Ferm\u00e9',
+    pending: 'En attente',
+    unread: 'non lu(s)',
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatRelativeTime(iso: string | null, locale?: string): string {
+  if (!iso) return '';
+  try {
+    const date = new Date(iso);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMin = Math.floor(diffMs / 60_000);
+    const diffH = Math.floor(diffMs / 3_600_000);
+    const diffD = Math.floor(diffMs / 86_400_000);
+
+    const isFr = !locale?.startsWith('en');
+
+    if (diffMin < 1) return isFr ? '\u00c0 l\u2019instant' : 'Just now';
+    if (diffMin < 60) return `${diffMin}min`;
+    if (diffH < 24) return `${diffH}h`;
+    if (diffD < 7) return `${diffD}${isFr ? 'j' : 'd'}`;
+    return date.toLocaleDateString(locale, { month: 'short', day: 'numeric' });
+  } catch {
+    return '';
+  }
+}
+
+function statusColor(status: string): string {
+  switch (status) {
+    case 'open':
+      return '#22c55e';
+    case 'pending':
+      return '#f59e0b';
+    case 'closed':
+      return '#94a3b8';
+    default:
+      return '#94a3b8';
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Conversation Row
+// ---------------------------------------------------------------------------
+
+function ConversationRow({
+  conversation,
+  onPress,
+  accentColor,
+  locale,
+  isDark,
+}: {
+  conversation: Conversation;
+  onPress: () => void;
+  accentColor: string;
+  locale?: string;
+  isDark: boolean;
+}) {
+  const i18n = getI18n(locale);
+  const hasUnread = conversation.unreadCount > 0;
+  const assigneeName = conversation.assignee?.name;
+  const assigneeInitial = assigneeName ? assigneeName.charAt(0).toUpperCase() : null;
+  const statusLabel =
+    conversation.status === 'open'
+      ? i18n.open
+      : conversation.status === 'closed'
+        ? i18n.closed
+        : i18n.pending;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.row,
+        isDark ? styles.rowDark : styles.rowLight,
+        pressed && styles.rowPressed,
+      ]}
+      accessibilityRole="button"
+      accessibilityLabel={`${conversation.subject ?? 'Conversation'}, ${statusLabel}, ${conversation.unreadCount} ${i18n.unread}`}
+    >
+      {/* Avatar */}
+      <View style={[styles.avatar, { backgroundColor: assigneeInitial ? accentColor : '#e2e8f0' }]}>
+        <Text style={styles.avatarText}>
+          {assigneeInitial ?? '#'}
+        </Text>
+      </View>
+
+      {/* Content */}
+      <View style={styles.rowContent}>
+        <View style={styles.rowTopLine}>
+          <Text
+            style={[
+              styles.rowTitle,
+              isDark && styles.rowTitleDark,
+              hasUnread && styles.rowTitleBold,
+            ]}
+            numberOfLines={1}
+          >
+            {conversation.subject ?? (assigneeName ? `${assigneeName}` : 'Support')}
+          </Text>
+          <Text style={[styles.rowTime, isDark && styles.rowTimeDark]}>
+            {formatRelativeTime(conversation.lastMessageAt, locale)}
+          </Text>
+        </View>
+
+        <View style={styles.rowBottomLine}>
+          <View style={styles.statusBadgeRow}>
+            <View style={[styles.statusDot, { backgroundColor: statusColor(conversation.status) }]} />
+            <Text style={[styles.statusLabel, isDark && styles.statusLabelDark]} numberOfLines={1}>
+              {statusLabel}
+            </Text>
+          </View>
+
+          {hasUnread && (
+            <View style={[styles.unreadBadge, { backgroundColor: accentColor }]}>
+              <Text style={styles.unreadText}>
+                {conversation.unreadCount > 99 ? '99+' : conversation.unreadCount}
+              </Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Empty State
+// ---------------------------------------------------------------------------
+
+function ListEmptyState({
+  onNewConversation,
+  accentColor,
+  locale,
+  isDark,
+}: {
+  onNewConversation?: () => void;
+  accentColor: string;
+  locale?: string;
+  isDark: boolean;
+}) {
+  const i18n = getI18n(locale);
+  return (
+    <View style={styles.emptyContainer}>
+      <Text style={[styles.emptyIcon]}>{'💬'}</Text>
+      <Text style={[styles.emptyTitle, isDark && styles.emptyTitleDark]}>
+        {i18n.empty}
+      </Text>
+      <Text style={[styles.emptyDescription, isDark && styles.emptyDescriptionDark]}>
+        {i18n.emptyDescription}
+      </Text>
+      {onNewConversation && (
+        <Pressable
+          onPress={onNewConversation}
+          style={[styles.newButton, { backgroundColor: accentColor }]}
+          accessibilityRole="button"
+          accessibilityLabel={i18n.newConversation}
+        >
+          <Text style={styles.newButtonText}>{i18n.newConversation}</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function ParlrConversationList({
+  onSelectConversation,
+  onNewConversation,
+  headerTitle,
+  accentColor: accentColorProp,
+  showHeader = true,
+  statusFilter,
+}: ParlrConversationListProps) {
+  const isDark = useColorScheme() === 'dark';
+  const { config, isReady, conversations, refreshConversations } =
+    useContext(ParlrContext);
+  const accentColor = accentColorProp ?? '#6366f1';
+  const i18n = getI18n(config.locale);
+
+  const [refreshing, setRefreshing] = useState(false);
+
+  // Filter conversations if a status filter is specified.
+  const filteredConversations = statusFilter
+    ? conversations.filter((c) => c.status === statusFilter)
+    : conversations;
+
+  // Sort by lastMessageAt descending.
+  const sortedConversations = [...filteredConversations].sort((a, b) => {
+    const aTime = a.lastMessageAt ? new Date(a.lastMessageAt).getTime() : 0;
+    const bTime = b.lastMessageAt ? new Date(b.lastMessageAt).getTime() : 0;
+    return bTime - aTime;
+  });
+
+  // Refresh on mount.
+  useEffect(() => {
+    if (isReady) {
+      refreshConversations();
+    }
+  }, [isReady, refreshConversations]);
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      await refreshConversations();
+    } finally {
+      setRefreshing(false);
+    }
+  }, [refreshConversations]);
+
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<Conversation>) => (
+      <ConversationRow
+        conversation={item}
+        onPress={() => onSelectConversation(item.id)}
+        accentColor={accentColor}
+        locale={config.locale}
+        isDark={isDark}
+      />
+    ),
+    [onSelectConversation, accentColor, config.locale, isDark],
+  );
+
+  const keyExtractor = useCallback((item: Conversation) => item.id, []);
+
+  // --- Loading ---
+  if (!isReady) {
+    return (
+      <View style={[styles.loadingContainer, isDark && styles.loadingContainerDark]}>
+        <ActivityIndicator size="large" color={accentColor} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.root, isDark && styles.rootDark]}>
+      {/* Header */}
+      {showHeader && (
+        <View style={[styles.header, isDark ? styles.headerDark : styles.headerLight]}>
+          <Text style={[styles.headerTitle, isDark && styles.headerTitleDark]}>
+            {headerTitle ?? i18n.headerTitle}
+          </Text>
+          {onNewConversation && (
+            <Pressable
+              onPress={onNewConversation}
+              style={[styles.headerButton, { backgroundColor: accentColor }]}
+              hitSlop={8}
+              accessibilityRole="button"
+              accessibilityLabel={i18n.newConversation}
+            >
+              <Text style={styles.headerButtonText}>+</Text>
+            </Pressable>
+          )}
+        </View>
+      )}
+
+      {/* List */}
+      <FlatList
+        data={sortedConversations}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        contentContainerStyle={sortedConversations.length === 0 ? styles.emptyList : undefined}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={handleRefresh}
+            tintColor={accentColor}
+            colors={[accentColor]}
+          />
+        }
+        ListEmptyComponent={
+          <ListEmptyState
+            onNewConversation={onNewConversation}
+            accentColor={accentColor}
+            locale={config.locale}
+            isDark={isDark}
+          />
+        }
+        showsVerticalScrollIndicator={false}
+        removeClippedSubviews={true}
+      />
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  rootDark: {
+    backgroundColor: '#0f172a',
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#ffffff',
+  },
+  loadingContainerDark: {
+    backgroundColor: '#0f172a',
+  },
+
+  // Header
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingTop: 56,
+    paddingBottom: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerLight: {
+    backgroundColor: '#ffffff',
+    borderBottomColor: '#e2e8f0',
+  },
+  headerDark: {
+    backgroundColor: '#0f172a',
+    borderBottomColor: '#1e293b',
+  },
+  headerTitle: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#0f172a',
+  },
+  headerTitleDark: {
+    color: '#f1f5f9',
+  },
+  headerButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerButtonText: {
+    color: '#ffffff',
+    fontSize: 20,
+    fontWeight: '600',
+    lineHeight: 22,
+  },
+
+  // Row
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  rowLight: {
+    borderBottomColor: '#f1f5f9',
+  },
+  rowDark: {
+    borderBottomColor: '#1e293b',
+  },
+  rowPressed: {
+    opacity: 0.7,
+  },
+  avatar: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  avatarText: {
+    color: '#ffffff',
+    fontSize: 17,
+    fontWeight: '600',
+  },
+  rowContent: {
+    flex: 1,
+  },
+  rowTopLine: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  rowTitle: {
+    flex: 1,
+    fontSize: 15,
+    color: '#0f172a',
+    marginRight: 8,
+  },
+  rowTitleDark: {
+    color: '#f1f5f9',
+  },
+  rowTitleBold: {
+    fontWeight: '600',
+  },
+  rowTime: {
+    fontSize: 12,
+    color: '#94a3b8',
+  },
+  rowTimeDark: {
+    color: '#64748b',
+  },
+  rowBottomLine: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  statusBadgeRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  statusDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 5,
+  },
+  statusLabel: {
+    fontSize: 13,
+    color: '#64748b',
+  },
+  statusLabelDark: {
+    color: '#94a3b8',
+  },
+  unreadBadge: {
+    minWidth: 20,
+    height: 20,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 6,
+  },
+  unreadText: {
+    color: '#ffffff',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+
+  // Empty state
+  emptyList: {
+    flexGrow: 1,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 32,
+    paddingVertical: 48,
+  },
+  emptyIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#0f172a',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  emptyTitleDark: {
+    color: '#f1f5f9',
+  },
+  emptyDescription: {
+    fontSize: 14,
+    color: '#64748b',
+    textAlign: 'center',
+    lineHeight: 20,
+    marginBottom: 24,
+  },
+  emptyDescriptionDark: {
+    color: '#94a3b8',
+  },
+  newButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 22,
+  },
+  newButtonText: {
+    color: '#ffffff',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+});