@squad-sports/react-native 1.3.1

package/src/screens/settings/DeleteAccountScreen.tsx

@@ -0,0 +1,182 @@
+import React, { useCallback, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  Alert,
+  TextInput,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useSquadSDK, useApiClient } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import Button from '../../components/ux/buttons/Button';
+import { TitleMedium, BodyRegular, BodyMedium, BodySmall } from '../../components/ux/text/Typography';
+
+const REASONS = [
+  { id: 'not_useful', label: "It's not useful to me" },
+  { id: 'privacy', label: 'Privacy concerns' },
+  { id: 'too_many_notifications', label: 'Too many notifications' },
+  { id: 'found_alternative', label: 'Found an alternative' },
+  { id: 'other', label: 'Other' },
+];
+
+export function DeleteAccountScreen() {
+  const navigation = useNavigation();
+  const sdk = useSquadSDK();
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+
+  const [selectedReason, setSelectedReason] = useState<string | null>(null);
+  const [otherText, setOtherText] = useState('');
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [step, setStep] = useState<'reason' | 'confirm'>('reason');
+
+  const handleDelete = useCallback(async () => {
+    setIsDeleting(true);
+
+    try {
+      const { UserDeletionRequestBody } = await import('@squad-sports/core');
+      await apiClient.requestAccountDeletion(
+        new UserDeletionRequestBody({
+          reason: (selectedReason === 'other' ? otherText : selectedReason ?? '') as any,
+        }),
+      );
+      await sdk.sessionManager.logout();
+      // Navigator will route to auth
+    } catch {
+      Alert.alert('Error', 'Failed to delete account. Please try again or contact support.');
+      setIsDeleting(false);
+    }
+  }, [selectedReason, otherText, apiClient, sdk]);
+
+  const handleContinue = useCallback(() => {
+    if (!selectedReason) return;
+
+    Alert.alert(
+      'Delete Account',
+      'This will permanently delete your account, all your messages, freestyles, and connections. This cannot be undone.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Delete My Account', style: 'destructive', onPress: handleDelete },
+      ],
+    );
+  }, [selectedReason, handleDelete]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Delete Account" />
+
+      <View style={styles.content}>
+        <View style={styles.warningBanner}>
+          <Text style={styles.warningIcon}>{'!'}</Text>
+          <BodyMedium style={styles.warningText}>
+            This action is permanent and cannot be undone
+          </BodyMedium>
+        </View>
+
+        <TitleMedium style={styles.heading}>
+          We're sorry to see you go
+        </TitleMedium>
+        <BodyRegular style={styles.subtitle}>
+          Please tell us why you're leaving so we can improve
+        </BodyRegular>
+
+        <View style={styles.reasons}>
+          {REASONS.map(reason => (
+            <Pressable
+              key={reason.id}
+              style={[
+                styles.reasonRow,
+                selectedReason === reason.id && [styles.reasonRowSelected, { borderColor: Colors.red }],
+              ]}
+              onPress={() => setSelectedReason(reason.id)}
+            >
+              <View style={[
+                styles.radio,
+                selectedReason === reason.id && styles.radioSelected,
+              ]}>
+                {selectedReason === reason.id && <View style={styles.radioDot} />}
+              </View>
+              <BodyRegular style={styles.reasonText}>{reason.label}</BodyRegular>
+            </Pressable>
+          ))}
+        </View>
+
+        {selectedReason === 'other' && (
+          <TextInput
+            value={otherText}
+            onChangeText={setOtherText}
+            placeholder="Tell us more..."
+            placeholderTextColor={Colors.gray6}
+            style={styles.otherInput}
+            multiline
+            maxLength={200}
+          />
+        )}
+      </View>
+
+      <View style={styles.footer}>
+        <Button
+          style={[styles.deleteButton, { opacity: selectedReason ? 1 : 0.5 }]}
+          onPress={handleContinue}
+          disabled={!selectedReason || isDeleting}
+        >
+          <Text style={styles.deleteButtonText}>
+            {isDeleting ? 'Deleting...' : 'Delete My Account'}
+          </Text>
+        </Button>
+
+        <Button style={styles.cancelButton} onPress={() => navigation.goBack()}>
+          <Text style={styles.cancelButtonText}>Keep My Account</Text>
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: { flex: 1, paddingHorizontal: 24, paddingTop: 16 },
+  warningBanner: {
+    flexDirection: 'row', alignItems: 'center', gap: 8,
+    backgroundColor: 'rgba(255, 68, 120, 0.1)',
+    borderRadius: 8, padding: 12, marginBottom: 24,
+  },
+  warningIcon: { color: Colors.red, fontSize: 18, fontWeight: '700' },
+  warningText: { color: Colors.red, flex: 1 },
+  heading: { color: Colors.white, marginBottom: 8 },
+  subtitle: { color: Colors.gray6, marginBottom: 24 },
+  reasons: { gap: 8 },
+  reasonRow: {
+    flexDirection: 'row', alignItems: 'center', gap: 12,
+    padding: 16, backgroundColor: Colors.gray2, borderRadius: 12,
+    borderWidth: 2, borderColor: 'transparent',
+  },
+  reasonRowSelected: { backgroundColor: 'rgba(255, 68, 120, 0.05)' },
+  radio: {
+    width: 22, height: 22, borderRadius: 11,
+    borderWidth: 2, borderColor: Colors.gray5,
+    justifyContent: 'center', alignItems: 'center',
+  },
+  radioSelected: { borderColor: Colors.red },
+  radioDot: { width: 10, height: 10, borderRadius: 5, backgroundColor: Colors.red },
+  reasonText: { color: Colors.white, flex: 1 },
+  otherInput: {
+    marginTop: 12, color: Colors.white, fontSize: 14,
+    backgroundColor: Colors.gray2, borderRadius: 8,
+    padding: 16, minHeight: 80, textAlignVertical: 'top',
+  },
+  footer: { paddingHorizontal: 24, paddingBottom: 32, gap: 12 },
+  deleteButton: {
+    height: 56, borderRadius: 28, backgroundColor: Colors.red,
+    justifyContent: 'center', alignItems: 'center',
+  },
+  deleteButtonText: { color: Colors.white, fontSize: 16, fontWeight: '600' },
+  cancelButton: {
+    height: 48, borderRadius: 24, justifyContent: 'center', alignItems: 'center',
+  },
+  cancelButtonText: { color: Colors.gray6, fontSize: 15 },
+});

package/src/screens/settings/EditProfileScreen.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  Pressable,
+  Alert,
+  ScrollView,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useApiClient } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import Button from '../../components/ux/buttons/Button';
+import UserImage from '../../components/ux/user-image/UserImage';
+import { BodyRegular, BodyMedium } from '../../components/ux/text/Typography';
+import type { User } from '@squad-sports/core';
+
+export function EditProfileScreen() {
+  const navigation = useNavigation();
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+
+  const [user, setUser] = useState<User | null>(null);
+  const [displayName, setDisplayName] = useState('');
+  const [email, setEmail] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+
+  useEffect(() => {
+    const load = async () => {
+      const userData = await apiClient.getLoggedInUser();
+      if (userData) {
+        setUser(userData);
+        setDisplayName(userData.displayName ?? '');
+        setEmail(userData.email ?? '');
+      }
+    };
+    load();
+  }, [apiClient]);
+
+  const handleSave = useCallback(async () => {
+    if (!user || !hasChanges) return;
+
+    setIsSaving(true);
+    try {
+      const updated = user.clone();
+      updated.displayName = displayName.trim();
+      await apiClient.updateLoggedInUser(updated);
+      navigation.goBack();
+    } catch {
+      Alert.alert('Error', 'Failed to save profile. Please try again.');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [user, displayName, hasChanges, apiClient, navigation]);
+
+  const handlePickPhoto = useCallback(async () => {
+    try {
+      const ImagePicker = await import('expo-image-picker');
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: true,
+        aspect: [1, 1],
+        quality: 0.8,
+      });
+
+      if (!result.canceled && result.assets[0] && user) {
+        const response = await fetch(result.assets[0].uri);
+        const blob = await response.blob();
+        const buffer = new Uint8Array(await (blob as any).arrayBuffer());
+        await apiClient.uploadUserImage(user.id ?? '', buffer, 'image/jpeg');
+        // Reload user data
+        const refreshed = await apiClient.getLoggedInUser();
+        if (refreshed) setUser(refreshed);
+      }
+    } catch {
+      Alert.alert('Error', 'Failed to update photo.');
+    }
+  }, [user, apiClient]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader
+        title="Edit Profile"
+        right={
+          hasChanges ? (
+            <Pressable onPress={handleSave} disabled={isSaving}>
+              <Text style={[styles.saveText, { color: theme.buttonColor }]}>
+                {isSaving ? '...' : 'Save'}
+              </Text>
+            </Pressable>
+          ) : undefined
+        }
+      />
+
+      <ScrollView contentContainerStyle={styles.content}>
+        <Pressable onPress={handlePickPhoto} style={styles.photoSection}>
+          <UserImage
+            imageUrl={user?.imageUrl}
+            displayName={displayName}
+            size={96}
+          />
+          <BodyMedium style={[styles.changePhotoText, { color: theme.buttonColor }]}>
+            Change Photo
+          </BodyMedium>
+        </Pressable>
+
+        <View style={styles.field}>
+          <BodyMedium style={styles.label}>Name</BodyMedium>
+          <TextInput
+            value={displayName}
+            onChangeText={(text) => {
+              setDisplayName(text);
+              setHasChanges(true);
+            }}
+            style={styles.input}
+            placeholderTextColor={Colors.gray6}
+            maxLength={30}
+          />
+        </View>
+
+        <View style={styles.field}>
+          <BodyMedium style={styles.label}>Email</BodyMedium>
+          <BodyRegular style={styles.readOnlyValue}>{email}</BodyRegular>
+        </View>
+
+        <View style={styles.field}>
+          <BodyMedium style={styles.label}>Community</BodyMedium>
+          <BodyRegular style={styles.readOnlyValue}>
+            {user?.community ?? 'Not set'}
+          </BodyRegular>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: { paddingHorizontal: 24, paddingBottom: 48 },
+  saveText: { fontSize: 16, fontWeight: '600' },
+  photoSection: { alignItems: 'center', paddingVertical: 24 },
+  changePhotoText: { marginTop: 8 },
+  field: { marginBottom: 24 },
+  label: { color: Colors.gray6, marginBottom: 8, textTransform: 'uppercase', fontSize: 12, letterSpacing: 1 },
+  input: {
+    color: Colors.white, fontSize: 16, paddingVertical: 14, paddingHorizontal: 16,
+    backgroundColor: Colors.gray2, borderRadius: 8,
+  },
+  readOnlyValue: { color: Colors.gray6, fontSize: 16, paddingVertical: 14 },
+});

package/src/screens/settings/NetworkStatusScreen.tsx

@@ -0,0 +1,59 @@
+/**
+ * Network status debug screen.
+ * Ported from squad-demo/src/screens/NetworkStatus.tsx.
+ */
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import { useNetworkStatus } from '../../realtime/NetworkMonitor';
+import { EventProcessor } from '../../realtime/EventProcessor';
+import { BodyRegular, BodyMedium, TitleSmall } from '../../components/ux/text/Typography';
+
+export function NetworkStatusScreen() {
+  const { theme } = useTheme();
+  const isOnline = useNetworkStatus();
+  const sseQuality = EventProcessor.shared.getConnectionQuality();
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Network Status" />
+
+      <View style={styles.content}>
+        <View style={styles.row}>
+          <BodyRegular style={styles.label}>Internet</BodyRegular>
+          <View style={[styles.statusDot, { backgroundColor: isOnline ? Colors.green : Colors.red }]} />
+          <BodyMedium style={styles.value}>{isOnline ? 'Connected' : 'Disconnected'}</BodyMedium>
+        </View>
+
+        <View style={styles.row}>
+          <BodyRegular style={styles.label}>Real-time (SSE)</BodyRegular>
+          <View style={[styles.statusDot, {
+            backgroundColor: sseQuality === 'good' ? Colors.green : sseQuality === 'poor' ? Colors.orange1 : Colors.red,
+          }]} />
+          <BodyMedium style={styles.value}>{sseQuality}</BodyMedium>
+        </View>
+
+        <View style={styles.infoBox}>
+          <TitleSmall style={styles.infoTitle}>About</TitleSmall>
+          <BodyMedium style={styles.infoText}>
+            The Squad SDK uses Server-Sent Events (SSE) for real-time updates.
+            Messages, squad changes, and poll updates arrive automatically when connected.
+          </BodyMedium>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: { padding: 24 },
+  row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 16, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: Colors.gray3 },
+  label: { color: Colors.white, flex: 1 },
+  statusDot: { width: 10, height: 10, borderRadius: 5, marginRight: 8 },
+  value: { color: Colors.gray6 },
+  infoBox: { marginTop: 32, backgroundColor: Colors.gray2, borderRadius: 12, padding: 16 },
+  infoTitle: { color: Colors.white, marginBottom: 8 },
+  infoText: { color: Colors.gray6, lineHeight: 20 },
+});

package/src/screens/settings/SettingsScreen.tsx

@@ -0,0 +1,194 @@
+import React, { useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  Pressable,
+  Alert,
+  Linking,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+
+import { useSquadSDK } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import UserImage from '../../components/ux/user-image/UserImage';
+import { BodyRegular, TitleSmall, BodyMedium } from '../../components/ux/text/Typography';
+import { useCurrentUser } from '../../hooks/useSquadData';
+
+interface SettingsRowProps {
+  label: string;
+  value?: string;
+  onPress?: () => void;
+  danger?: boolean;
+}
+
+function SettingsRow({ label, value, onPress, danger }: SettingsRowProps) {
+  return (
+    <Pressable
+      style={styles.row}
+      onPress={onPress}
+      disabled={!onPress}
+    >
+      <BodyRegular style={[styles.rowLabel, danger && styles.rowLabelDanger]}>
+        {label}
+      </BodyRegular>
+      {value && <BodyMedium style={styles.rowValue}>{value}</BodyMedium>}
+      {onPress && <Text style={styles.rowChevron}>{'>'}</Text>}
+    </Pressable>
+  );
+}
+
+function SettingsSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <View style={styles.section}>
+      <TitleSmall style={styles.sectionTitle}>{title}</TitleSmall>
+      <View style={styles.sectionContent}>{children}</View>
+    </View>
+  );
+}
+
+type Nav = NativeStackNavigationProp<RootStackParamList, 'Settings'>;
+
+export function SettingsScreen() {
+  const sdk = useSquadSDK();
+  const { theme } = useTheme();
+  const { user } = useCurrentUser();
+  const navigation = useNavigation<Nav>();
+
+  const handleLogout = useCallback(() => {
+    Alert.alert(
+      'Log Out',
+      'Are you sure you want to log out?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Log Out',
+          style: 'destructive',
+          onPress: async () => {
+            await sdk.sessionManager.logout();
+            // Navigator will automatically route to auth screen
+          },
+        },
+      ],
+    );
+  }, [sdk]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Settings" />
+
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        {user && (
+          <View style={styles.profileSection}>
+            <UserImage
+              imageUrl={user.imageUrl}
+              displayName={user.displayName}
+              size={64}
+            />
+            <View style={styles.profileInfo}>
+              <TitleSmall style={styles.profileName}>
+                {user.displayName}
+              </TitleSmall>
+              <BodyMedium style={styles.profileEmail}>
+                {user.email ?? user.phone ?? ''}
+              </BodyMedium>
+            </View>
+          </View>
+        )}
+
+        <SettingsSection title="Account">
+          <SettingsRow label="Edit Profile" onPress={() => navigation.navigate('EditProfile')} />
+          <SettingsRow label="Community" value={user?.community ?? ''} onPress={() => {}} />
+          <SettingsRow label="Blocked Users" onPress={() => navigation.navigate('BlockedUsers')} />
+        </SettingsSection>
+
+        <SettingsSection title="Notifications">
+          <SettingsRow label="Push Notifications" onPress={() => Linking.openSettings()} />
+          <SettingsRow label="Email Notifications" onPress={() => {}} />
+        </SettingsSection>
+
+        <SettingsSection title="About">
+          <SettingsRow label="Terms & Conditions" onPress={() => Linking.openURL('https://www.withyoursquad.com/terms')} />
+          <SettingsRow label="Privacy Policy" onPress={() => Linking.openURL('https://www.withyoursquad.com/privacy')} />
+          <SettingsRow label="SDK Version" value="0.1.0" />
+        </SettingsSection>
+
+        <SettingsSection title="">
+          <SettingsRow label="Log Out" onPress={handleLogout} danger />
+          <SettingsRow label="Delete Account" onPress={() => navigation.navigate('DeleteAccount')} danger />
+        </SettingsSection>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: 24,
+    paddingBottom: 48,
+  },
+  profileSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 20,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.gray3,
+    marginBottom: 24,
+  },
+  profileInfo: {
+    marginLeft: 16,
+    flex: 1,
+  },
+  profileName: {
+    color: Colors.white,
+  },
+  profileEmail: {
+    color: Colors.gray6,
+    marginTop: 2,
+  },
+  section: {
+    marginBottom: 32,
+  },
+  sectionTitle: {
+    color: Colors.gray6,
+    marginBottom: 8,
+    textTransform: 'uppercase',
+    fontSize: 12,
+    letterSpacing: 1,
+  },
+  sectionContent: {
+    backgroundColor: Colors.gray2,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.gray3,
+  },
+  rowLabel: {
+    color: Colors.white,
+    flex: 1,
+  },
+  rowLabelDanger: {
+    color: Colors.red,
+  },
+  rowValue: {
+    color: Colors.gray6,
+    marginRight: 8,
+  },
+  rowChevron: {
+    color: Colors.gray6,
+    fontSize: 14,
+  },
+});