@appsupportkit/support-sdk 0.1.2 → 0.3.0

package/src/components/SupportButton.tsx

@@ -1,47 +1,49 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AppState, Pressable, Text, View } from 'react-native';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Text, View } from 'react-native';
 import {
-  getThreads,
-  getUnreadCount,
-  markRead,
   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';
+import { IDLE_POLL_MS, useSupportThreads } from '../useSupportThreads';
 import { validateProps } from '../utils';
 import { BottomSheet } from './BottomSheet';
-import { BubbleMark } from './icons';
+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 };
 
-// Poll cadence by context: fast where latency is felt (staring at a thread
-// waiting for a reply), slow when the sheet is closed — and the idle tick
-// uses the count-only endpoint, so it costs ~18 bytes instead of the full
-// thread list.
-const THREAD_POLL_MS = 5_000;
-const SHEET_POLL_MS = 15_000;
-const IDLE_POLL_MS = 60_000;
-const MIN_POLL_MS = 3_000;
-
 /**
- * The single entry point of the SDK: a button with an unread badge that
- * opens the support bottom sheet. Polls get-threads on mount and whenever
- * the sheet opens (no websockets in v1).
+ * The single entry point of the SDK: a launcher with an unread badge that
+ * opens the support bottom sheet. Threads, polling, and read receipts are
+ * handled by useSupportThreads.
  */
 export function SupportButton(props: SupportButtonProps) {
   const validationError = validateProps(props);
-  const theme = resolveTheme(props.theme);
+  const theme = useMemo(
+    () => resolveTheme(props.theme, props.accentColor),
+    [props.theme, props.accentColor],
+  );
 
   const config: ApiConfig = useMemo(
     () => ({
@@ -54,85 +56,57 @@ export function SupportButton(props: SupportButtonProps) {
 
   const [sheetOpen, setSheetOpen] = useState(false);
   const [screen, setScreen] = useState<Screen>({ name: 'home' });
-  const [threads, setThreads] = useState<Thread[] | null>(null);
-  const [totalUnread, setTotalUnread] = useState(0);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const mounted = useRef(true);
 
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-
-  const refresh = useCallback(async () => {
-    if (validationError) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const data = await getThreads(config, props.user.revenuecatId);
-      if (!mounted.current) return;
-      setThreads(data.threads);
-      setTotalUnread(data.total_unread);
-    } catch (e) {
-      if (!mounted.current) return;
-      setError(
-        e instanceof SupportApiError && e.offline
-          ? "You're offline — check your connection"
-          : "Couldn't load threads",
-      );
-    } finally {
-      if (mounted.current) setLoading(false);
-    }
-  }, [config, props.user.revenuecatId, validationError]);
+  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,
+  });
 
-  /** Badge-only refresh — the cheap endpoint used while idle. */
-  const refreshBadge = useCallback(async () => {
-    if (validationError) return;
-    try {
-      const data = await getUnreadCount(config, props.user.revenuecatId);
-      if (mounted.current) setTotalUnread(data.total_unread);
-    } catch {
-      // Best-effort: the next tick or the next sheet open reconciles.
-    }
-  }, [config, props.user.revenuecatId, validationError]);
-
-  // Poll on mount…
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
+  /**
+   * 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);
 
-  // …then adapt the cadence to what the user is looking at, and refresh
-  // whenever the app returns to the foreground.
-  const idlePollMs = props.pollIntervalMs ?? IDLE_POLL_MS;
-  const screenName = screen.name;
+  // 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 idle = !sheetOpen;
-    const intervalMs = idle
-      ? idlePollMs
-      : screenName === 'thread'
-        ? THREAD_POLL_MS
-        : SHEET_POLL_MS;
+    const stored = asLanguage(serverLanguage);
+    if (stored !== null) setChosen(stored);
+  }, [serverLanguage]);
 
-    // While idle only the badge matters, so use the count-only endpoint.
-    const tick = () => void (idle ? refreshBadge() : refresh());
-
-    // Clamped so a typo like `pollIntervalMs={30}` can't hammer the API;
-    // 0 (or negative) disables idle polling entirely.
-    const timer =
-      intervalMs > 0 ? setInterval(tick, Math.max(intervalMs, MIN_POLL_MS)) : null;
-
-    const appStateSub = AppState.addEventListener('change', (state) => {
-      if (state === 'active') tick();
-    });
+  const fallbackLanguage =
+    props.defaultLanguage ?? deviceLanguage() ?? DEFAULT_LANGUAGE;
+  const language = chosen ?? fallbackLanguage;
+  const strings = useMemo(
+    () => createTranslator(draftLanguage ?? language),
+    [draftLanguage, language],
+  );
 
-    return () => {
-      if (timer !== null) clearInterval(timer);
-      appStateSub.remove();
-    };
-  }, [sheetOpen, screenName, idlePollMs, refresh, refreshBadge]);
+  /**
+   * 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
@@ -141,7 +115,7 @@ export function SupportButton(props: SupportButtonProps) {
    * support flow waits on it or breaks if it fails.
    */
   const syncPushPermission = useCallback(async () => {
-    if (validationError || !isPushAvailable) return;
+    if (validationError !== null || !isPushAvailable) return;
     try {
       const registration = await ensurePushPermission(props.expoProjectId);
       await registerPush(config, {
@@ -155,11 +129,9 @@ export function SupportButton(props: SupportButtonProps) {
     }
   }, [config, props.user.revenuecatId, props.expoProjectId, validationError]);
 
-  // …and on sheet open.
   function openSheet() {
     setScreen({ name: 'home' });
     setSheetOpen(true);
-    void refresh();
     // The OS prompt appears right as the sheet opens; if the user declines,
     // everything below carries on exactly as before.
     void syncPushPermission();
@@ -168,9 +140,11 @@ export function SupportButton(props: SupportButtonProps) {
   function closeSheet() {
     setSheetOpen(false);
     setScreen({ name: 'home' });
+    setDraftLanguage(null);
+    setLanguageError(null);
   }
 
-  if (validationError) {
+  if (validationError !== null) {
     // Dev-mode: loud and actionable. Production: render nothing rather than
     // a broken button.
     if (__DEV__) {
@@ -193,32 +167,45 @@ export function SupportButton(props: SupportButtonProps) {
     return null;
   }
 
-  function openThread(thread: Thread) {
-    setScreen({ name: 'thread', threadId: thread.id });
-    if (thread.unread_count > 0) {
-      // Optimistically clear the badge; persist via mark-read.
-      setThreads(
-        (prev) =>
-          prev?.map((t) =>
-            t.id === thread.id ? { ...t, unread_count: 0 } : t,
-          ) ?? null,
-      );
-      setTotalUnread((n) => Math.max(0, n - thread.unread_count));
-      void markRead(config, {
-        queryId: thread.id,
-        revenuecatId: props.user.revenuecatId,
-      }).catch(() => {
-        // Non-fatal: the next get-threads reconciles the badge.
-      });
+  function writeErrorMessage(e: unknown): string {
+    if (e instanceof SupportApiError) {
+      if (e.status === 429) return strings.t('error.rateLimited');
+      if (e.offline) return strings.t('error.offline');
     }
+    return strings.t('error.sendFailed');
   }
 
-  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";
+  /**
+   * 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(
@@ -233,8 +220,9 @@ export function SupportButton(props: SupportButtonProps) {
         isPaid: props.user.isPaid,
         revenuecatId: props.user.revenuecatId,
         appVersion: props.user.appVersion,
+        language,
       });
-      void refresh();
+      void reload();
       return null;
     } catch (e) {
       return writeErrorMessage(e);
@@ -250,113 +238,110 @@ export function SupportButton(props: SupportButtonProps) {
         queryId: threadId,
         revenuecatId: props.user.revenuecatId,
         message,
+        language,
       });
-      await refresh();
+      await reload();
       return null;
     } catch (e) {
       return writeErrorMessage(e);
     }
   }
 
-  const activeThread =
+  const activeThread: Thread | null =
     screen.name === 'thread'
-      ? (threads ?? []).find((t) => t.id === screen.threadId) ?? null
+      ? ((threads ?? []).find((t) => t.id === screen.threadId) ?? null)
       : null;
 
+  const home = (
+    <HomeScreen
+      theme={theme}
+      strings={strings}
+      language={language}
+      threads={threads}
+      loading={loading}
+      refreshing={refreshing}
+      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 (
     <>
-      <Pressable
+      <LauncherButton
+        theme={theme}
+        unread={totalUnread}
+        variant={props.variant}
+        size={props.size}
+        label={props.label}
+        style={props.style}
         onPress={openSheet}
-        accessibilityRole="button"
-        accessibilityLabel={
-          totalUnread > 0
-            ? `Support, ${totalUnread} unread ${totalUnread === 1 ? 'reply' : 'replies'}`
-            : 'Support'
-        }
-        style={({ pressed }) => ({
-          width: 44,
-          height: 44,
-          borderRadius: 22,
-          borderWidth: 1,
-          borderColor: theme.colors.border,
-          backgroundColor: pressed
-            ? theme.colors.surfaceHover
-            : theme.colors.surface,
-          alignItems: 'center',
-          justifyContent: 'center',
-        })}
-      >
-        <BubbleMark color={theme.colors.textPrimary} size={18} />
-        {totalUnread > 0 && (
-          <View
-            style={{
-              position: 'absolute',
-              top: -3,
-              right: -3,
-              minWidth: 16,
-              height: 16,
-              borderRadius: 8,
-              paddingHorizontal: 4,
-              backgroundColor: theme.colors.accent,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <Text
-              style={{
-                fontSize: 10,
-                fontWeight: '600',
-                color: theme.colors.accentForeground,
-                fontVariant: ['tabular-nums'],
-              }}
-            >
-              {totalUnread > 9 ? '9+' : totalUnread}
-            </Text>
-          </View>
-        )}
-      </Pressable>
+      />
 
       <BottomSheet visible={sheetOpen} onClose={closeSheet} theme={theme}>
-        {screen.name === 'home' && (
-          <HomeScreen
-            theme={theme}
-            threads={threads}
-            loading={loading}
-            error={error}
-            onRetry={() => void refresh()}
-            onCompose={(type) => setScreen({ name: 'compose', type })}
-            onOpenThread={openThread}
-            onClose={closeSheet}
-          />
-        )}
-        {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 ? (
-            <ThreadScreen
-              theme={theme}
-              thread={activeThread}
-              onBack={() => setScreen({ name: 'home' })}
-              onSend={(message) => handleSend(activeThread.id, message)}
-            />
-          ) : (
-            <HomeScreen
-              theme={theme}
-              threads={threads}
-              loading={loading}
-              error={error}
-              onRetry={() => void refresh()}
-              onCompose={(type) => setScreen({ name: 'compose', type })}
-              onOpenThread={openThread}
-              onClose={closeSheet}
-            />
-          ))}
       </BottomSheet>
     </>
   );

package/src/components/icons.tsx

@@ -145,43 +145,137 @@ export function CheckIcon({ color, size = 16 }: { color: string; size?: number }
   );
 }
 
-/** The chat-bubble mark on the floating support button. */
-export function BubbleMark({ color, size = 20 }: { 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;
+  const head = size * 0.44;
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View
+        style={{
+          position: 'absolute',
+          width: stroke,
+          height: size * 0.66,
+          borderRadius: stroke,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          // Rotating a square by 45° lifts its apex by ~0.207 × side, so
+          // offset by that to land the point on top of the stem.
+          top: size * 0.17 + head * 0.207,
+          width: head,
+          height: head,
+          borderTopWidth: stroke,
+          borderLeftWidth: stroke,
+          borderTopLeftRadius: stroke,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+/**
+ * The chat-bubble mark on the launcher button: a filled bubble with the
+ * dots knocked out in the button's own fill color. Solid shapes read far
+ * better than 1.5px strokes at launcher size and on top of a color fill.
+ */
+export function ChatBubbleMark({
+  color,
+  dotColor,
+  size = 24,
+}: {
+  color: string;
+  /** The surface behind the mark — the dots are punched out in this color. */
+  dotColor: string;
+  size?: number;
+}) {
+  const bubbleHeight = size * 0.82;
   const dot: ViewStyle = {
-    width: size * 0.12,
-    height: size * 0.12,
+    width: size * 0.13,
+    height: size * 0.13,
     borderRadius: size,
-    backgroundColor: color,
+    backgroundColor: dotColor,
   };
   return (
-    <View style={{ alignItems: 'flex-start' }}>
+    <View style={{ width: size, height: size, justifyContent: 'flex-start' }}>
       <View
         style={{
           width: size,
-          height: size * 0.78,
-          borderWidth: STROKE + 0.25,
-          borderColor: color,
-          borderRadius: size * 0.28,
+          height: bubbleHeight,
+          borderRadius: size * 0.33,
+          backgroundColor: color,
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'center',
-          gap: size * 0.1,
+          gap: size * 0.115,
         }}
       >
         <View style={dot} />
         <View style={dot} />
         <View style={dot} />
       </View>
+      {/* Tail, drawn as a border triangle so it needs no svg. */}
       <View
         style={{
-          width: size * 0.22,
-          height: size * 0.22,
-          borderLeftWidth: STROKE + 0.25,
-          borderBottomWidth: STROKE + 0.25,
-          borderColor: color,
-          marginLeft: size * 0.18,
-          marginTop: -STROKE,
-          transform: [{ skewX: '-12deg' }],
+          position: 'absolute',
+          left: size * 0.22,
+          top: bubbleHeight - 1,
+          width: 0,
+          height: 0,
+          borderLeftWidth: size * 0.09,
+          borderRightWidth: size * 0.16,
+          borderTopWidth: size * 0.2,
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderTopColor: color,
         }}
       />
     </View>