@upstep/react-native 0.6.7 → 0.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.6.7",
+  "version": "0.6.10",
   "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.1"
   },
   "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 {
@@ -81,9 +84,11 @@ export function FeedbackProvider({
   );
 
   const vote = useCallback(async (feedbackId: string, value: VoteValue) => {
-    // Optimistic update: flip vote + re-sort with a smooth animation
+    // Capture snapshot for rollback, then animate into new sorted position
+    let snapshot: Feedback[] = [];
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     setFeedItems((prev) => {
+      snapshot = prev;
       const updated = prev.map((f) => {
         if (f.id !== feedbackId) return f;
         const wasVoted = f.userVote === "UP";
@@ -96,10 +101,14 @@ export function FeedbackProvider({
       return [...updated].sort((a, b) => b.upvotes - a.upvotes);
     });
 
-    // Confirm with server, then silently sync
-    await client.vote(feedbackId, value);
-    await loadFeed();
-  }, [client, loadFeed]);
+    try {
+      await client.vote(feedbackId, value);
+    } catch {
+      // API failed — animate back to original order
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      setFeedItems(snapshot);
+    }
+  }, [client]);
 
   const getItem = useCallback(
     (feedbackId: string) => client.getItem(feedbackId),
@@ -126,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,7 +60,7 @@ 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;
@@ -193,19 +193,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>