@appsupportkit/support-sdk 0.2.0 → 0.3.0

package/src/components/SupportButton.tsx

@@ -1,12 +1,20 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Text, View } from 'react-native';
 import {
   postMessage,
   registerPush,
+  setLanguage as setLanguageRequest,
   submitQuery,
   SupportApiError,
   type ApiConfig,
 } from '../api';
+import { createTranslator } from '../i18n';
+import {
+  asLanguage,
+  DEFAULT_LANGUAGE,
+  deviceLanguage,
+  type Language,
+} from '../i18n/languages';
 import { ensurePushPermission, isPushAvailable } from '../push';
 import { resolveTheme } from '../theme';
 import type { QueryType, SupportButtonProps, Thread } from '../types';
@@ -16,10 +24,12 @@ import { BottomSheet } from './BottomSheet';
 import { LauncherButton } from './LauncherButton';
 import { ComposeScreen } from './screens/ComposeScreen';
 import { HomeScreen } from './screens/HomeScreen';
+import { LanguageScreen } from './screens/LanguageScreen';
 import { ThreadScreen } from './screens/ThreadScreen';
 
 type Screen =
   | { name: 'home' }
+  | { name: 'language' }
   | { name: 'compose'; type: QueryType }
   | { name: 'thread'; threadId: string };
 
@@ -47,15 +57,56 @@ export function SupportButton(props: SupportButtonProps) {
   const [sheetOpen, setSheetOpen] = useState(false);
   const [screen, setScreen] = useState<Screen>({ name: 'home' });
 
-  const { threads, totalUnread, loading, refreshing, error, refresh, reload } =
-    useSupportThreads({
-      config,
-      revenuecatId: props.user.revenuecatId,
-      enabled: validationError === null,
-      sheetOpen,
-      activeThreadId: screen.name === 'thread' ? screen.threadId : null,
-      idlePollMs: props.pollIntervalMs ?? IDLE_POLL_MS,
-    });
+  const {
+    threads,
+    totalUnread,
+    loading,
+    refreshing,
+    errorKey,
+    serverLanguage,
+    languageLoaded,
+    refresh,
+    reload,
+  } = useSupportThreads({
+    config,
+    revenuecatId: props.user.revenuecatId,
+    enabled: validationError === null,
+    sheetOpen,
+    activeThreadId: screen.name === 'thread' ? screen.threadId : null,
+    idlePollMs: props.pollIntervalMs ?? IDLE_POLL_MS,
+  });
+
+  /**
+   * What the user picked, once they have picked. Until then the sheet is
+   * rendered in the host app's hint or the device's language, which is a
+   * guess — hence `chosen`, which is what decides whether to ask.
+   */
+  const [chosen, setChosen] = useState<Language | null>(null);
+  const [draftLanguage, setDraftLanguage] = useState<Language | null>(null);
+  const [savingLanguage, setSavingLanguage] = useState(false);
+  const [languageError, setLanguageError] = useState<string | null>(null);
+
+  // A preference saved on another device (or an earlier install) wins over
+  // any local guess, and answers the "have they chosen?" question for free.
+  useEffect(() => {
+    const stored = asLanguage(serverLanguage);
+    if (stored !== null) setChosen(stored);
+  }, [serverLanguage]);
+
+  const fallbackLanguage =
+    props.defaultLanguage ?? deviceLanguage() ?? DEFAULT_LANGUAGE;
+  const language = chosen ?? fallbackLanguage;
+  const strings = useMemo(
+    () => createTranslator(draftLanguage ?? language),
+    [draftLanguage, language],
+  );
+
+  /**
+   * Ask once, on first open — but only once the server has told us whether
+   * this user already answered. Asking before then would show the picker to
+   * someone who chose months ago on another device.
+   */
+  const mustChooseLanguage = languageLoaded && chosen === null;
 
   /**
    * Asks for notification permission the moment the sheet opens, then
@@ -89,6 +140,8 @@ export function SupportButton(props: SupportButtonProps) {
   function closeSheet() {
     setSheetOpen(false);
     setScreen({ name: 'home' });
+    setDraftLanguage(null);
+    setLanguageError(null);
   }
 
   if (validationError !== null) {
@@ -116,10 +169,43 @@ export function SupportButton(props: SupportButtonProps) {
 
   function writeErrorMessage(e: unknown): string {
     if (e instanceof SupportApiError) {
-      if (e.status === 429) return 'Too many requests — try again later';
-      if (e.offline) return "You're offline — check your connection";
+      if (e.status === 429) return strings.t('error.rateLimited');
+      if (e.offline) return strings.t('error.offline');
+    }
+    return strings.t('error.sendFailed');
+  }
+
+  /**
+   * Persists the picked language and leaves the picker.
+   *
+   * A failed save keeps the user on the screen with a retry: getting this
+   * wrong means every message they write is translated from the wrong
+   * language, which is worse than one more tap.
+   */
+  async function confirmLanguage() {
+    const next = draftLanguage ?? language;
+    setSavingLanguage(true);
+    setLanguageError(null);
+    try {
+      await setLanguageRequest(config, {
+        revenuecatId: props.user.revenuecatId,
+        language: next,
+      });
+      setChosen(next);
+      setDraftLanguage(null);
+      setScreen({ name: 'home' });
+      // On a change, the server re-queues existing replies for translation
+      // into the new language; they arrive over the next poll or two.
+      void reload();
+    } catch (e) {
+      setLanguageError(
+        e instanceof SupportApiError && e.offline
+          ? strings.t('error.offline')
+          : strings.t('lang.saveFailed'),
+      );
+    } finally {
+      setSavingLanguage(false);
     }
-    return "Couldn't send — try again";
   }
 
   async function handleSubmit(
@@ -134,6 +220,7 @@ export function SupportButton(props: SupportButtonProps) {
         isPaid: props.user.isPaid,
         revenuecatId: props.user.revenuecatId,
         appVersion: props.user.appVersion,
+        language,
       });
       void reload();
       return null;
@@ -151,6 +238,7 @@ export function SupportButton(props: SupportButtonProps) {
         queryId: threadId,
         revenuecatId: props.user.revenuecatId,
         message,
+        language,
       });
       await reload();
       return null;
@@ -167,19 +255,50 @@ export function SupportButton(props: SupportButtonProps) {
   const home = (
     <HomeScreen
       theme={theme}
+      strings={strings}
+      language={language}
       threads={threads}
       loading={loading}
       refreshing={refreshing}
-      error={error}
+      error={errorKey === null ? null : strings.t(errorKey)}
       onRefresh={refresh}
       onCompose={(type) => setScreen({ name: 'compose', type })}
       onOpenThread={(thread) =>
         setScreen({ name: 'thread', threadId: thread.id })
       }
+      onChangeLanguage={() => {
+        setDraftLanguage(language);
+        setLanguageError(null);
+        setScreen({ name: 'language' });
+      }}
       onClose={closeSheet}
     />
   );
 
+  const languagePicker = (
+    <LanguageScreen
+      theme={theme}
+      strings={strings}
+      selected={draftLanguage ?? language}
+      onSelect={setDraftLanguage}
+      onConfirm={() => void confirmLanguage()}
+      // No way back on first run: there is nothing behind it yet, so the
+      // only exit is choosing — or closing the sheet, which asks again.
+      onBack={
+        mustChooseLanguage
+          ? undefined
+          : () => {
+              setDraftLanguage(null);
+              setLanguageError(null);
+              setScreen({ name: 'home' });
+            }
+      }
+      onDismiss={mustChooseLanguage ? closeSheet : undefined}
+      saving={savingLanguage}
+      error={languageError}
+    />
+  );
+
   return (
     <>
       <LauncherButton
@@ -193,26 +312,36 @@ export function SupportButton(props: SupportButtonProps) {
       />
 
       <BottomSheet visible={sheetOpen} onClose={closeSheet} theme={theme}>
-        {screen.name === 'home' && home}
-        {screen.name === 'compose' && (
-          <ComposeScreen
-            theme={theme}
-            type={screen.type}
-            onBack={() => setScreen({ name: 'home' })}
-            onSubmit={(message) => handleSubmit(screen.type, message)}
-          />
+        {/* The one-time prompt outranks whatever screen the user is on: it
+            only ever fires before they have sent anything. */}
+        {mustChooseLanguage || screen.name === 'language' ? (
+          languagePicker
+        ) : (
+          <>
+            {screen.name === 'home' && home}
+            {screen.name === 'compose' && (
+              <ComposeScreen
+                theme={theme}
+                strings={strings}
+                type={screen.type}
+                onBack={() => setScreen({ name: 'home' })}
+                onSubmit={(message) => handleSubmit(screen.type, message)}
+              />
+            )}
+            {screen.name === 'thread' &&
+              (activeThread !== null ? (
+                <ThreadScreen
+                  theme={theme}
+                  strings={strings}
+                  thread={activeThread}
+                  onBack={() => setScreen({ name: 'home' })}
+                  onSend={(message) => handleSend(activeThread.id, message)}
+                />
+              ) : (
+                home
+              ))}
+          </>
         )}
-        {screen.name === 'thread' &&
-          (activeThread !== null ? (
-            <ThreadScreen
-              theme={theme}
-              thread={activeThread}
-              onBack={() => setScreen({ name: 'home' })}
-              onSend={(message) => handleSend(activeThread.id, message)}
-            />
-          ) : (
-            home
-          ))}
       </BottomSheet>
     </>
   );

package/src/components/icons.tsx

@@ -145,6 +145,42 @@ export function CheckIcon({ color, size = 16 }: { color: string; size?: number }
   );
 }
 
+/** Globe: circle, equator, and a pill standing in for the meridian curve. */
+export function GlobeIcon({ color, size = 16 }: { color: string; size?: number }) {
+  const inner = size - STROKE * 2;
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderWidth: STROKE,
+        borderColor: color,
+        borderRadius: size / 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View
+        style={{
+          position: 'absolute',
+          width: inner,
+          height: STROKE,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          width: size * 0.52,
+          height: inner,
+          borderWidth: STROKE,
+          borderColor: color,
+          borderRadius: size * 0.26,
+        }}
+      />
+    </View>
+  );
+}
+
 /** Send arrow: a stem plus a chevron head, both centered on the same axis. */
 export function ArrowUpIcon({ color, size = 16 }: { color: string; size?: number }) {
   const stroke = STROKE + 0.4;

package/src/components/primitives.tsx

@@ -9,9 +9,9 @@ import {
   type TextStyle,
   type ViewStyle,
 } from 'react-native';
+import type { Translator } from '../i18n';
 import type { SupportTheme } from '../theme';
 import type { QueryStatus, QueryType } from '../types';
-import { QUERY_TYPE_LABEL } from '../types';
 import { AlertCircleIcon, ChatIcon, PlusCircleIcon } from './icons';
 
 export function typeIcon(type: QueryType, color: string, size = 15): ReactNode {
@@ -62,9 +62,11 @@ export function TypeGlyph({
 export function StatusIndicator({
   status,
   theme,
+  strings,
 }: {
   status: QueryStatus;
   theme: SupportTheme;
+  strings: Translator;
 }) {
   const color =
     status === 'open' ? theme.colors.statusOpen : theme.colors.statusResolved;
@@ -74,7 +76,7 @@ export function StatusIndicator({
         style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: color }}
       />
       <Text style={{ fontSize: 12, color }}>
-        {status === 'open' ? 'Open' : 'Resolved'}
+        {strings.t(status === 'open' ? 'status.open' : 'status.resolved')}
       </Text>
     </View>
   );
@@ -351,17 +353,23 @@ export function ErrorState({
   message,
   onRetry,
   theme,
+  strings,
 }: {
   message: string;
   onRetry: () => void;
   theme: SupportTheme;
+  strings: Translator;
 }) {
   return (
     <View style={{ alignItems: 'center', paddingVertical: 40, gap: 12 }}>
       <Text style={{ fontSize: 14, color: theme.colors.textSecondary }}>
         {message}
       </Text>
-      <SecondaryButton label="Try again" onPress={onRetry} theme={theme} />
+      <SecondaryButton
+        label={strings.t('error.tryAgain')}
+        onPress={onRetry}
+        theme={theme}
+      />
     </View>
   );
 }
@@ -452,9 +460,11 @@ export const textStyles = {
 export function TypeChipView({
   type,
   theme,
+  strings,
 }: {
   type: QueryType;
   theme: SupportTheme;
+  strings: Translator;
 }) {
   const color = typeColor(type, theme);
   return (
@@ -472,7 +482,7 @@ export function TypeChipView({
     >
       {typeIcon(type, color, 11)}
       <Text style={{ fontSize: 11.5, fontWeight: '600', color }}>
-        {QUERY_TYPE_LABEL[type]}
+        {strings.t(`type.${type}`)}
       </Text>
     </View>
   );

package/src/components/screens/ComposeScreen.tsx

@@ -8,9 +8,10 @@ import {
   TextInput,
   View,
 } from 'react-native';
+import type { Translator } from '../../i18n';
 import type { SupportTheme } from '../../theme';
 import type { QueryType } from '../../types';
-import { QUERY_TYPE_LABEL, USER_MESSAGE_MAX, USER_MESSAGE_MIN } from '../../types';
+import { USER_MESSAGE_MAX, USER_MESSAGE_MIN } from '../../types';
 import { CheckIcon, Chevron } from '../icons';
 import {
   IconButton,
@@ -19,18 +20,6 @@ import {
   TypeGlyph,
 } from '../primitives';
 
-const PROMPT: Record<QueryType, string> = {
-  feedback: 'What should we know?',
-  feature_request: 'What would you like to see?',
-  bug_report: 'What happened, and what did you expect?',
-};
-
-const SUBTITLE: Record<QueryType, string> = {
-  feedback: 'Good or bad — it goes straight to the team.',
-  feature_request: 'Tell us what you are trying to do.',
-  bug_report: 'Steps, screen, and what you expected all help.',
-};
-
 /** Scales in once on success — the only celebratory motion in the SDK. */
 function SentMark({ theme }: { theme: SupportTheme }) {
   const scale = useRef(new Animated.Value(0.6)).current;
@@ -75,11 +64,13 @@ function SentMark({ theme }: { theme: SupportTheme }) {
 
 export function ComposeScreen({
   theme,
+  strings,
   type,
   onBack,
   onSubmit,
 }: {
   theme: SupportTheme;
+  strings: Translator;
   type: QueryType;
   onBack: () => void;
   /** Resolves null on success, or a user-facing error message. */
@@ -119,13 +110,16 @@ export function ComposeScreen({
         }}
       >
         <SentMark theme={theme} />
-        <Text style={textStyles.title(theme)}>Sent</Text>
+        <Text style={textStyles.title(theme)}>{strings.t('compose.sent')}</Text>
         <Text style={[textStyles.secondary(theme), { textAlign: 'center' }]}>
-          We&apos;ll reply right here. You&apos;ll find the conversation under
-          Open, and the button shows a badge when we answer.
+          {strings.t('compose.sentHint')}
         </Text>
         <View style={{ marginTop: 6 }}>
-          <PrimaryButton label="Done" onPress={onBack} theme={theme} />
+          <PrimaryButton
+            label={strings.t('compose.done')}
+            onPress={onBack}
+            theme={theme}
+          />
         </View>
       </View>
     );
@@ -149,15 +143,17 @@ export function ComposeScreen({
         <IconButton
           onPress={onBack}
           theme={theme}
-          accessibilityLabel="Back to conversations"
+          accessibilityLabel={strings.t('compose.back')}
           size={32}
         >
           <Chevron color={theme.colors.textSecondary} direction="left" size={12} />
         </IconButton>
         <TypeGlyph type={type} theme={theme} size={32} />
         <View style={{ flex: 1, gap: 1 }}>
-          <Text style={textStyles.heading(theme)}>{QUERY_TYPE_LABEL[type]}</Text>
-          <Text style={textStyles.meta(theme)}>{SUBTITLE[type]}</Text>
+          <Text style={textStyles.heading(theme)}>
+            {strings.t(`type.${type}`)}
+          </Text>
+          <Text style={textStyles.meta(theme)}>{strings.t(`sub.${type}`)}</Text>
         </View>
       </View>
 
@@ -171,7 +167,7 @@ export function ComposeScreen({
           multiline
           autoFocus
           editable={!submitting}
-          placeholder={PROMPT[type]}
+          placeholder={strings.t(`prompt.${type}`)}
           placeholderTextColor={theme.colors.textTertiary}
           style={{
             minHeight: 140,
@@ -204,7 +200,7 @@ export function ComposeScreen({
             </Text>
           ) : tooShort ? (
             <Text style={textStyles.meta(theme)}>
-              At least {USER_MESSAGE_MIN} characters
+              {strings.t('compose.minChars', { count: USER_MESSAGE_MIN })}
             </Text>
           ) : null}
           <Text
@@ -220,7 +216,7 @@ export function ComposeScreen({
 
         <View style={{ paddingTop: 12 }}>
           <PrimaryButton
-            label={submitting ? 'Sending…' : 'Send'}
+            label={strings.t(submitting ? 'compose.sending' : 'compose.send')}
             onPress={handleSubmit}
             disabled={!valid || submitting}
             theme={theme}