@appsupportkit/support-sdk 0.3.0 → 0.4.0

package/src/components/SupportButton.tsx

@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Text, View } from 'react-native';
+import { Platform, Text, useColorScheme, View } from 'react-native';
 import {
-  postMessage,
   registerPush,
+  registerUser,
+  reviewOpened,
+  sendMessage,
   setLanguage as setLanguageRequest,
-  submitQuery,
   SupportApiError,
   type ApiConfig,
 } from '../api';
@@ -15,34 +16,50 @@ import {
   deviceLanguage,
   type Language,
 } from '../i18n/languages';
-import { ensurePushPermission, isPushAvailable } from '../push';
-import { resolveTheme } from '../theme';
-import type { QueryType, SupportButtonProps, Thread } from '../types';
+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 { ChatScreen } from './screens/ChatScreen';
 import { LanguageScreen } from './screens/LanguageScreen';
-import { ThreadScreen } from './screens/ThreadScreen';
 
-type Screen =
-  | { name: 'home' }
-  | { name: 'language' }
-  | { 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(
@@ -55,16 +72,23 @@ export function SupportButton(props: SupportButtonProps) {
   );
 
   const [sheetOpen, setSheetOpen] = useState(false);
-  const [screen, setScreen] = useState<Screen>({ name: 'home' });
+  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,
-    refreshing,
     errorKey,
     serverLanguage,
     languageLoaded,
+    store,
     refresh,
     reload,
   } = useSupportThreads({
@@ -72,16 +96,12 @@ export function SupportButton(props: SupportButtonProps) {
     revenuecatId: props.user.revenuecatId,
     enabled: validationError === null,
     sheetOpen,
-    activeThreadId: screen.name === 'thread' ? screen.threadId : null,
+    // 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,
   });
 
-  /**
-   * 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);
@@ -129,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.
@@ -139,7 +211,7 @@ export function SupportButton(props: SupportButtonProps) {
 
   function closeSheet() {
     setSheetOpen(false);
-    setScreen({ name: 'home' });
+    setScreen('chat');
     setDraftLanguage(null);
     setLanguageError(null);
   }
@@ -193,7 +265,7 @@ export function SupportButton(props: SupportButtonProps) {
       });
       setChosen(next);
       setDraftLanguage(null);
-      setScreen({ name: 'home' });
+      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();
@@ -208,37 +280,13 @@ export function SupportButton(props: SupportButtonProps) {
     }
   }
 
-  async function handleSubmit(
-    type: QueryType,
-    message: string,
-  ): Promise<string | null> {
-    try {
-      await submitQuery(config, {
-        queryType: type,
-        message,
-        userName: props.user.name,
-        isPaid: props.user.isPaid,
-        revenuecatId: props.user.revenuecatId,
-        appVersion: props.user.appVersion,
-        language,
-      });
-      void reload();
-      return null;
-    } catch (e) {
-      return writeErrorMessage(e);
-    }
-  }
-
-  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;
@@ -247,33 +295,20 @@ 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');
 
-  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}
-    />
-  );
+  /** 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 languagePicker = (
     <LanguageScreen
@@ -290,7 +325,7 @@ export function SupportButton(props: SupportButtonProps) {
           : () => {
               setDraftLanguage(null);
               setLanguageError(null);
-              setScreen({ name: 'home' });
+              setScreen('chat');
             }
       }
       onDismiss={mustChooseLanguage ? closeSheet : undefined}
@@ -314,33 +349,27 @@ export function SupportButton(props: SupportButtonProps) {
       <BottomSheet visible={sheetOpen} onClose={closeSheet} theme={theme}>
         {/* The one-time prompt outranks whatever screen the user is on: it
             only ever fires before they have sent anything. */}
-        {mustChooseLanguage || screen.name === 'language' ? (
+        {mustChooseLanguage || screen === '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
-              ))}
-          </>
+          <ChatScreen
+            theme={theme}
+            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}
+          />
         )}
       </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,
@@ -223,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.
  */
-export function ChatBubbleMark({
+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 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>
   );
 }