@squad-sports/react-native 1.3.1

package/src/screens/squad-line/AddCallTitleScreen.tsx

@@ -0,0 +1,293 @@
+import React, { useCallback, useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  Animated,
+  useWindowDimensions,
+} from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
+import type { RouteProp } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+import { useApiClient } from '../../SquadProvider';
+import { useSquadLine } from '../../squad-line/useSquadLine';
+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, BodySmall } from '../../components/ux/text/Typography';
+import type { User } from '@squad-sports/core';
+
+type Route = RouteProp<RootStackParamList, 'AddCallTitle'>;
+type Nav = NativeStackNavigationProp<RootStackParamList, 'AddCallTitle'>;
+
+const MAX_TITLE_LENGTH = 30;
+
+export function AddCallTitleScreen() {
+  const route = useRoute<Route>();
+  const navigation = useNavigation<Nav>();
+  const apiClient = useApiClient();
+  const { makeCall } = useSquadLine();
+  const { theme } = useTheme();
+
+  const { connectionId } = route.params;
+  const [title, setTitle] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [otherUser, setOtherUser] = useState<User | null>(null);
+  const inputRef = useRef<TextInput>(null);
+  const progressAnim = useRef(new Animated.Value(0)).current;
+
+  // Load the other user's info
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const user = await apiClient.getUser(connectionId);
+        setOtherUser(user);
+      } catch {}
+    };
+    load();
+    setTimeout(() => inputRef.current?.focus(), 300);
+  }, [connectionId, apiClient]);
+
+  // Animate progress ring
+  useEffect(() => {
+    Animated.timing(progressAnim, {
+      toValue: title.length / MAX_TITLE_LENGTH,
+      duration: 150,
+      useNativeDriver: false,
+    }).start();
+  }, [title.length, progressAnim]);
+
+  const hasEmoji = /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/u.test(title);
+  const isValid = title.trim().length > 0 && title.length <= MAX_TITLE_LENGTH && !hasEmoji;
+
+  const handleTitleChange = useCallback((text: string) => {
+    if (text.length <= MAX_TITLE_LENGTH) {
+      setTitle(text);
+      setError(null);
+    }
+  }, []);
+
+  const handleStartCall = useCallback(async () => {
+    if (!isValid || isLoading) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const success = await makeCall(connectionId, title.trim());
+      if (success) {
+        navigation.navigate('ActiveCall', {
+          connectionId,
+          title: title.trim(),
+        });
+      } else {
+        setError('Failed to start call. Please try again.');
+      }
+    } catch (err) {
+      setError('Call failed. Check your connection and try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isValid, isLoading, connectionId, title, makeCall, navigation]);
+
+  const titleColor = title.length >= 25 ? Colors.orange1 : Colors.gray6;
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Squad Line" />
+
+      <View style={styles.content}>
+        <View style={styles.avatarSection}>
+          <View style={styles.avatarRing}>
+            <UserImage
+              imageUrl={otherUser?.imageUrl}
+              displayName={otherUser?.displayName}
+              size={72}
+            />
+            {/* Progress ring overlay */}
+            <View style={styles.progressRing}>
+              <Animated.View
+                style={[
+                  styles.progressArc,
+                  {
+                    borderColor: theme.buttonColor,
+                    transform: [{
+                      rotate: progressAnim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: ['0deg', '360deg'],
+                      }),
+                    }],
+                  },
+                ]}
+              />
+            </View>
+          </View>
+
+          {otherUser?.displayName && (
+            <BodyRegular style={styles.userName}>
+              {otherUser.displayName}
+            </BodyRegular>
+          )}
+        </View>
+
+        <View style={styles.titleSection}>
+          <BodyRegular style={styles.prompt}>
+            Tell {otherUser?.displayName ?? 'them'} why you're calling
+          </BodyRegular>
+
+          <TextInput
+            ref={inputRef}
+            value={title}
+            onChangeText={handleTitleChange}
+            placeholder="Enter a title..."
+            placeholderTextColor={Colors.gray6}
+            style={[styles.titleInput, { borderColor: title ? Colors.white : Colors.gray5 }]}
+            maxLength={MAX_TITLE_LENGTH}
+            returnKeyType="go"
+            onSubmitEditing={handleStartCall}
+            autoCorrect={false}
+          />
+
+          <View style={styles.titleMeta}>
+            <Text style={[styles.charCount, { color: titleColor }]}>
+              {title.length}/{MAX_TITLE_LENGTH}
+            </Text>
+            {hasEmoji && (
+              <BodySmall style={styles.warning}>No emojis allowed</BodySmall>
+            )}
+          </View>
+
+          {error && (
+            <View style={styles.errorContainer}>
+              <BodySmall style={styles.errorText}>{error}</BodySmall>
+            </View>
+          )}
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <Button
+          style={[
+            styles.callButton,
+            { backgroundColor: isValid && !isLoading ? theme.buttonColor : Colors.gray2 },
+          ]}
+          onPress={handleStartCall}
+          disabled={!isValid || isLoading}
+        >
+          <Text
+            style={[
+              styles.callButtonText,
+              { color: isValid && !isLoading ? theme.buttonText : Colors.gray6 },
+            ]}
+          >
+            {isLoading ? 'Connecting...' : 'Start Call'}
+          </Text>
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    paddingTop: 32,
+  },
+  avatarSection: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  avatarRing: {
+    position: 'relative',
+    width: 88,
+    height: 88,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  progressRing: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 44,
+    borderWidth: 3,
+    borderColor: 'rgba(255,255,255,0.1)',
+  },
+  progressArc: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 44,
+    borderWidth: 3,
+    borderTopColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: 'transparent',
+  },
+  userName: {
+    color: Colors.white,
+    marginTop: 12,
+    fontWeight: '600',
+  },
+  titleSection: {
+    width: '100%',
+    maxWidth: 400,
+  },
+  prompt: {
+    color: Colors.gray6,
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  titleInput: {
+    color: Colors.white,
+    fontSize: 18,
+    fontWeight: '500',
+    textAlign: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderWidth: 1,
+    borderRadius: 12,
+    backgroundColor: Colors.gray2,
+  },
+  titleMeta: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 8,
+    paddingHorizontal: 4,
+  },
+  charCount: {
+    fontSize: 12,
+  },
+  warning: {
+    color: Colors.orange1,
+  },
+  errorContainer: {
+    marginTop: 12,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    backgroundColor: 'rgba(233, 120, 92, 0.14)',
+    borderRadius: 8,
+  },
+  errorText: {
+    color: Colors.orange1,
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 32,
+  },
+  callButton: {
+    height: 56,
+    borderRadius: 28,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  callButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/screens/wallet/WalletScreen.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  Pressable,
+} from 'react-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 { TitleSmall, TitleMedium, TitleLarge, BodyRegular, BodyMedium, BodySmall } from '../../components/ux/text/Typography';
+
+interface CouponItem {
+  id: string;
+  code: string;
+  title: string;
+  description?: string;
+  brandName?: string;
+  brandImageUrl?: string;
+  discount?: string;
+  expiresAt?: string;
+  status: string;
+  isRedeemed: boolean;
+}
+
+export function WalletScreen() {
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+
+  const [balance, setBalance] = useState<number>(0);
+  const [coupons, setCoupons] = useState<CouponItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const [wallet, couponsData] = await Promise.all([
+          apiClient.getWallet().catch(() => null),
+          apiClient.getCoupons().catch(() => null),
+        ]);
+
+        if ((wallet as any)?.balance !== undefined) {
+          setBalance((wallet as any).balance);
+        }
+
+        if (couponsData?.coupons) {
+          setCoupons(couponsData.coupons.map((c: any) => ({
+            id: c.id,
+            code: c.code ?? '',
+            title: c.title ?? c.name ?? '',
+            description: c.description,
+            brandName: c.brand?.name,
+            brandImageUrl: c.brand?.imageUrl,
+            discount: c.discount ?? c.value,
+            expiresAt: c.expiresAt,
+            status: c.status ?? 'active',
+            isRedeemed: c.status === 'redeemed',
+          })));
+        }
+      } catch {}
+      setLoading(false);
+    };
+    load();
+  }, [apiClient]);
+
+  const handleRedeem = useCallback(async (code: string) => {
+    try {
+      await apiClient.redeemCoupon(code, {});
+      setCoupons(prev => prev.map(c =>
+        c.code === code ? { ...c, isRedeemed: true, status: 'redeemed' } : c
+      ));
+    } catch {}
+  }, [apiClient]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Wallet" />
+
+      {/* Balance card */}
+      <View style={[styles.balanceCard, { borderColor: theme.buttonColor }]}>
+        <BodySmall style={styles.balanceLabel}>Your Balance</BodySmall>
+        <TitleLarge style={[styles.balanceAmount, { color: theme.buttonColor }]}>
+          {balance}
+        </TitleLarge>
+        <BodySmall style={styles.balanceUnit}>points</BodySmall>
+      </View>
+
+      {/* Coupons */}
+      <TitleSmall style={styles.sectionTitle}>Your Coupons</TitleSmall>
+
+      <FlatList
+        data={coupons}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.couponList}
+        renderItem={({ item }) => (
+          <View style={[styles.couponCard, item.isRedeemed && styles.couponRedeemed]}>
+            <View style={styles.couponLeft}>
+              {item.brandName && (
+                <BodySmall style={styles.brandName}>{item.brandName}</BodySmall>
+              )}
+              <TitleSmall style={styles.couponTitle}>{item.title}</TitleSmall>
+              {item.description && (
+                <BodySmall style={styles.couponDesc} numberOfLines={2}>{item.description}</BodySmall>
+              )}
+              {item.discount && (
+                <BodyMedium style={[styles.couponDiscount, { color: theme.buttonColor }]}>
+                  {item.discount}
+                </BodyMedium>
+              )}
+            </View>
+            <View style={styles.couponRight}>
+              {item.isRedeemed ? (
+                <View style={styles.redeemedBadge}>
+                  <BodySmall style={styles.redeemedText}>Redeemed</BodySmall>
+                </View>
+              ) : (
+                <Button
+                  style={[styles.redeemButton, { backgroundColor: theme.buttonColor }]}
+                  onPress={() => handleRedeem(item.code)}
+                >
+                  <Text style={[styles.redeemText, { color: theme.buttonText }]}>Redeem</Text>
+                </Button>
+              )}
+            </View>
+          </View>
+        )}
+        ListEmptyComponent={
+          !loading ? (
+            <View style={styles.empty}>
+              <BodyRegular style={styles.emptyText}>No coupons available</BodyRegular>
+            </View>
+          ) : null
+        }
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  balanceCard: {
+    marginHorizontal: 24, marginTop: 8, marginBottom: 24,
+    padding: 24, borderRadius: 16, borderWidth: 1.5,
+    backgroundColor: Colors.gray2, alignItems: 'center',
+  },
+  balanceLabel: { color: Colors.gray6, marginBottom: 4 },
+  balanceAmount: { fontSize: 48, lineHeight: 56, fontWeight: '700' },
+  balanceUnit: { color: Colors.gray6 },
+  sectionTitle: { color: Colors.white, paddingHorizontal: 24, marginBottom: 12 },
+  couponList: { paddingHorizontal: 24, gap: 12, paddingBottom: 48 },
+  couponCard: {
+    flexDirection: 'row', backgroundColor: Colors.gray2,
+    borderRadius: 12, padding: 16, gap: 12,
+  },
+  couponRedeemed: { opacity: 0.6 },
+  couponLeft: { flex: 1 },
+  couponRight: { justifyContent: 'center' },
+  brandName: { color: Colors.gray6, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 4 },
+  couponTitle: { color: Colors.white, marginBottom: 4 },
+  couponDesc: { color: Colors.gray6, marginBottom: 4 },
+  couponDiscount: { fontWeight: '600' },
+  redeemButton: { paddingVertical: 8, paddingHorizontal: 16, borderRadius: 16 },
+  redeemText: { fontSize: 13, fontWeight: '600' },
+  redeemedBadge: {
+    paddingVertical: 6, paddingHorizontal: 12,
+    borderRadius: 12, backgroundColor: Colors.gray3,
+  },
+  redeemedText: { color: Colors.gray6, fontSize: 12 },
+  empty: { alignItems: 'center', paddingTop: 32 },
+  emptyText: { color: Colors.gray6 },
+});

package/src/services/AuthStateManager.ts

@@ -0,0 +1,93 @@
+/**
+ * AuthStateManager — manages email/phone session creation and verification.
+ * Ported from squad-demo/src/services/AuthStateManager.ts.
+ */
+import type { SquadApiClient, CreateSessionStatus } from '@squad-sports/core';
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  isEmailVerified: boolean;
+  hasDisplayName: boolean;
+  currentAccessToken: string | null;
+  currentUserId: string | null;
+  isLoading: boolean;
+}
+
+/**
+ * Create a new email session — sends magic link or OTP code.
+ */
+export async function createEmailSession(
+  email: string,
+  client: SquadApiClient,
+  isFromMagicLink: boolean = false,
+  firstName?: string,
+): Promise<boolean> {
+  try {
+    const { CreateSessionRequest } = await import('@squad-sports/core');
+    const request = new CreateSessionRequest({ email });
+
+    const headers: Record<string, string> = {};
+    if (firstName) headers['X-First-Name'] = firstName;
+
+    const response = await client.createSessionV2(request, headers);
+    return !!response;
+  } catch (error) {
+    console.error('[AuthStateManager] createEmailSession error:', error);
+    return false;
+  }
+}
+
+/**
+ * Create a new phone session — sends SMS OTP code.
+ */
+export async function createPhoneSession(
+  phone: string,
+  client: SquadApiClient,
+): Promise<boolean> {
+  try {
+    const { CreateSessionRequest } = await import('@squad-sports/core');
+    const formattedPhone = phone.startsWith('+') ? phone : `+${phone}`;
+    const request = new CreateSessionRequest({ phone: formattedPhone });
+    const response = await client.createSessionV2(request);
+    return !!response;
+  } catch (error) {
+    console.error('[AuthStateManager] createPhoneSession error:', error);
+    return false;
+  }
+}
+
+/**
+ * Verify a session with an OTP code.
+ */
+export async function fulfillSession(
+  params: { phone?: string; email?: string; code: string },
+  client: SquadApiClient,
+): Promise<{ success: boolean; accessToken?: string; userId?: string }> {
+  try {
+    const { CreateSessionRequest, CreateSessionStatus } = await import('@squad-sports/core');
+    const formattedPhone = params.phone
+      ? params.phone.startsWith('+') ? params.phone : `+${params.phone}`
+      : undefined;
+
+    const request = new CreateSessionRequest({
+      phone: formattedPhone,
+      email: params.email,
+      code: params.code.trim(),
+    });
+
+    const response = await client.fulfillSessionV2(request);
+
+    if (response?.status === 1 && response?.accessToken) { // ACTIVE = 1
+      return {
+        success: true,
+        accessToken: response.accessToken,
+        userId: (response as any).userId,
+      };
+    }
+
+    return { success: false };
+  } catch (error) {
+    console.error('[AuthStateManager] fulfillSession error:', error);
+    return { success: false };
+  }
+}

package/src/services/NavigationService.ts

@@ -0,0 +1,40 @@
+/**
+ * NavigationService — imperative navigation for use outside React components.
+ * Ported from squad-demo/src/services/NavigationService.ts.
+ */
+import type { NavigationContainerRef } from '@react-navigation/native';
+
+class NavigationService {
+  private navRef: NavigationContainerRef<any> | null = null;
+
+  setNavigationRef(ref: NavigationContainerRef<any>): void {
+    this.navRef = ref;
+  }
+
+  navigate(name: string, params?: Record<string, unknown>): void {
+    if (!this.navRef?.isReady()) {
+      console.warn('[NavigationService] Navigation not ready');
+      return;
+    }
+    (this.navRef as any).navigate(name, params);
+  }
+
+  goBack(): void {
+    if (this.navRef?.canGoBack()) {
+      this.navRef.goBack();
+    }
+  }
+
+  reset(routes: Array<{ name: string; params?: Record<string, unknown> }>): void {
+    this.navRef?.reset({
+      index: 0,
+      routes: routes as any,
+    });
+  }
+
+  getCurrentRoute(): string | undefined {
+    return this.navRef?.getCurrentRoute()?.name;
+  }
+}
+
+export const navigationService = new NavigationService();

package/src/services/UserDataManager.ts

@@ -0,0 +1,59 @@
+/**
+ * UserDataManager — manages loading/caching user data with storage sync.
+ * Ported from squad-demo/src/services/UserDataManager.ts.
+ */
+import type { SquadApiClient, User } from '@squad-sports/core';
+
+class UserDataManager {
+  private cachedUser: User | null = null;
+
+  async loadUserData(client: SquadApiClient): Promise<User | null> {
+    try {
+      const user = await client.getLoggedInUser();
+      if (user) {
+        this.cachedUser = user;
+        await this.persistUser(user);
+      }
+      return user;
+    } catch (error) {
+      console.error('[UserDataManager] Error loading user:', error);
+      return this.cachedUser;
+    }
+  }
+
+  getCachedUser(): User | null {
+    return this.cachedUser;
+  }
+
+  setCachedUser(user: User): void {
+    this.cachedUser = user;
+  }
+
+  clearCache(): void {
+    this.cachedUser = null;
+  }
+
+  private async persistUser(user: User): Promise<void> {
+    try {
+      const AsyncStorage = (await import('@react-native-async-storage/async-storage')).default;
+      await AsyncStorage.setItem('SQUAD_SDK_CACHED_USER', JSON.stringify(user));
+      if (user.id) {
+        await AsyncStorage.setItem('SQUAD_SDK_AUTH_USER_ID', user.id);
+      }
+    } catch {}
+  }
+
+  async loadCachedUser(): Promise<User | null> {
+    try {
+      const AsyncStorage = (await import('@react-native-async-storage/async-storage')).default;
+      const raw = await AsyncStorage.getItem('SQUAD_SDK_CACHED_USER');
+      if (raw) {
+        this.cachedUser = JSON.parse(raw);
+        return this.cachedUser;
+      }
+    } catch {}
+    return null;
+  }
+}
+
+export const userDataManager = new UserDataManager();

package/src/services/UserUpdateService.ts

@@ -0,0 +1,31 @@
+/**
+ * UserUpdateService — handles user profile updates with retry logic.
+ * Ported from squad-demo/src/services/UserUpdateService.ts.
+ */
+import type { SquadApiClient, User } from '@squad-sports/core';
+
+/**
+ * Update user profile with automatic retry on failure.
+ */
+export async function updateUser(
+  client: SquadApiClient,
+  user: User,
+  maxRetries: number = 2,
+): Promise<User | null> {
+  let lastError: Error | null = null;
+
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      const result = await client.updateLoggedInUser(user);
+      return result;
+    } catch (error) {
+      lastError = error instanceof Error ? error : new Error(String(error));
+      if (attempt < maxRetries) {
+        await new Promise<void>(r => setTimeout(() => r(), 1000 * (attempt + 1)));
+      }
+    }
+  }
+
+  console.error('[UserUpdateService] All retry attempts failed:', lastError);
+  return null;
+}