@upstep/react-native 0.6.14 → 0.6.15

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.6.15
+
+- Show the custom dashboard status name and color in the feedback sheet.
+
 ## 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.14",
+  "version": "0.6.15",
   "description": "Upstep feedback SDK for React Native",
   "homepage": "https://upstep.dev",
   "repository": {
@@ -19,7 +19,7 @@
     }
   },
   "dependencies": {
-    "@upstep/types": "0.5.5"
+    "@upstep/types": "0.5.6"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1.18",

package/src/FeedbackSheet.tsx

@@ -277,7 +277,7 @@ function FeedCard({
           <TypeBadge type={item.type} p={p} />
           {item.status === "PENDING"
             ? <PendingBadge />
-            : <StatusDot status={item.status} />}
+            : <StatusDot status={item.status} color={item.boardStatus?.color} />}
           <Text style={[styles.cardDate, { color: p.textFaint }]}>{fmtDate(item.createdAt)}</Text>
         </View>
         <LabelBadges labels={item.labels} p={p} />
@@ -338,7 +338,7 @@ function FeedDetailBody({
         <TypeBadge type={item.type} p={p} />
         {item.status === "PENDING"
           ? <PendingBadge />
-          : <StatusBadge status={item.status} p={p} />}
+          : <StatusBadge status={item.status} boardStatus={item.boardStatus} p={p} />}
         <LabelBadges labels={item.labels} p={p} />
       </View>
 
@@ -549,15 +549,19 @@ const STATUS_COLOR: Record<string, string> = {
   PENDING: "#ea580c", CLOSED: "#6b7280",
 };
 
-function StatusDot({ status }: { status: string }) {
-  return <View style={[styles.statusDot, { backgroundColor: STATUS_COLOR[status] ?? "#9ca3af" }]} />;
+function StatusDot({ status, color }: { status: string; color?: string }) {
+  return <View style={[styles.statusDot, { backgroundColor: color ?? STATUS_COLOR[status] ?? "#9ca3af" }]} />;
 }
 
-function StatusBadge({ status, p }: { status: string; p: Palette }) {
+function StatusBadge({
+  status, boardStatus, p,
+}: {
+  status: string; boardStatus: Feedback["boardStatus"]; p: Palette;
+}) {
   return (
     <View style={[styles.statusBadge, { backgroundColor: p.bgSoft, borderColor: p.border }]}>
-      <StatusDot status={status} />
-      <Text style={[styles.statusBadgeText, { color: p.textSoft }]}>{status.replace("_", " ")}</Text>
+      <StatusDot status={status} color={boardStatus?.color} />
+      <Text style={[styles.statusBadgeText, { color: p.textSoft }]}>{boardStatus?.name ?? status.replace("_", " ")}</Text>
     </View>
   );
 }