7cb07c09ce
- Voice tab: simplified interface, voice picker improvements - Subscription: Stripe integration, purchase flow updates - Beneficiaries: dashboard, sharing, improved management - Profile: drawer, edit, help, privacy sections - Theme: expanded constants, new colors - New components: MockDashboard, ProfileDrawer, Toast - Backend: Stripe routes additions - Auth: activate, add-loved-one, purchase screens
424 lines
12 KiB
TypeScript
424 lines
12 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
ActivityIndicator,
|
|
RefreshControl,
|
|
Image,
|
|
} from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { router } from 'expo-router';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { useBeneficiary } from '@/contexts/BeneficiaryContext';
|
|
import { api } from '@/services/api';
|
|
import {
|
|
AppColors,
|
|
BorderRadius,
|
|
FontSizes,
|
|
FontWeights,
|
|
Spacing,
|
|
Shadows,
|
|
AvatarSizes,
|
|
} from '@/constants/theme';
|
|
import type { Beneficiary } from '@/types';
|
|
|
|
// Simplified beneficiary card: Avatar + Name + Warning (if no subscription)
|
|
interface BeneficiaryCardProps {
|
|
beneficiary: Beneficiary;
|
|
onPress: () => void;
|
|
}
|
|
|
|
function BeneficiaryCard({ beneficiary, onPress }: BeneficiaryCardProps) {
|
|
// Check if subscription is missing or expired
|
|
const hasNoSubscription = !beneficiary.subscription ||
|
|
beneficiary.subscription.status !== 'active';
|
|
|
|
return (
|
|
<TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
|
|
{/* Avatar */}
|
|
<View style={styles.avatarWrapper}>
|
|
{beneficiary.avatar ? (
|
|
<Image source={{ uri: beneficiary.avatar }} style={styles.avatarImage} />
|
|
) : (
|
|
<View style={styles.avatar}>
|
|
<Text style={styles.avatarText}>
|
|
{beneficiary.name.charAt(0).toUpperCase()}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Name */}
|
|
<View style={styles.info}>
|
|
<Text style={styles.name} numberOfLines={1}>{beneficiary.name}</Text>
|
|
</View>
|
|
|
|
{/* Warning icon if no subscription */}
|
|
{hasNoSubscription && (
|
|
<View style={styles.warningContainer}>
|
|
<Ionicons name="warning" size={20} color={AppColors.warning} />
|
|
</View>
|
|
)}
|
|
|
|
{/* Arrow */}
|
|
<View style={styles.arrowContainer}>
|
|
<Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
export default function HomeScreen() {
|
|
const { user } = useAuth();
|
|
const { currentBeneficiary, setCurrentBeneficiary, localBeneficiaries } = useBeneficiary();
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
|
|
// Load beneficiaries from API and combine with local ones
|
|
useEffect(() => {
|
|
loadBeneficiaries();
|
|
}, [localBeneficiaries]);
|
|
|
|
const loadBeneficiaries = async () => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
try {
|
|
const onboardingCompleted = await api.isOnboardingCompleted();
|
|
const response = await api.getAllBeneficiaries();
|
|
|
|
let allBeneficiaries: Beneficiary[] = [];
|
|
|
|
if (response.ok && response.data) {
|
|
allBeneficiaries = [...response.data];
|
|
}
|
|
|
|
allBeneficiaries = [...allBeneficiaries, ...localBeneficiaries];
|
|
setBeneficiaries(allBeneficiaries);
|
|
|
|
if (!currentBeneficiary && allBeneficiaries.length > 0) {
|
|
setCurrentBeneficiary(allBeneficiaries[0]);
|
|
}
|
|
|
|
if (allBeneficiaries.length === 0 && !onboardingCompleted) {
|
|
router.replace({
|
|
pathname: '/(auth)/add-loved-one',
|
|
params: { email: user?.email || '' },
|
|
});
|
|
return;
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load beneficiaries:', err);
|
|
if (localBeneficiaries.length > 0) {
|
|
setBeneficiaries(localBeneficiaries);
|
|
} else {
|
|
setError('Failed to load beneficiaries');
|
|
}
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRefresh = async () => {
|
|
setIsRefreshing(true);
|
|
await loadBeneficiaries();
|
|
setIsRefreshing(false);
|
|
};
|
|
|
|
const handleBeneficiaryPress = (beneficiary: Beneficiary) => {
|
|
setCurrentBeneficiary(beneficiary);
|
|
router.push(`/(tabs)/beneficiaries/${beneficiary.id}/dashboard`);
|
|
};
|
|
|
|
const getDisplayName = () => {
|
|
if (user?.user_name) return user.user_name;
|
|
if (user?.email) return user.email.split('@')[0];
|
|
return 'User';
|
|
};
|
|
|
|
const displayName = getDisplayName();
|
|
const greeting = new Date().getHours() < 12 ? 'Good morning' : new Date().getHours() < 18 ? 'Good afternoon' : 'Good evening';
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
<View style={styles.header}>
|
|
<View>
|
|
<Text style={styles.greeting}>{greeting},</Text>
|
|
<Text style={styles.displayName}>{displayName}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="large" color={AppColors.primary} />
|
|
<Text style={styles.loadingText}>Loading...</Text>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<View style={styles.headerContent}>
|
|
<View>
|
|
<Text style={styles.greeting}>{greeting},</Text>
|
|
<Text style={styles.displayName}>{displayName}</Text>
|
|
</View>
|
|
<TouchableOpacity style={styles.headerAction} onPress={handleRefresh}>
|
|
<Ionicons name="refresh" size={22} color={AppColors.primary} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
|
|
{/* Section Title */}
|
|
{beneficiaries.length > 0 && (
|
|
<View style={styles.sectionHeader}>
|
|
<Text style={styles.sectionTitle}>My Loved Ones</Text>
|
|
<Text style={styles.sectionCount}>{beneficiaries.length}</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Content */}
|
|
{beneficiaries.length === 0 ? (
|
|
<View style={styles.emptyContainer}>
|
|
<View style={styles.emptyIconContainer}>
|
|
<Ionicons name="people-outline" size={48} color={AppColors.primary} />
|
|
</View>
|
|
<Text style={styles.emptyTitle}>No loved ones yet</Text>
|
|
<Text style={styles.emptyText}>
|
|
Add a loved one to start monitoring their wellbeing and stay connected.
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={styles.addButtonLarge}
|
|
onPress={() => router.push('/(tabs)/beneficiaries/add')}
|
|
>
|
|
<Ionicons name="add" size={22} color={AppColors.white} />
|
|
<Text style={styles.addButtonText}>Add Loved One</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
) : (
|
|
<>
|
|
<FlatList
|
|
data={beneficiaries}
|
|
keyExtractor={(item) => item.id.toString()}
|
|
renderItem={({ item }) => (
|
|
<BeneficiaryCard
|
|
beneficiary={item}
|
|
onPress={() => handleBeneficiaryPress(item)}
|
|
/>
|
|
)}
|
|
contentContainerStyle={styles.listContent}
|
|
showsVerticalScrollIndicator={false}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={isRefreshing}
|
|
onRefresh={handleRefresh}
|
|
colors={[AppColors.primary]}
|
|
tintColor={AppColors.primary}
|
|
/>
|
|
}
|
|
/>
|
|
{/* Floating Add Button */}
|
|
<TouchableOpacity
|
|
style={styles.fab}
|
|
onPress={() => router.push('/(tabs)/beneficiaries/add')}
|
|
activeOpacity={0.9}
|
|
>
|
|
<Ionicons name="add" size={28} color={AppColors.white} />
|
|
</TouchableOpacity>
|
|
</>
|
|
)}
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: AppColors.background,
|
|
},
|
|
header: {
|
|
paddingHorizontal: Spacing.lg,
|
|
paddingTop: Spacing.md,
|
|
paddingBottom: Spacing.lg,
|
|
backgroundColor: AppColors.background,
|
|
},
|
|
headerContent: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
greeting: {
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.textSecondary,
|
|
fontWeight: FontWeights.medium,
|
|
},
|
|
displayName: {
|
|
fontSize: FontSizes['2xl'],
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.textPrimary,
|
|
marginTop: 2,
|
|
},
|
|
headerAction: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: BorderRadius.lg,
|
|
backgroundColor: AppColors.primaryLighter,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
sectionHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: Spacing.lg,
|
|
marginBottom: Spacing.md,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: FontSizes.lg,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.textPrimary,
|
|
},
|
|
sectionCount: {
|
|
fontSize: FontSizes.sm,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.primary,
|
|
backgroundColor: AppColors.primaryLighter,
|
|
paddingHorizontal: Spacing.sm,
|
|
paddingVertical: 2,
|
|
borderRadius: BorderRadius.full,
|
|
marginLeft: Spacing.sm,
|
|
overflow: 'hidden',
|
|
},
|
|
loadingContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
loadingText: {
|
|
marginTop: Spacing.md,
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.textSecondary,
|
|
},
|
|
emptyContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingHorizontal: Spacing.xl,
|
|
},
|
|
emptyIconContainer: {
|
|
width: 96,
|
|
height: 96,
|
|
borderRadius: BorderRadius['2xl'],
|
|
backgroundColor: AppColors.primaryLighter,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: Spacing.lg,
|
|
},
|
|
emptyTitle: {
|
|
fontSize: FontSizes.xl,
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.textPrimary,
|
|
marginBottom: Spacing.sm,
|
|
},
|
|
emptyText: {
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.textSecondary,
|
|
textAlign: 'center',
|
|
lineHeight: 24,
|
|
marginBottom: Spacing.xl,
|
|
},
|
|
addButtonLarge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: AppColors.primary,
|
|
paddingVertical: Spacing.md,
|
|
paddingHorizontal: Spacing.xl,
|
|
borderRadius: BorderRadius.lg,
|
|
gap: Spacing.sm,
|
|
...Shadows.primary,
|
|
},
|
|
addButtonText: {
|
|
fontSize: FontSizes.base,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.white,
|
|
},
|
|
listContent: {
|
|
paddingHorizontal: Spacing.lg,
|
|
paddingBottom: 100,
|
|
},
|
|
// Card styles
|
|
card: {
|
|
backgroundColor: AppColors.surface,
|
|
borderRadius: BorderRadius.xl,
|
|
marginBottom: Spacing.md,
|
|
padding: Spacing.md,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
...Shadows.sm,
|
|
},
|
|
avatarWrapper: {
|
|
position: 'relative',
|
|
},
|
|
avatar: {
|
|
width: AvatarSizes.md,
|
|
height: AvatarSizes.md,
|
|
borderRadius: AvatarSizes.md / 2,
|
|
backgroundColor: AppColors.primaryLighter,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
avatarImage: {
|
|
width: AvatarSizes.md,
|
|
height: AvatarSizes.md,
|
|
borderRadius: AvatarSizes.md / 2,
|
|
},
|
|
avatarText: {
|
|
fontSize: FontSizes.xl,
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.primary,
|
|
},
|
|
info: {
|
|
flex: 1,
|
|
marginLeft: Spacing.md,
|
|
marginRight: Spacing.sm,
|
|
},
|
|
name: {
|
|
fontSize: FontSizes.lg,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.textPrimary,
|
|
},
|
|
warningContainer: {
|
|
marginRight: Spacing.sm,
|
|
},
|
|
arrowContainer: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: BorderRadius.md,
|
|
backgroundColor: AppColors.surfaceSecondary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
// Floating Action Button
|
|
fab: {
|
|
position: 'absolute',
|
|
bottom: Spacing.xl,
|
|
right: Spacing.lg,
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
backgroundColor: AppColors.primary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
...Shadows.lg,
|
|
},
|
|
});
|