@appsupportkit/support-sdk 0.2.0 → 0.3.0

package/src/types.ts

@@ -1,4 +1,5 @@
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { Language } from './i18n/languages';
 
 export type QueryType = 'feedback' | 'feature_request' | 'bug_report';
 export type QueryStatus = 'open' | 'resolved';
@@ -71,23 +72,45 @@ export interface SupportButtonProps {
    * installed — it is an optional peer dependency.
    */
   expoProjectId?: string;
+  /**
+   * Pre-selects a language in the picker the first time a user opens support.
+   * Pass it when the host app already knows what the user reads — an in-app
+   * language setting beats the device locale, which is what the SDK falls
+   * back to. It is a default, not an override: the user still chooses, and a
+   * choice they have already made always wins.
+   */
+  defaultLanguage?: Language;
 }
 
 export interface ThreadMessage {
   id: string;
   sender: MessageSender;
+  /**
+   * Already in the user's language: their own messages as they wrote them,
+   * support replies translated. The server does the choosing — see the
+   * get-threads function.
+   */
   body: string;
   created_at: string;
-  admin_name: string | null;
+  /**
+   * A support reply whose translation hasn't landed yet. `body` currently
+   * holds the English original; it will change under the reader shortly, so
+   * the UI says so rather than letting it flicker.
+   */
+  translation_pending: boolean;
 }
 
+/**
+ * Note the absence of any admin identity: end users see one support team,
+ * not the people staffing it, so the names never leave the server. The
+ * dashboard still shows who wrote and who resolved what.
+ */
 export interface Thread {
   id: string;
   type: QueryType;
   status: QueryStatus;
   created_at: string;
   resolved_at: string | null;
-  resolved_by_name: string | null;
   app_version: string;
   unread_count: number;
   last_message: {
@@ -101,8 +124,15 @@ export interface Thread {
 export interface ThreadsResponse {
   threads: Thread[];
   total_unread: number;
+  /** Null when this user has never picked one — the SDK then asks. */
+  language: string | null;
 }
 
+/**
+ * English labels, kept for host apps that render their own entry points.
+ * Inside the sheet the labels come from the string table instead, so they
+ * follow the user's language.
+ */
 export const QUERY_TYPE_LABEL: Record<QueryType, string> = {
   feedback: 'Feedback',
   feature_request: 'Feature request',

package/src/useSupportThreads.ts

@@ -21,6 +21,7 @@ import {
   SupportApiError,
   type ApiConfig,
 } from './api';
+import type { StringKey } from './i18n';
 import type { Thread } from './types';
 import {
   latestAdminMessageAt,
@@ -50,10 +51,14 @@ const MARK_READ_BACKOFF_MS = 1_500;
  * an integration mistake — the end user retrying forever won't fix a key
  * that doesn't match the app — so the real cause is logged for whoever is
  * running the build instead of hidden behind "couldn't load".
+ *
+ * Returns a key rather than a message: the hook has no business knowing what
+ * language the sheet is in, and resolving it here would make every callback
+ * depend on the translator.
  */
-function loadErrorMessage(e: unknown): string {
+function loadErrorKey(e: unknown): StringKey {
   if (e instanceof SupportApiError) {
-    if (e.offline) return "You're offline — check your connection";
+    if (e.offline) return 'error.offline';
     if (e.status === 401 || e.status === 403) {
       if (__DEV__) {
         console.error(
@@ -62,11 +67,11 @@ function loadErrorMessage(e: unknown): string {
             '`appName` matches that app exactly.',
         );
       }
-      return 'Support is unavailable right now';
+      return 'error.unavailable';
     }
-    if (e.status === 429) return 'Too many requests — try again in a bit';
+    if (e.status === 429) return 'error.loadRateLimited';
   }
-  return "Couldn't load your conversations";
+  return 'error.loadFailed';
 }
 
 interface ReadAttempt {
@@ -87,7 +92,16 @@ export interface SupportThreadsState {
   /** User-pulled refresh with content already on screen. */
   refreshing: boolean;
   /** Set only when there is nothing cached; background failures stay quiet. */
-  error: string | null;
+  errorKey: StringKey | null;
+  /** The language this user picked, or null if they never have. */
+  serverLanguage: string | null;
+  /**
+   * False until the first successful load. `serverLanguage === null` only
+   * means "never picked" once this is true — before that it means "don't
+   * know yet", and showing the picker on a guess would nag a user who
+   * answered on another device.
+   */
+  languageLoaded: boolean;
   /** User-initiated refresh (pull-to-refresh, retry button). */
   refresh: () => void;
   /** Awaited by send/submit handlers so the list reflects the write. */
@@ -114,7 +128,9 @@ export function useSupportThreads({
   const [totalUnread, setTotalUnread] = useState(0);
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [errorKey, setErrorKey] = useState<StringKey | null>(null);
+  const [serverLanguage, setServerLanguage] = useState<string | null>(null);
+  const [languageLoaded, setLanguageLoaded] = useState(false);
 
   const mounted = useRef(true);
   /** Last server payload, before local read reconciliation. */
@@ -256,7 +272,9 @@ export function useSupportThreads({
 
         rawThreads.current = data.threads;
         watermarks.current = pruneWatermarks(watermarks.current, data.threads);
-        setError(null);
+        setErrorKey(null);
+        setServerLanguage(data.language);
+        setLanguageLoaded(true);
         publish();
 
         // Replies that arrived while the user is sitting in the thread are
@@ -267,7 +285,7 @@ export function useSupportThreads({
       } catch (e) {
         if (!mounted.current) return;
         // A failed background poll must not blow away cached threads.
-        if (rawThreads.current === null) setError(loadErrorMessage(e));
+        if (rawThreads.current === null) setErrorKey(loadErrorKey(e));
       } finally {
         if (mounted.current) {
           if (spinner) setRefreshing(false);
@@ -365,7 +383,9 @@ export function useSupportThreads({
     totalUnread,
     loading,
     refreshing,
-    error,
+    errorKey,
+    serverLanguage,
+    languageLoaded,
     refresh,
     reload,
   };

package/src/utils.ts

@@ -1,32 +1,37 @@
+import type { Translator } from './i18n';
+
+// Dates and times follow the language the user picked, not the device's:
+// a sheet that says "Traduction…" above "2 days ago" reads as broken.
+
 /** "2h ago" relative time — mirrors the web dashboard's formatting. */
-export function relativeTime(iso: string): string {
+export function relativeTime(iso: string, strings: Translator): string {
   const then = new Date(iso).getTime();
   const seconds = Math.max(0, Math.floor((Date.now() - then) / 1000));
-  if (seconds < 60) return 'just now';
+  if (seconds < 60) return strings.t('time.justNow');
   const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
+  if (minutes < 60) return strings.t('time.minutes', { count: minutes });
   const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
+  if (hours < 24) return strings.t('time.hours', { count: hours });
   const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d ago`;
+  if (days < 7) return strings.t('time.days', { count: days });
   const weeks = Math.floor(days / 7);
-  if (weeks < 5) return `${weeks}w ago`;
+  if (weeks < 5) return strings.t('time.weeks', { count: weeks });
   const months = Math.floor(days / 30);
-  if (months < 12) return `${months}mo ago`;
-  return `${Math.floor(days / 365)}y ago`;
+  if (months < 12) return strings.t('time.months', { count: months });
+  return strings.t('time.years', { count: Math.floor(days / 365) });
 }
 
-export function formatDate(iso: string): string {
-  return new Date(iso).toLocaleDateString(undefined, {
+export function formatDate(iso: string, strings: Translator): string {
+  return new Date(iso).toLocaleDateString(strings.locale, {
     year: 'numeric',
     month: 'short',
     day: 'numeric',
   });
 }
 
-/** "14:32" in the device's locale — shown under a group of messages. */
-export function formatTime(iso: string): string {
-  return new Date(iso).toLocaleTimeString(undefined, {
+/** "14:32" in the user's locale — shown under a group of messages. */
+export function formatTime(iso: string, strings: Translator): string {
+  return new Date(iso).toLocaleTimeString(strings.locale, {
     hour: 'numeric',
     minute: '2-digit',
   });
@@ -43,13 +48,13 @@ export function isSameDay(a: string, b: string): boolean {
 }
 
 /** Date separator label: Today / Yesterday / "Mon, 5 Jan". */
-export function dayLabel(iso: string): string {
+export function dayLabel(iso: string, strings: Translator): string {
   const now = new Date();
-  if (isSameDay(iso, now.toISOString())) return 'Today';
+  if (isSameDay(iso, now.toISOString())) return strings.t('time.today');
   const yesterday = new Date(now.getTime() - 86_400_000);
-  if (isSameDay(iso, yesterday.toISOString())) return 'Yesterday';
+  if (isSameDay(iso, yesterday.toISOString())) return strings.t('time.yesterday');
   const date = new Date(iso);
-  return date.toLocaleDateString(undefined, {
+  return date.toLocaleDateString(strings.locale, {
     weekday: 'short',
     month: 'short',
     day: 'numeric',