@appsupportkit/support-sdk 0.2.0 → 0.4.0

package/src/components/SupportButton.tsx

@@ -1,38 +1,65 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Text, View } from 'react-native';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Platform, Text, useColorScheme, View } from 'react-native';
 import {
-  postMessage,
   registerPush,
-  submitQuery,
+  registerUser,
+  reviewOpened,
+  sendMessage,
+  setLanguage as setLanguageRequest,
   SupportApiError,
   type ApiConfig,
 } from '../api';
-import { ensurePushPermission, isPushAvailable } from '../push';
-import { resolveTheme } from '../theme';
-import type { QueryType, SupportButtonProps, Thread } from '../types';
+import { createTranslator } from '../i18n';
+import {
+  asLanguage,
+  DEFAULT_LANGUAGE,
+  deviceLanguage,
+  type Language,
+} from '../i18n/languages';
+import {
+  ensurePushPermission,
+  isPushAvailable,
+  onSupportNotificationTap,
+} from '../push';
+import { openStoreReview, storeLinks, storePlatform } from '../review';
+import { themeFor } from '../theme';
+import type { SupportButtonProps, ThemeName } from '../types';
 import { IDLE_POLL_MS, useSupportThreads } from '../useSupportThreads';
-import { validateProps } from '../utils';
+import { userPlan, validateProps } from '../utils';
 import { BottomSheet } from './BottomSheet';
 import { LauncherButton } from './LauncherButton';
-import { ComposeScreen } from './screens/ComposeScreen';
-import { HomeScreen } from './screens/HomeScreen';
-import { ThreadScreen } from './screens/ThreadScreen';
+import { ChatScreen } from './screens/ChatScreen';
+import { LanguageScreen } from './screens/LanguageScreen';
 
-type Screen =
-  | { name: 'home' }
-  | { name: 'compose'; type: QueryType }
-  | { name: 'thread'; threadId: string };
+type Screen = 'chat' | 'language';
 
 /**
  * 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.
+ * opens the support chat in a bottom sheet. Conversations, polling, and read
+ * receipts are handled by useSupportThreads.
  */
 export function SupportButton(props: SupportButtonProps) {
   const validationError = validateProps(props);
+
+  // "system" (the default) follows the host app's appearance and re-renders
+  // when it changes.
+  const colorScheme = useColorScheme();
+  const themeName: ThemeName =
+    props.theme === 'light' || props.theme === 'dark'
+      ? props.theme
+      : colorScheme === 'dark'
+        ? 'dark'
+        : 'light';
+  // Picked down to one string first, so an inline `{ light, dark }` object
+  // doesn't rebuild the theme on every render.
+  const perModeAccent =
+    typeof props.accentColor === 'object' && props.accentColor !== null;
+  const accent = perModeAccent
+    ? (props.accentColor as { light: string; dark: string })[themeName]
+    : (props.accentColor as string | undefined);
   const theme = useMemo(
-    () => resolveTheme(props.theme, props.accentColor),
-    [props.theme, props.accentColor],
+    () => themeFor(themeName, accent, !perModeAccent),
+    [themeName, accent, perModeAccent],
   );
 
   const config: ApiConfig = useMemo(
@@ -45,17 +72,61 @@ 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 [screen, setScreen] = useState<Screen>('chat');
+
+  /**
+   * 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 {
+    threads,
+    totalUnread,
+    loading,
+    errorKey,
+    serverLanguage,
+    languageLoaded,
+    store,
+    refresh,
+    reload,
+  } = useSupportThreads({
+    config,
+    revenuecatId: props.user.revenuecatId,
+    enabled: validationError === null,
+    sheetOpen,
+    // Not while the first-run language prompt covers it: nothing behind
+    // the prompt has been seen, so nothing may be marked read.
+    chatVisible: sheetOpen && screen === 'chat' && chosen !== null,
+    idlePollMs: props.pollIntervalMs ?? IDLE_POLL_MS,
+  });
+
+  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
@@ -78,8 +149,60 @@ export function SupportButton(props: SupportButtonProps) {
     }
   }, [config, props.user.revenuecatId, props.expoProjectId, validationError]);
 
+  const { name: userName, revenuecatId, appVersion } = props.user;
+  const plan = userPlan(props.user);
+
+  /**
+   * Reports the user on load, and whenever who they are changes, so the team
+   * can find and message them before they ever open support. Refreshes the
+   * push token too when permission was already granted — never prompting:
+   * the OS prompt only appears once the user opens support.
+   */
+  useEffect(() => {
+    if (validationError !== null) return;
+    registerUser(config, {
+      revenuecatId,
+      user: { name: userName, plan, appVersion, platform: storePlatform() },
+    }).catch(() => {
+      // Best effort; the next load reports again.
+    });
+    if (!isPushAvailable) return;
+    void (async () => {
+      const registration = await ensurePushPermission(props.expoProjectId, {
+        prompt: false,
+      });
+      if (registration.status !== 'granted') return;
+      await registerPush(config, {
+        revenuecatId,
+        permissionStatus: registration.status,
+        expoPushToken: registration.token,
+        asked: false,
+      });
+    })().catch(() => {});
+  }, [
+    config,
+    validationError,
+    revenuecatId,
+    userName,
+    plan,
+    appVersion,
+    props.expoProjectId,
+  ]);
+
+  // A tapped support-reply notification opens the chat. If the threads
+  // haven't loaded yet (cold start), it fills in as soon as they do.
+  useEffect(() => {
+    if (validationError !== null) return;
+    return onSupportNotificationTap(() => {
+      setDraftLanguage(null);
+      setLanguageError(null);
+      setScreen('chat');
+      setSheetOpen(true);
+    });
+  }, [validationError]);
+
   function openSheet() {
-    setScreen({ name: 'home' });
+    setScreen('chat');
     setSheetOpen(true);
     // The OS prompt appears right as the sheet opens; if the user declines,
     // everything below carries on exactly as before.
@@ -88,7 +211,9 @@ export function SupportButton(props: SupportButtonProps) {
 
   function closeSheet() {
     setSheetOpen(false);
-    setScreen({ name: 'home' });
+    setScreen('chat');
+    setDraftLanguage(null);
+    setLanguageError(null);
   }
 
   if (validationError !== null) {
@@ -116,41 +241,52 @@ 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 "Couldn't send — try again";
+    return strings.t('error.sendFailed');
   }
 
-  async function handleSubmit(
-    type: QueryType,
-    message: string,
-  ): Promise<string | null> {
+  /**
+   * 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 submitQuery(config, {
-        queryType: type,
-        message,
-        userName: props.user.name,
-        isPaid: props.user.isPaid,
+      await setLanguageRequest(config, {
         revenuecatId: props.user.revenuecatId,
-        appVersion: props.user.appVersion,
+        language: next,
       });
+      setChosen(next);
+      setDraftLanguage(null);
+      setScreen('chat');
+      // 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();
-      return null;
     } catch (e) {
-      return writeErrorMessage(e);
+      setLanguageError(
+        e instanceof SupportApiError && e.offline
+          ? strings.t('error.offline')
+          : strings.t('lang.saveFailed'),
+      );
+    } finally {
+      setSavingLanguage(false);
     }
   }
 
-  async function handleSend(
-    threadId: string,
-    message: string,
-  ): Promise<string | null> {
+  async function handleSend(message: string): Promise<string | null> {
     try {
-      await postMessage(config, {
-        queryId: threadId,
-        revenuecatId: props.user.revenuecatId,
+      await sendMessage(config, {
+        revenuecatId,
         message,
+        language,
+        user: { name: userName, plan, appVersion, platform: storePlatform() },
       });
       await reload();
       return null;
@@ -159,24 +295,42 @@ export function SupportButton(props: SupportButtonProps) {
     }
   }
 
-  const activeThread: Thread | null =
-    screen.name === 'thread'
-      ? ((threads ?? []).find((t) => t.id === screen.threadId) ?? null)
-      : null;
+  const reviewLinks = storeLinks(store);
+  const reviewLabel =
+    reviewLinks === null
+      ? null
+      : strings.t(Platform.OS === 'ios' ? 'review.appStore' : 'review.playStore');
+
+  /** Opens the store's review page and lets the team know it was tapped. */
+  function openReview(messageId: string) {
+    if (reviewLinks === null) return;
+    void openStoreReview(reviewLinks);
+    reviewOpened(config, { revenuecatId, messageId }).catch(() => {
+      // The receipt is for the dashboard; the user already has the store.
+    });
+  }
 
-  const home = (
-    <HomeScreen
+  const languagePicker = (
+    <LanguageScreen
       theme={theme}
-      threads={threads}
-      loading={loading}
-      refreshing={refreshing}
-      error={error}
-      onRefresh={refresh}
-      onCompose={(type) => setScreen({ name: 'compose', type })}
-      onOpenThread={(thread) =>
-        setScreen({ name: 'thread', threadId: thread.id })
+      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('chat');
+            }
       }
-      onClose={closeSheet}
+      onDismiss={mustChooseLanguage ? closeSheet : undefined}
+      saving={savingLanguage}
+      error={languageError}
     />
   );
 
@@ -193,26 +347,30 @@ export function SupportButton(props: SupportButtonProps) {
       />
 
       <BottomSheet visible={sheetOpen} onClose={closeSheet} theme={theme}>
-        {screen.name === 'home' && home}
-        {screen.name === 'compose' && (
-          <ComposeScreen
+        {/* The one-time prompt outranks whatever screen the user is on: it
+            only ever fires before they have sent anything. */}
+        {mustChooseLanguage || screen === 'language' ? (
+          languagePicker
+        ) : (
+          <ChatScreen
             theme={theme}
-            type={screen.type}
-            onBack={() => setScreen({ name: 'home' })}
-            onSubmit={(message) => handleSubmit(screen.type, message)}
+            strings={strings}
+            language={language}
+            threads={threads}
+            loading={loading}
+            error={errorKey === null ? null : strings.t(errorKey)}
+            onRetry={refresh}
+            onSend={handleSend}
+            onChangeLanguage={() => {
+              setDraftLanguage(language);
+              setLanguageError(null);
+              setScreen('language');
+            }}
+            onClose={closeSheet}
+            reviewLabel={reviewLabel}
+            onOpenReview={openReview}
           />
         )}
-        {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

@@ -33,60 +33,6 @@ export function ChatIcon({ color, size = 16 }: { color: string; size?: number })
   );
 }
 
-export function PlusCircleIcon({ color, size = 16 }: { color: string; size?: number }) {
-  const bar = size * 0.45;
-  return (
-    <View
-      style={{
-        width: size,
-        height: size,
-        borderWidth: STROKE,
-        borderColor: color,
-        borderRadius: size,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <View style={{ width: bar, height: STROKE, backgroundColor: color }} />
-      <View
-        style={{
-          width: STROKE,
-          height: bar,
-          backgroundColor: color,
-          position: 'absolute',
-        }}
-      />
-    </View>
-  );
-}
-
-export function AlertCircleIcon({ color, size = 16 }: { color: string; size?: number }) {
-  return (
-    <View
-      style={{
-        width: size,
-        height: size,
-        borderWidth: STROKE,
-        borderColor: color,
-        borderRadius: size,
-        alignItems: 'center',
-        paddingTop: size * 0.2,
-      }}
-    >
-      <View style={{ width: STROKE, height: size * 0.32, backgroundColor: color }} />
-      <View
-        style={{
-          width: STROKE + 0.5,
-          height: STROKE + 0.5,
-          borderRadius: 2,
-          backgroundColor: color,
-          marginTop: size * 0.09,
-        }}
-      />
-    </View>
-  );
-}
-
 /** Chevron built from two borders, rotated. direction: right | left | down. */
 export function Chevron({
   color,
@@ -145,6 +91,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;
@@ -187,61 +169,74 @@ export function ArrowUpIcon({ color, size = 16 }: { color: string; size?: number
 }
 
 /**
- * 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.
+ * Geometry of the product mark on a 24-unit square: two overlapping speech
+ * bubbles, the front one cut free of the back by a gap. Kept to rounded
+ * rects and right-triangle tails so Views can draw it with no svg; the
+ * dashboard's LogoMark (apps/web/components/logo.tsx) draws the same numbers.
+ */
+const MARK = {
+  back: { x: 1, y: 2.5, w: 14.5, h: 11, r: 4.5 },
+  /** Right angle at top-left, apex straight down. */
+  backTail: { x: 3.5, y: 12.25, w: 4.25, h: 4.25 },
+  front: { x: 8.5, y: 8.75, w: 14.5, h: 10.5, r: 4.5 },
+  /** Right angle at top-right, apex straight down. */
+  frontTail: { x: 16.5, y: 18.25, w: 4.25, h: 4.25 },
+  gap: 2,
+} as const;
+
+/**
+ * The mark on the launcher button. Solid shapes read far better than 1.5px
+ * strokes at launcher size and on top of a color fill.
  */
-export function ChatBubbleMark({
+export function ConversationMark({
   color,
-  dotColor,
+  holeColor,
   size = 24,
 }: {
   color: string;
-  /** The surface behind the mark — the dots are punched out in this color. */
-  dotColor: string;
+  /** The surface behind the mark — the gap between the bubbles is cut in this color. */
+  holeColor: string;
   size?: number;
 }) {
-  const bubbleHeight = size * 0.82;
-  const dot: ViewStyle = {
-    width: size * 0.13,
-    height: size * 0.13,
-    borderRadius: size,
-    backgroundColor: dotColor,
-  };
+  const u = size / 24;
+  const rect = (
+    o: { x: number; y: number; w: number; h: number; r: number },
+    fill: string,
+    grow = 0,
+  ): ViewStyle => ({
+    position: 'absolute',
+    left: (o.x - grow) * u,
+    top: (o.y - grow) * u,
+    width: (o.w + grow * 2) * u,
+    height: (o.h + grow * 2) * u,
+    borderRadius: (o.r + grow) * u,
+    backgroundColor: fill,
+  });
+  // A zero-size box whose top border is colored and one side border is
+  // transparent renders as a right triangle; which side picks the corner.
+  const tail = (
+    o: { x: number; y: number; w: number; h: number },
+    side: 'left' | 'right',
+  ): ViewStyle => ({
+    position: 'absolute',
+    left: o.x * u,
+    top: o.y * u,
+    width: 0,
+    height: 0,
+    borderTopWidth: o.h * u,
+    borderTopColor: color,
+    ...(side === 'left'
+      ? { borderRightWidth: o.w * u, borderRightColor: 'transparent' }
+      : { borderLeftWidth: o.w * u, borderLeftColor: 'transparent' }),
+  });
+
   return (
-    <View style={{ width: size, height: size, justifyContent: 'flex-start' }}>
-      <View
-        style={{
-          width: size,
-          height: bubbleHeight,
-          borderRadius: size * 0.33,
-          backgroundColor: color,
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-          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={{
-          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 style={{ width: size, height: size }}>
+      <View style={rect(MARK.back, color)} />
+      <View style={tail(MARK.backTail, 'left')} />
+      <View style={rect(MARK.front, holeColor, MARK.gap)} />
+      <View style={rect(MARK.front, color)} />
+      <View style={tail(MARK.frontTail, 'right')} />
     </View>
   );
 }