@squad-sports/react-native 1.3.1

package/src/screens/onboarding/OnboardingAccountSetupScreen.tsx

@@ -0,0 +1,221 @@
+import React, { useCallback, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  Pressable,
+  Alert,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import * as ImagePicker from 'expo-image-picker';
+
+import { useApiClient, useSquadSDK } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import Button from '../../components/ux/buttons/Button';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import UserImage from '../../components/ux/user-image/UserImage';
+import AvoidKeyboardScreen from '../../components/ux/layout/AvoidKeyboardScreen';
+import { BodyRegular, TitleMedium } from '../../components/ux/text/Typography';
+import { ErrorHint } from '../../components/ux/errors/ErrorHint';
+
+export function OnboardingAccountSetupScreen() {
+  const navigation = useNavigation();
+  const apiClient = useApiClient();
+  const sdk = useSquadSDK();
+  const { theme } = useTheme();
+
+  const [displayName, setDisplayName] = useState('');
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const pickImage = useCallback(async () => {
+    try {
+      const permResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (!permResult.granted) {
+        Alert.alert('Permission needed', 'Please grant photo library access to set your profile photo.');
+        return;
+      }
+
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: true,
+        aspect: [1, 1],
+        quality: 0.8,
+      });
+
+      if (!result.canceled && result.assets[0]) {
+        setImageUri(result.assets[0].uri);
+      }
+    } catch {
+      setError('Failed to select image');
+    }
+  }, []);
+
+  const handleComplete = useCallback(async () => {
+    if (!displayName.trim()) {
+      setError('Please enter your name');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Update user profile with display name
+      const user = await apiClient.getLoggedInUser();
+      if (user) {
+        const updatedUser = user.clone();
+        updatedUser.displayName = displayName.trim();
+        updatedUser.status = 'active';
+        await apiClient.updateLoggedInUser(updatedUser);
+
+        // Upload profile image if selected
+        if (imageUri) {
+          const response = await fetch(imageUri);
+          const blob = await response.blob();
+          const buffer = new Uint8Array(await (blob as any).arrayBuffer());
+          await apiClient.uploadUserImage(user.id ?? '', buffer, 'image/jpeg');
+        }
+      }
+
+      // Navigation will automatically route to main flow
+      // since the user now has displayName and community
+    } catch (err) {
+      setError('Failed to save profile. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [displayName, imageUri, apiClient]);
+
+  const buttonDisabled = !displayName.trim() || isLoading;
+
+  return (
+    <AvoidKeyboardScreen>
+      <ScreenHeader title="Set Up Profile" showBack={true} />
+
+      <View style={styles.content}>
+        <Pressable onPress={pickImage} style={styles.avatarContainer}>
+          <UserImage
+            imageUrl={imageUri}
+            displayName={displayName || '?'}
+            size={100}
+          />
+          <View style={[styles.editBadge, { backgroundColor: theme.buttonColor }]}>
+            <Text style={styles.editBadgeText}>+</Text>
+          </View>
+        </Pressable>
+
+        <BodyRegular style={styles.photoHint}>Tap to add a photo</BodyRegular>
+
+        <View style={styles.inputContainer}>
+          <TitleMedium style={styles.label}>What should we call you?</TitleMedium>
+          <TextInput
+            value={displayName}
+            onChangeText={(text) => {
+              setDisplayName(text);
+              setError(null);
+            }}
+            placeholder="Your name"
+            placeholderTextColor={Colors.gray6}
+            style={styles.textInput}
+            autoCapitalize="words"
+            maxLength={30}
+            returnKeyType="done"
+            onSubmitEditing={handleComplete}
+          />
+          <ErrorHint hint={error} />
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <Button
+          style={[
+            styles.button,
+            { backgroundColor: buttonDisabled ? Colors.gray2 : theme.buttonColor },
+          ]}
+          onPress={handleComplete}
+          disabled={buttonDisabled}
+        >
+          <Text
+            style={[
+              styles.buttonText,
+              { color: buttonDisabled ? Colors.gray6 : theme.buttonText },
+            ]}
+          >
+            {isLoading ? 'Saving...' : 'Complete Setup'}
+          </Text>
+        </Button>
+      </View>
+    </AvoidKeyboardScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    paddingTop: 24,
+  },
+  avatarContainer: {
+    position: 'relative',
+    marginBottom: 8,
+  },
+  editBadge: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderColor: Colors.black,
+  },
+  editBadgeText: {
+    color: Colors.white,
+    fontSize: 18,
+    fontWeight: '700',
+    marginTop: -2,
+  },
+  photoHint: {
+    color: Colors.gray6,
+    marginBottom: 32,
+  },
+  inputContainer: {
+    width: '100%',
+    maxWidth: 400,
+  },
+  label: {
+    color: Colors.white,
+    marginBottom: 12,
+  },
+  textInput: {
+    color: Colors.white,
+    fontSize: 18,
+    fontWeight: '500',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderWidth: 1,
+    borderColor: Colors.gray5,
+    borderRadius: 8,
+    backgroundColor: Colors.black,
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 32,
+  },
+  button: {
+    height: 56,
+    borderRadius: 28,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/screens/onboarding/OnboardingTeamSelectScreen.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { View, Text, StyleSheet, FlatList, Pressable, ActivityIndicator } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+import { useApiClient, useSquadSDK } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import Button from '../../components/ux/buttons/Button';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import { BodyRegular, TitleSmall } from '../../components/ux/text/Typography';
+
+type Nav = NativeStackNavigationProp<RootStackParamList, 'OnboardingTeamSelect'>;
+
+interface CommunityItem {
+  id: string;
+  name: string;
+  color?: string;
+}
+
+export function OnboardingTeamSelectScreen() {
+  const navigation = useNavigation<Nav>();
+  const sdk = useSquadSDK();
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+
+  const [communities, setCommunities] = useState<CommunityItem[]>([]);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const partnerCommunityId = sdk.config.partnerAuth?.communityId;
+
+  useEffect(() => {
+    // If partner has a fixed community, auto-select and skip
+    if (partnerCommunityId) {
+      (async () => {
+        try {
+          await apiClient.updateUserCommunity({ id: partnerCommunityId });
+          navigation.navigate('OnboardingAccountSetup');
+        } catch (err) {
+          console.error('[TeamSelect] Error auto-setting partner community:', err);
+          setLoading(false);
+        }
+      })();
+      return;
+    }
+
+    const fetchCommunities = async () => {
+      try {
+        const result = await apiClient.fetchAllCommunities();
+        if (result?.communities) {
+          setCommunities(
+            result.communities.map(c => ({
+              id: c.id ?? '',
+              name: c.name,
+              color: c.color,
+            })),
+          );
+        }
+      } catch (err) {
+        console.error('[TeamSelect] Error fetching communities:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchCommunities();
+  }, [apiClient, partnerCommunityId, navigation]);
+
+  const handleSelect = useCallback((id: string) => {
+    setSelected(id);
+  }, []);
+
+  const handleContinue = useCallback(async () => {
+    if (!selected) return;
+
+    try {
+      await apiClient.updateUserCommunity({ id: selected });
+      navigation.navigate('OnboardingAccountSetup');
+    } catch (err) {
+      console.error('[TeamSelect] Error setting community:', err);
+    }
+  }, [selected, apiClient, navigation]);
+
+  const renderItem = useCallback(
+    ({ item }: { item: CommunityItem }) => (
+      <Pressable
+        style={[
+          styles.communityItem,
+          selected === item.id && styles.communityItemSelected,
+          selected === item.id && { borderColor: item.color ?? theme.buttonColor },
+        ]}
+        onPress={() => handleSelect(item.id)}
+      >
+        <View
+          style={[
+            styles.colorDot,
+            { backgroundColor: item.color ?? Colors.purple1 },
+          ]}
+        />
+        <TitleSmall style={styles.communityName}>{item.name}</TitleSmall>
+        {selected === item.id && (
+          <Text style={[styles.check, { color: item.color ?? theme.buttonColor }]}>
+            {'v'}
+          </Text>
+        )}
+      </Pressable>
+    ),
+    [selected, theme.buttonColor, handleSelect],
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Pick Your Team" />
+
+      <View style={styles.content}>
+        <BodyRegular style={styles.subtitle}>
+          Choose your team to join their community
+        </BodyRegular>
+
+        {loading ? (
+          <ActivityIndicator color={Colors.white} style={styles.loader} />
+        ) : (
+          <FlatList
+            data={communities}
+            keyExtractor={item => item.id}
+            renderItem={renderItem}
+            contentContainerStyle={styles.list}
+            showsVerticalScrollIndicator={false}
+          />
+        )}
+      </View>
+
+      <View style={styles.footer}>
+        <Button
+          style={[
+            styles.button,
+            { backgroundColor: selected ? theme.buttonColor : Colors.gray2 },
+          ]}
+          onPress={handleContinue}
+          disabled={!selected}
+        >
+          <Text
+            style={[
+              styles.buttonText,
+              { color: selected ? theme.buttonText : Colors.gray6 },
+            ]}
+          >
+            Continue
+          </Text>
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 24,
+  },
+  subtitle: {
+    color: Colors.gray6,
+    marginBottom: 24,
+  },
+  loader: {
+    marginTop: 48,
+  },
+  list: {
+    gap: 8,
+    paddingBottom: 24,
+  },
+  communityItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: Colors.gray2,
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: 'transparent',
+  },
+  communityItemSelected: {
+    backgroundColor: 'rgba(110, 130, 231, 0.1)',
+  },
+  colorDot: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    marginRight: 12,
+  },
+  communityName: {
+    color: Colors.white,
+    flex: 1,
+  },
+  check: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 32,
+  },
+  button: {
+    height: 56,
+    borderRadius: 28,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/screens/onboarding/OnboardingWelcomeScreen.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import Button from '../../components/ux/buttons/Button';
+import { TitleRegular, BodyRegular } from '../../components/ux/text/Typography';
+
+type Nav = NativeStackNavigationProp<RootStackParamList, 'OnboardingWelcome'>;
+
+export function OnboardingWelcomeScreen() {
+  const navigation = useNavigation<Nav>();
+  const { theme } = useTheme();
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <View style={styles.content}>
+        <View style={[styles.circle, { borderColor: theme.buttonColor }]}>
+          <Text style={styles.circleEmoji}>{'\\uD83C\\uDFC8'}</Text>
+        </View>
+
+        <TitleRegular style={styles.title}>
+          Welcome to Squad
+        </TitleRegular>
+
+        <BodyRegular style={styles.subtitle}>
+          Connect with your squad, share freestyles, and experience sports together.
+        </BodyRegular>
+      </View>
+
+      <View style={styles.footer}>
+        <Button
+          style={[styles.button, { backgroundColor: theme.buttonColor }]}
+          onPress={() => navigation.navigate('OnboardingTeamSelect')}
+        >
+          <Text style={[styles.buttonText, { color: theme.buttonText }]}>
+            Get Started
+          </Text>
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 24,
+    paddingBottom: 48,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  circle: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    borderWidth: 3,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  circleEmoji: {
+    fontSize: 48,
+  },
+  title: {
+    color: Colors.white,
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  subtitle: {
+    color: Colors.gray6,
+    textAlign: 'center',
+    maxWidth: 280,
+  },
+  footer: {
+    gap: 12,
+  },
+  button: {
+    height: 56,
+    borderRadius: 28,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});