@upstep/react-native 0.6.12 → 0.6.14

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.6.14
+
+- Show dashboard custom labels on feedback cards and detail views.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.6.12",
+  "version": "0.6.14",
   "description": "Upstep feedback SDK for React Native",
   "homepage": "https://upstep.dev",
   "repository": {
@@ -19,14 +19,16 @@
     }
   },
   "dependencies": {
-    "@upstep/types": "0.5.4"
+    "@upstep/types": "0.5.5"
   },
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=1.18",
     "react": ">=18",
     "react-native": ">=0.73",
     "react-native-safe-area-context": ">=4"
   },
   "devDependencies": {
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@types/react": "^19.0.7",
     "@types/react-native": "^0.73.0",
     "react-native-safe-area-context": "^5.8.0",

package/src/FeedbackSheet.tsx

@@ -280,6 +280,7 @@ function FeedCard({
             : <StatusDot status={item.status} />}
           <Text style={[styles.cardDate, { color: p.textFaint }]}>{fmtDate(item.createdAt)}</Text>
         </View>
+        <LabelBadges labels={item.labels} p={p} />
       </View>
 
       <Text style={[styles.chevron, { color: p.textFaint }]}>›</Text>
@@ -338,6 +339,7 @@ function FeedDetailBody({
         {item.status === "PENDING"
           ? <PendingBadge />
           : <StatusBadge status={item.status} p={p} />}
+        <LabelBadges labels={item.labels} p={p} />
       </View>
 
       <Text style={[styles.detailContent, { color: p.textSoft }]}>{item.content}</Text>
@@ -560,6 +562,21 @@ function StatusBadge({ status, p }: { status: string; p: Palette }) {
   );
 }
 
+function LabelBadges({ labels, p }: { labels: Feedback["labels"]; p: Palette }) {
+  if (!labels?.length) return null;
+
+  return (
+    <View style={styles.labelBadges}>
+      {labels.map((label) => (
+        <View key={label.id} style={[styles.labelBadge, { backgroundColor: p.bgSoft, borderColor: label.color }]}>
+          <View style={[styles.labelDot, { backgroundColor: label.color }]} />
+          <Text style={[styles.labelBadgeText, { color: p.textSoft }]} numberOfLines={1}>{label.name}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
 function fmtDate(iso: string) {
   return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
 }
@@ -641,12 +658,16 @@ const styles = StyleSheet.create({
   cardDesc: { fontSize: 12.5, lineHeight: 17, marginBottom: 6 },
   cardMeta: { flexDirection: "row", alignItems: "center", gap: 6 },
   cardDate: { fontSize: 11 },
+  labelBadges: { flexDirection: "row", flexWrap: "wrap", gap: 6, marginTop: 7 },
+  labelBadge: { flexDirection: "row", alignItems: "center", gap: 5, borderWidth: 1, borderRadius: 10, paddingHorizontal: 7, paddingVertical: 3, maxWidth: "100%" },
+  labelDot: { width: 6, height: 6, borderRadius: 3 },
+  labelBadgeText: { fontSize: 11, fontWeight: "500", flexShrink: 1 },
   chevron: { fontSize: 22, fontWeight: "300", marginLeft: 4 },
 
   // Detail
   detailPad: { paddingTop: 4 },
   detailTitle: { fontSize: 22, fontWeight: "700", letterSpacing: -0.4, marginBottom: 10, lineHeight: 28 },
-  badgeRow: { flexDirection: "row", gap: 8, marginBottom: 16 },
+  badgeRow: { flexDirection: "row", flexWrap: "wrap", gap: 8, marginBottom: 16 },
   detailContent: { fontSize: 15, lineHeight: 23, marginBottom: 24 },
   upvoteBtn: {
     flexDirection: "row", alignItems: "center", gap: 8,

package/src/api.ts

@@ -1,3 +1,4 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import type {
   Feedback,
   FeedbackListResponse,
@@ -7,15 +8,42 @@ import type {
   VoteValue,
 } from "@upstep/types";
 
+const ANON_ID_KEY = "upstep-anonymous-id";
+
+function generateId(): string {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+
 export class UpstepApiClient {
   private readonly baseUrl: string;
   private readonly apiKey: string;
   userId: string | undefined;
+  // Set synchronously to a throwaway id so there's always something to send;
+  // swapped for the persisted value (or backfilled into storage) once
+  // AsyncStorage resolves. Callers await anonymousIdReady first so requests
+  // always go out with the id that's actually persisted.
+  anonymousId: string;
+  private readonly anonymousIdReady: Promise<void>;
 
   constructor(config: UpstepConfig) {
     this.baseUrl = (config.baseUrl ?? "https://upstep.dev").replace(/\/$/, "");
     this.apiKey = config.apiKey;
     if (config.userId !== undefined) this.userId = config.userId;
+    this.anonymousId = generateId();
+    this.anonymousIdReady = this.loadAnonymousId();
+  }
+
+  private async loadAnonymousId(): Promise<void> {
+    try {
+      const stored = await AsyncStorage.getItem(ANON_ID_KEY);
+      if (stored) {
+        this.anonymousId = stored;
+      } else {
+        await AsyncStorage.setItem(ANON_ID_KEY, this.anonymousId);
+      }
+    } catch {
+      // storage unavailable - keep the in-memory id for this session
+    }
   }
 
   /** Update the end-user id at runtime (e.g. after the user logs in). */
@@ -28,20 +56,25 @@ export class UpstepApiClient {
   }
 
   async listFeedback(params?: { cursor?: string; limit?: number; sort?: "date" | "votes" }): Promise<FeedbackListResponse> {
+    await this.anonymousIdReady;
     const qs = new URLSearchParams();
     if (params?.cursor) qs.set("cursor", params.cursor);
     if (params?.limit) qs.set("limit", String(params.limit));
     if (params?.sort) qs.set("sort", params.sort);
     // Pass userId so the server can include the user's own pending items.
     if (this.userId) qs.set("endUserId", this.userId);
+    qs.set("anonymousId", this.anonymousId);
     const res = await fetch(`${this.baseUrl}/api/sdk/feedback?${qs}`, { headers: this.headers() });
     if (!res.ok) throw new Error(`Upstep: ${res.status}`);
     return res.json() as Promise<FeedbackListResponse>;
   }
 
   async getItem(feedbackId: string): Promise<FeedbackWithComments> {
-    const qs = this.userId ? `?endUserId=${encodeURIComponent(this.userId)}` : "";
-    const res = await fetch(`${this.baseUrl}/api/sdk/feedback/${feedbackId}${qs}`, {
+    await this.anonymousIdReady;
+    const qs = new URLSearchParams();
+    if (this.userId) qs.set("endUserId", this.userId);
+    qs.set("anonymousId", this.anonymousId);
+    const res = await fetch(`${this.baseUrl}/api/sdk/feedback/${feedbackId}?${qs}`, {
       headers: this.headers(),
     });
     if (!res.ok) throw new Error(`Upstep: ${res.status}`);
@@ -49,20 +82,26 @@ export class UpstepApiClient {
   }
 
   async submitFeedback(payload: SubmitFeedbackPayload): Promise<Feedback> {
+    await this.anonymousIdReady;
     const res = await fetch(`${this.baseUrl}/api/sdk/feedback`, {
       method: "POST",
       headers: this.headers(),
-      body: JSON.stringify({ ...payload, endUserId: payload.endUserId ?? this.userId }),
+      body: JSON.stringify({
+        ...payload,
+        endUserId: payload.endUserId ?? this.userId,
+        anonymousId: payload.anonymousId ?? this.anonymousId,
+      }),
     });
     if (!res.ok) throw new Error(`Upstep: ${res.status}`);
     return res.json() as Promise<Feedback>;
   }
 
   async vote(feedbackId: string, value: VoteValue): Promise<void> {
+    await this.anonymousIdReady;
     const res = await fetch(`${this.baseUrl}/api/sdk/feedback/${feedbackId}/vote`, {
       method: "POST",
       headers: this.headers(),
-      body: JSON.stringify({ value, endUserId: this.userId }),
+      body: JSON.stringify({ value, endUserId: this.userId, anonymousId: this.anonymousId }),
     });
     if (!res.ok) throw new Error(`Upstep: ${res.status}`);
   }

package/.turbo/turbo-type-check.log

@@ -1,4 +0,0 @@
-
-> @upstep/react-native@0.6.12 type-check /Users/sandhyasandy/Dev/upstep/packages/sdk-react-native
-> tsc --noEmit
-