@upstep/react-native 0.6.8 → 0.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.6.8",
+  "version": "0.6.11",
   "description": "Upstep feedback SDK for React Native",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -12,7 +12,7 @@
     }
   },
   "dependencies": {
-    "@upstep/types": "0.5.0"
+    "@upstep/types": "0.5.3"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/FeedbackButton.tsx

@@ -1,13 +1,14 @@
 import React from "react";
-import { TouchableOpacity, Text, StyleSheet } from "react-native";
+import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
 import { useUpstep } from "./FeedbackContext";
 
 interface Props {
   position?: "bottom-right" | "bottom-left";
   label?: string;
+  icon?: React.ReactNode;
 }
 
-export function FeedbackButton({ position = "bottom-right", label = "Feedback" }: Props) {
+export function FeedbackButton({ position = "bottom-right", label = "Feedback", icon }: Props) {
   const { openSheet, accentColor } = useUpstep();
 
   return (
@@ -20,12 +21,21 @@ export function FeedbackButton({ position = "bottom-right", label = "Feedback" }
       ]}
       activeOpacity={0.85}
     >
-      <Text style={styles.icon}>💬</Text>
+      {icon ?? <ChatIcon />}
       <Text style={styles.label}>{label}</Text>
     </TouchableOpacity>
   );
 }
 
+function ChatIcon() {
+  return (
+    <View style={styles.iconWrap}>
+      <View style={styles.iconBubble} />
+      <View style={styles.iconTail} />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   btn: {
     position: "absolute",
@@ -45,6 +55,27 @@ const styles = StyleSheet.create({
   },
   right: { right: 20 },
   left: { left: 20 },
-  icon: { fontSize: 14 },
   label: { color: "#fff", fontSize: 14, fontWeight: "600" },
+  iconWrap: { width: 16, height: 16, position: "relative" },
+  iconBubble: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 2,
+    bottom: 3,
+    borderRadius: 4,
+    borderWidth: 1.5,
+    borderColor: "#fff",
+  },
+  iconTail: {
+    position: "absolute",
+    bottom: 0,
+    left: 3,
+    width: 5,
+    height: 5,
+    borderRightWidth: 1.5,
+    borderBottomWidth: 1.5,
+    borderColor: "#fff",
+    transform: [{ rotate: "45deg" }],
+  },
 });

package/src/FeedbackContext.tsx

@@ -38,6 +38,7 @@ interface UpstepContextValue {
   identify: (userId: string | undefined) => void;
   accentColor: string;
   theme: "light" | "dark" | "auto";
+  showBranding: boolean;
 }
 
 const UpstepContext = createContext<UpstepContextValue | null>(null);
@@ -50,6 +51,7 @@ export function FeedbackProvider({
   const [feedItems, setFeedItems] = useState<Feedback[]>([]);
   const [feedLoading, setFeedLoading] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
+  const [showBranding, setShowBranding] = useState(true);
 
   useEffect(() => {
     client.setUserId(config.userId);
@@ -60,6 +62,7 @@ export function FeedbackProvider({
     try {
       const data = await client.listFeedback({ sort: "votes", limit: 30 });
       setFeedItems(data.items);
+      setShowBranding(data.showBranding ?? true);
     } catch {
       // non-critical
     } finally {
@@ -132,6 +135,7 @@ export function FeedbackProvider({
         isOpen, openSheet, closeSheet, identify,
         accentColor: config.accentColor ?? DEFAULT_ACCENT,
         theme: config.theme ?? "auto",
+        showBranding,
       }}
     >
       {children}

package/src/FeedbackSheet.tsx

@@ -60,13 +60,12 @@ type Nav =
 // ─── FeedbackSheet ────────────────────────────────────────────────────────────
 
 export function FeedbackSheet() {
-  const { isOpen, closeSheet, accentColor, theme, loadFeed } = useUpstep();
+  const { isOpen, closeSheet, accentColor, theme, loadFeed, showBranding } = useUpstep();
   const scheme = useColorScheme();
   const isDark = theme === "dark" || (theme === "auto" && scheme === "dark");
   const p = isDark ? DARK : LIGHT;
 
   const [nav, setNav] = useState<Nav>({ screen: "list" });
-  const [listTab, setListTab] = useState<"open" | "done">("open");
   const insets = useSafeAreaInsets();
 
   // Refresh list every time the modal opens
@@ -136,30 +135,6 @@ export function FeedbackSheet() {
             )}
           </View>
 
-          {/* Open / Completed tabs — only on list screen */}
-          {nav.screen === "list" && (
-            <View style={[styles.listTabBar, { borderBottomColor: p.border }]}>
-              <TouchableOpacity
-                onPress={() => setListTab("open")}
-                style={[styles.listTabBtn, listTab === "open" && { borderBottomColor: accentColor }]}
-                activeOpacity={0.7}
-              >
-                <Text style={[styles.listTabText, { color: listTab === "open" ? accentColor : p.textFaint }]}>
-                  Open
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                onPress={() => setListTab("done")}
-                style={[styles.listTabBtn, listTab === "done" && { borderBottomColor: accentColor }]}
-                activeOpacity={0.7}
-              >
-                <Text style={[styles.listTabText, { color: listTab === "done" ? accentColor : p.textFaint }]}>
-                  Completed
-                </Text>
-              </TouchableOpacity>
-            </View>
-          )}
-
           {/* Scrollable body */}
           <ScrollView
             style={styles.scroll}
@@ -171,7 +146,6 @@ export function FeedbackSheet() {
               <FeedListBody
                 p={p}
                 accent={accentColor}
-                tab={listTab}
                 onSelect={(id) => setNav({ screen: "detail", feedbackId: id })}
               />
             )}
@@ -193,19 +167,21 @@ export function FeedbackSheet() {
             )}
           </ScrollView>
 
-          {/* Branding + safe-area bottom padding in one strip */}
-          <TouchableOpacity
-            onPress={() => Linking.openURL("https://upstep.dev")}
-            activeOpacity={0.6}
-            style={[
-              styles.poweredBy,
-              { borderTopColor: p.border, paddingBottom: insets.bottom + 10, backgroundColor: p.bg },
-            ]}
-          >
-            <Text style={[styles.poweredByText, { color: p.textFaint }]}>
-              Powered by <Text style={{ fontWeight: "700" }}>Upstep.dev</Text>
-            </Text>
-          </TouchableOpacity>
+          {/* Branding — hidden for Business plan */}
+          {showBranding && (
+            <TouchableOpacity
+              onPress={() => Linking.openURL("https://upstep.dev")}
+              activeOpacity={0.6}
+              style={[
+                styles.poweredBy,
+                { borderTopColor: p.border, paddingBottom: insets.bottom + 10, backgroundColor: p.bg },
+              ]}
+            >
+              <Text style={[styles.poweredByText, { color: p.textFaint }]}>
+                Powered by <Text style={{ fontWeight: "700" }}>Upstep.dev</Text>
+              </Text>
+            </TouchableOpacity>
+          )}
         </View>
       </KeyboardAvoidingView>
     </Modal>
@@ -215,15 +191,13 @@ export function FeedbackSheet() {
 // ─── FeedListBody ─────────────────────────────────────────────────────────────
 
 function FeedListBody({
-  p, accent, tab, onSelect,
+  p, accent, onSelect,
 }: {
-  p: Palette; accent: string; tab: "open" | "done"; onSelect: (id: string) => void;
+  p: Palette; accent: string; onSelect: (id: string) => void;
 }) {
   const { feedItems, feedLoading, vote } = useUpstep();
 
-  const displayItems = tab === "done"
-    ? feedItems.filter((f) => f.status === "DONE")
-    : feedItems.filter((f) => f.status === "OPEN" || f.status === "IN_PROGRESS" || f.status === "PENDING");
+  const displayItems = feedItems.filter((f) => f.status !== "CLOSED");
 
   if (feedLoading) {
     return (
@@ -237,9 +211,7 @@ function FeedListBody({
     return (
       <View style={styles.centered}>
         <Text style={[styles.emptyText, { color: p.textFaint }]}>
-          {tab === "done"
-            ? "No completed items yet."
-            : "No open feedback yet. Be the first to add one."}
+          No open feedback yet. Be the first to add one.
         </Text>
       </View>
     );
@@ -638,23 +610,6 @@ const styles = StyleSheet.create({
   newBtn: { borderRadius: 20, paddingHorizontal: 14, paddingVertical: 7 },
   newBtnText: { color: "#fff", fontSize: 13, fontWeight: "700" },
 
-  // List tab bar
-  listTabBar: {
-    flexDirection: "row",
-    borderBottomWidth: StyleSheet.hairlineWidth,
-  },
-  listTabBtn: {
-    flex: 1,
-    alignItems: "center",
-    paddingVertical: 11,
-    borderBottomWidth: 2,
-    borderBottomColor: "transparent",
-  },
-  listTabText: {
-    fontSize: 13,
-    fontWeight: "600",
-  },
-
   // Scroll — flex: 1 fills all remaining space after the fixed header
   scroll: { flex: 1 },
   scrollContent: { flexGrow: 1, padding: 16, paddingBottom: 32 },

package/src/api.ts

@@ -13,7 +13,7 @@ export class UpstepApiClient {
   userId: string | undefined;
 
   constructor(config: UpstepConfig) {
-    this.baseUrl = (config.baseUrl ?? "https://upstep.io").replace(/\/$/, "");
+    this.baseUrl = (config.baseUrl ?? "https://upstep.dev").replace(/\/$/, "");
     this.apiKey = config.apiKey;
     if (config.userId !== undefined) this.userId = config.userId;
   }