@appsupportkit/support-sdk 0.1.1 → 0.2.0

package/src/components/SupportButton.tsx

@@ -1,11 +1,19 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AppState, Pressable, Text, View } from 'react-native';
-import { getThreads, markRead, postMessage, submitQuery, SupportApiError, type ApiConfig } from '../api';
+import { useCallback, useMemo, useState } from 'react';
+import { Text, View } from 'react-native';
+import {
+  postMessage,
+  registerPush,
+  submitQuery,
+  SupportApiError,
+  type ApiConfig,
+} from '../api';
+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 { ThreadScreen } from './screens/ThreadScreen';
@@ -16,13 +24,16 @@ type Screen =
   | { name: 'thread'; threadId: string };
 
 /**
- * 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(
     () => ({
@@ -35,71 +46,44 @@ 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 { 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 refresh = useCallback(async () => {
-    if (validationError) return;
-    setLoading(true);
-    setError(null);
+  /**
+   * Asks for notification permission the moment the sheet opens, then
+   * reports the outcome (including denials) so the dashboard knows whether
+   * this user is reachable. Deliberately fire-and-forget: nothing in the
+   * support flow waits on it or breaks if it fails.
+   */
+  const syncPushPermission = useCallback(async () => {
+    if (validationError !== null || !isPushAvailable) return;
     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);
+      const registration = await ensurePushPermission(props.expoProjectId);
+      await registerPush(config, {
+        revenuecatId: props.user.revenuecatId,
+        permissionStatus: registration.status,
+        expoPushToken: registration.token,
+        asked: registration.asked,
+      });
+    } catch {
+      // Push is an enhancement — never surfaced to the user as an error.
     }
-  }, [config, props.user.revenuecatId, validationError]);
-
-  // Poll on mount…
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
+  }, [config, props.user.revenuecatId, props.expoProjectId, validationError]);
 
-  // …in the background so the badge stays current without opening the
-  // sheet, and whenever the app returns to the foreground.
-  const pollIntervalMs = props.pollIntervalMs ?? 30_000;
-  useEffect(() => {
-    // Clamp to a sane floor so a typo like `pollIntervalMs={30}` doesn't
-    // hammer the API. 0 (or negative) disables interval polling.
-    const interval =
-      pollIntervalMs > 0
-        ? setInterval(() => void refresh(), Math.max(pollIntervalMs, 5_000))
-        : null;
-
-    const appStateSub = AppState.addEventListener('change', (state) => {
-      if (state === 'active') void refresh();
-    });
-
-    return () => {
-      if (interval !== null) clearInterval(interval);
-      appStateSub.remove();
-    };
-  }, [pollIntervalMs, refresh]);
-
-  // …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();
   }
 
   function closeSheet() {
@@ -107,7 +91,7 @@ export function SupportButton(props: SupportButtonProps) {
     setScreen({ name: 'home' });
   }
 
-  if (validationError) {
+  if (validationError !== null) {
     // Dev-mode: loud and actionable. Production: render nothing rather than
     // a broken button.
     if (__DEV__) {
@@ -130,26 +114,6 @@ 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 'Too many requests — try again later';
@@ -171,7 +135,7 @@ export function SupportButton(props: SupportButtonProps) {
         revenuecatId: props.user.revenuecatId,
         appVersion: props.user.appVersion,
       });
-      void refresh();
+      void reload();
       return null;
     } catch (e) {
       return writeErrorMessage(e);
@@ -188,84 +152,48 @@ export function SupportButton(props: SupportButtonProps) {
         revenuecatId: props.user.revenuecatId,
         message,
       });
-      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}
+      threads={threads}
+      loading={loading}
+      refreshing={refreshing}
+      error={error}
+      onRefresh={refresh}
+      onCompose={(type) => setScreen({ name: 'compose', type })}
+      onOpenThread={(thread) =>
+        setScreen({ name: 'thread', threadId: thread.id })
+      }
+      onClose={closeSheet}
+    />
+  );
+
   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 === 'home' && home}
         {screen.name === 'compose' && (
           <ComposeScreen
             theme={theme}
@@ -275,7 +203,7 @@ export function SupportButton(props: SupportButtonProps) {
           />
         )}
         {screen.name === 'thread' &&
-          (activeThread ? (
+          (activeThread !== null ? (
             <ThreadScreen
               theme={theme}
               thread={activeThread}
@@ -283,16 +211,7 @@ export function SupportButton(props: SupportButtonProps) {
               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}
-            />
+            home
           ))}
       </BottomSheet>
     </>

package/src/components/icons.tsx

@@ -145,43 +145,101 @@ 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 }) {
+/** 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>