Replace Alert with Toast for invite code copy, rename Share to Access
This commit is contained in:
Sergei
parent
ad35dac850
commit
f6a2d5e687
@ -14,10 +14,8 @@ import {
|
||||
Platform,
|
||||
Animated,
|
||||
ActivityIndicator,
|
||||
Switch,
|
||||
} from 'react-native';
|
||||
import { WebView } from 'react-native-webview';
|
||||
import * as SecureStore from 'expo-secure-store';
|
||||
import { useLocalSearchParams, router } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
@ -31,6 +29,7 @@ import { FullScreenError } from '@/components/ui/ErrorMessage';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { SubscriptionPayment } from '@/components/SubscriptionPayment';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { DevModeToggle } from '@/components/ui/DevModeToggle';
|
||||
import MockDashboard from '@/components/MockDashboard';
|
||||
import {
|
||||
AppColors,
|
||||
@ -57,7 +56,9 @@ const STRIPE_API_URL = 'https://wellnuo.smartlaunchhub.com/api/stripe';
|
||||
|
||||
// WebView Dashboard URL - uses test NDK account for demo data
|
||||
const DASHBOARD_URL = 'https://react.eluxnetworks.net/dashboard';
|
||||
const TEST_NDK_DEPLOYMENT_ID = '1'; // anandk test deployment with real sensor data
|
||||
// Test credentials for WebView - anandk account has real sensor data
|
||||
const TEST_NDK_USER = 'anandk';
|
||||
const TEST_NDK_PASSWORD = 'anandk_8';
|
||||
|
||||
// Starter Kit info
|
||||
const STARTER_KIT = {
|
||||
@ -472,21 +473,25 @@ export default function BeneficiaryDetailScreen() {
|
||||
loadBeneficiary();
|
||||
}, [loadBeneficiary]);
|
||||
|
||||
// Load credentials for WebView
|
||||
// Load test credentials for WebView (anandk account has sensor data)
|
||||
useEffect(() => {
|
||||
const loadCredentials = async () => {
|
||||
const loadTestCredentials = async () => {
|
||||
try {
|
||||
const token = await SecureStore.getItemAsync('accessToken');
|
||||
const user = await SecureStore.getItemAsync('userName');
|
||||
const uid = await SecureStore.getItemAsync('userId');
|
||||
setAuthToken(token);
|
||||
setUserName(user);
|
||||
setUserId(uid);
|
||||
// Always use anandk test account for WebView dashboard
|
||||
const response = await api.login(TEST_NDK_USER, TEST_NDK_PASSWORD);
|
||||
if (response.ok && response.data) {
|
||||
setAuthToken(response.data.token);
|
||||
setUserName(TEST_NDK_USER);
|
||||
setUserId(response.data.user_id?.toString() || null);
|
||||
console.log('[WebView] Loaded test credentials for anandk');
|
||||
} else {
|
||||
console.error('[WebView] Failed to get test token:', response.error);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load credentials:', err);
|
||||
console.error('[WebView] Failed to load test credentials:', err);
|
||||
}
|
||||
};
|
||||
loadCredentials();
|
||||
loadTestCredentials();
|
||||
}, []);
|
||||
|
||||
// Sync beneficiary data when localBeneficiaries changes (especially after avatar update)
|
||||
@ -675,7 +680,6 @@ export default function BeneficiaryDetailScreen() {
|
||||
);
|
||||
}
|
||||
|
||||
const statusColor = beneficiary.status === 'online' ? AppColors.online : AppColors.offline;
|
||||
|
||||
// Render based on setup state
|
||||
const renderContent = () => {
|
||||
@ -711,14 +715,19 @@ export default function BeneficiaryDetailScreen() {
|
||||
|
||||
case 'ready':
|
||||
default:
|
||||
// WebView mode - uses test NDK deployment for demo data
|
||||
// WebView mode - uses test anandk account for all beneficiaries
|
||||
if (showWebView) {
|
||||
const webViewUrl = `${DASHBOARD_URL}?deployment_id=${TEST_NDK_DEPLOYMENT_ID}`;
|
||||
// Token is injected via injectedJavaScript, no need for URL params
|
||||
return (
|
||||
<View style={styles.webViewContainer}>
|
||||
{/* Developer Toggle - at top */}
|
||||
<View style={styles.webViewToggleTop}>
|
||||
<DevModeToggle value={showWebView} onValueChange={setShowWebView} />
|
||||
</View>
|
||||
{/* WebView below */}
|
||||
<WebView
|
||||
ref={webViewRef}
|
||||
source={{ uri: webViewUrl }}
|
||||
source={{ uri: DASHBOARD_URL }}
|
||||
style={styles.webView}
|
||||
javaScriptEnabled={true}
|
||||
domStorageEnabled={true}
|
||||
@ -733,24 +742,6 @@ export default function BeneficiaryDetailScreen() {
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
{/* Developer Toggle - always visible to switch back */}
|
||||
<View style={styles.webViewToggleOverlay}>
|
||||
<View style={styles.devToggleCard}>
|
||||
<View style={styles.devToggleLeft}>
|
||||
<Ionicons name="code-slash" size={20} color={AppColors.warning} />
|
||||
<View>
|
||||
<Text style={styles.devToggleLabel}>Developer Mode</Text>
|
||||
<Text style={styles.devToggleHint}>Show WebView dashboard</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Switch
|
||||
value={showWebView}
|
||||
onValueChange={setShowWebView}
|
||||
trackColor={{ false: AppColors.border, true: AppColors.primaryLight }}
|
||||
thumbColor={showWebView ? AppColors.primary : AppColors.textMuted}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@ -770,20 +761,8 @@ export default function BeneficiaryDetailScreen() {
|
||||
}
|
||||
>
|
||||
{/* Developer Toggle for WebView */}
|
||||
<View style={styles.devToggleCard}>
|
||||
<View style={styles.devToggleLeft}>
|
||||
<Ionicons name="code-slash" size={20} color={AppColors.warning} />
|
||||
<View>
|
||||
<Text style={styles.devToggleLabel}>Developer Mode</Text>
|
||||
<Text style={styles.devToggleHint}>Show WebView dashboard</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Switch
|
||||
value={showWebView}
|
||||
onValueChange={setShowWebView}
|
||||
trackColor={{ false: AppColors.border, true: AppColors.primaryLight }}
|
||||
thumbColor={showWebView ? AppColors.primary : AppColors.textMuted}
|
||||
/>
|
||||
<View style={styles.devToggleWrapper}>
|
||||
<DevModeToggle value={showWebView} onValueChange={setShowWebView} />
|
||||
</View>
|
||||
|
||||
{/* Activity Dashboard */}
|
||||
@ -803,18 +782,15 @@ export default function BeneficiaryDetailScreen() {
|
||||
|
||||
{/* Avatar + Name */}
|
||||
<View style={styles.headerCenter}>
|
||||
<View style={styles.headerAvatarWrapper}>
|
||||
{beneficiary.avatar ? (
|
||||
<Image source={{ uri: beneficiary.avatar }} style={styles.headerAvatarImage} />
|
||||
) : (
|
||||
<View style={styles.headerAvatar}>
|
||||
<Text style={styles.headerAvatarText}>
|
||||
{beneficiary.name.charAt(0).toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={[styles.headerStatusDot, { backgroundColor: statusColor }]} />
|
||||
</View>
|
||||
{beneficiary.avatar ? (
|
||||
<Image source={{ uri: beneficiary.avatar }} style={styles.headerAvatarImage} />
|
||||
) : (
|
||||
<View style={styles.headerAvatar}>
|
||||
<Text style={styles.headerAvatarText}>
|
||||
{beneficiary.name.charAt(0).toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
<Text style={styles.headerTitle}>{beneficiary.name}</Text>
|
||||
</View>
|
||||
|
||||
@ -845,7 +821,7 @@ export default function BeneficiaryDetailScreen() {
|
||||
}}
|
||||
>
|
||||
<Ionicons name="share-outline" size={20} color={AppColors.textPrimary} />
|
||||
<Text style={styles.dropdownItemText}>Share</Text>
|
||||
<Text style={styles.dropdownItemText}>Access</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
@ -1071,41 +1047,19 @@ const styles = StyleSheet.create({
|
||||
borderWidth: 2,
|
||||
borderColor: AppColors.background,
|
||||
},
|
||||
// Developer Toggle
|
||||
devToggleCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: AppColors.warningLight,
|
||||
borderRadius: BorderRadius.lg,
|
||||
padding: Spacing.md,
|
||||
// Developer Toggle Wrapper
|
||||
devToggleWrapper: {
|
||||
marginBottom: Spacing.lg,
|
||||
borderWidth: 1,
|
||||
borderColor: AppColors.warning,
|
||||
},
|
||||
devToggleLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: Spacing.md,
|
||||
},
|
||||
devToggleLabel: {
|
||||
fontSize: FontSizes.sm,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textPrimary,
|
||||
},
|
||||
devToggleHint: {
|
||||
fontSize: FontSizes.xs,
|
||||
color: AppColors.textSecondary,
|
||||
},
|
||||
// WebView
|
||||
webViewContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
webViewToggleOverlay: {
|
||||
position: 'absolute',
|
||||
bottom: 100, // Above tab bar
|
||||
left: Spacing.md,
|
||||
right: Spacing.md,
|
||||
webViewToggleTop: {
|
||||
paddingHorizontal: Spacing.md,
|
||||
paddingTop: Spacing.md,
|
||||
paddingBottom: Spacing.sm,
|
||||
backgroundColor: AppColors.background,
|
||||
},
|
||||
webView: {
|
||||
flex: 1,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@ -17,6 +17,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
import { useBeneficiary } from '@/contexts/BeneficiaryContext';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { api } from '@/services/api';
|
||||
import {
|
||||
AppColors,
|
||||
@ -28,6 +29,12 @@ import {
|
||||
|
||||
type Role = 'caretaker' | 'guardian';
|
||||
|
||||
// Local beneficiaries have timestamp-based IDs (>1000000000)
|
||||
const isLocalBeneficiary = (id: string | number): boolean => {
|
||||
const numId = typeof id === 'string' ? parseInt(id, 10) : id;
|
||||
return numId > 1000000000;
|
||||
};
|
||||
|
||||
interface Invitation {
|
||||
id: string;
|
||||
email: string;
|
||||
@ -39,8 +46,9 @@ interface Invitation {
|
||||
|
||||
export default function ShareAccessScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const { currentBeneficiary } = useBeneficiary();
|
||||
const { currentBeneficiary, localBeneficiaries, updateLocalBeneficiary } = useBeneficiary();
|
||||
const { user } = useAuth();
|
||||
const toast = useToast();
|
||||
|
||||
const [email, setEmail] = useState('');
|
||||
const [role, setRole] = useState<Role>('caretaker');
|
||||
@ -52,16 +60,34 @@ export default function ShareAccessScreen() {
|
||||
const beneficiaryName = currentBeneficiary?.name || 'this person';
|
||||
const currentUserEmail = user?.email?.toLowerCase();
|
||||
|
||||
// Check if this is a local beneficiary
|
||||
const isLocal = useMemo(() => id ? isLocalBeneficiary(id) : false, [id]);
|
||||
|
||||
// Get local beneficiary data
|
||||
const localBeneficiary = useMemo(() => {
|
||||
if (!isLocal || !id) return null;
|
||||
return localBeneficiaries.find(b => b.id === parseInt(id, 10));
|
||||
}, [isLocal, id, localBeneficiaries]);
|
||||
|
||||
// Load invitations on mount
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
loadInvitations();
|
||||
}
|
||||
}, [id]);
|
||||
}, [id, isLocal, localBeneficiary]);
|
||||
|
||||
const loadInvitations = async () => {
|
||||
if (!id) return;
|
||||
|
||||
// For local beneficiaries, use stored invitations
|
||||
if (isLocal && localBeneficiary) {
|
||||
setInvitations(localBeneficiary.invitations || []);
|
||||
setIsLoadingInvitations(false);
|
||||
setRefreshing(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// For API beneficiaries
|
||||
try {
|
||||
const response = await api.getInvitations(id);
|
||||
if (response.ok && response.data) {
|
||||
@ -113,6 +139,35 @@ export default function ShareAccessScreen() {
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
// For local beneficiaries, store invitation locally
|
||||
if (isLocal && id) {
|
||||
try {
|
||||
const newInvitation: Invitation = {
|
||||
id: `local_${Date.now()}`,
|
||||
email: trimmedEmail,
|
||||
role: role,
|
||||
status: 'pending',
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
const currentInvitations = localBeneficiary?.invitations || [];
|
||||
await updateLocalBeneficiary(parseInt(id, 10), {
|
||||
invitations: [...currentInvitations, newInvitation],
|
||||
});
|
||||
|
||||
setEmail('');
|
||||
setRole('caretaker');
|
||||
setInvitations([...currentInvitations, newInvitation]);
|
||||
toast.success('Invitation Sent', `Invitation sent to ${trimmedEmail}`);
|
||||
} catch (error) {
|
||||
toast.error('Error', 'Failed to send invitation');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// For API beneficiaries
|
||||
try {
|
||||
const response = await api.sendInvitation({
|
||||
beneficiaryId: id!,
|
||||
@ -124,7 +179,7 @@ export default function ShareAccessScreen() {
|
||||
setEmail('');
|
||||
setRole('caretaker');
|
||||
loadInvitations();
|
||||
Alert.alert('Success', `Invitation sent to ${trimmedEmail}`);
|
||||
toast.success('Success', `Invitation sent to ${trimmedEmail}`);
|
||||
} else {
|
||||
Alert.alert('Error', response.error?.message || 'Failed to send invitation');
|
||||
}
|
||||
@ -146,10 +201,28 @@ export default function ShareAccessScreen() {
|
||||
text: 'Remove',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
// For local beneficiaries
|
||||
if (isLocal && id) {
|
||||
try {
|
||||
const currentInvitations = localBeneficiary?.invitations || [];
|
||||
const updatedInvitations = currentInvitations.filter(inv => inv.id !== invitation.id);
|
||||
await updateLocalBeneficiary(parseInt(id, 10), {
|
||||
invitations: updatedInvitations,
|
||||
});
|
||||
setInvitations(updatedInvitations);
|
||||
toast.success('Removed', 'Access removed successfully');
|
||||
} catch (error) {
|
||||
toast.error('Error', 'Failed to remove access');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// For API beneficiaries
|
||||
try {
|
||||
const response = await api.deleteInvitation(invitation.id);
|
||||
if (response.ok) {
|
||||
loadInvitations();
|
||||
toast.success('Removed', 'Access removed successfully');
|
||||
} else {
|
||||
Alert.alert('Error', 'Failed to remove access');
|
||||
}
|
||||
@ -167,6 +240,54 @@ export default function ShareAccessScreen() {
|
||||
return 'Caretaker';
|
||||
};
|
||||
|
||||
const handleChangeRole = (invitation: Invitation) => {
|
||||
const newRole = invitation.role === 'caretaker' ? 'guardian' : 'caretaker';
|
||||
const newRoleLabel = newRole === 'guardian' ? 'Guardian' : 'Caretaker';
|
||||
|
||||
Alert.alert(
|
||||
'Change Role',
|
||||
`Change ${invitation.email}'s role to ${newRoleLabel}?`,
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Change',
|
||||
onPress: async () => {
|
||||
// For local beneficiaries
|
||||
if (isLocal && id) {
|
||||
try {
|
||||
const currentInvitations = localBeneficiary?.invitations || [];
|
||||
const updatedInvitations = currentInvitations.map(inv =>
|
||||
inv.id === invitation.id ? { ...inv, role: newRole } : inv
|
||||
);
|
||||
await updateLocalBeneficiary(parseInt(id, 10), {
|
||||
invitations: updatedInvitations,
|
||||
});
|
||||
setInvitations(updatedInvitations);
|
||||
toast.success('Updated', `Role changed to ${newRoleLabel}`);
|
||||
} catch (error) {
|
||||
toast.error('Error', 'Failed to change role');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// For API beneficiaries
|
||||
try {
|
||||
const response = await api.updateInvitation(invitation.id, newRole as 'caretaker' | 'guardian');
|
||||
if (response.ok) {
|
||||
loadInvitations();
|
||||
toast.success('Updated', `Role changed to ${newRoleLabel}`);
|
||||
} else {
|
||||
Alert.alert('Error', response.error?.message || 'Failed to change role');
|
||||
}
|
||||
} catch (error) {
|
||||
Alert.alert('Error', 'Failed to change role');
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string): string => {
|
||||
switch (status) {
|
||||
case 'accepted': return AppColors.success;
|
||||
@ -282,9 +403,15 @@ export default function ShareAccessScreen() {
|
||||
{invitation.email}
|
||||
</Text>
|
||||
<View style={styles.invitationMeta}>
|
||||
<Text style={styles.invitationRole}>
|
||||
{getRoleLabel(invitation.role)}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.roleChip}
|
||||
onPress={() => handleChangeRole(invitation)}
|
||||
>
|
||||
<Text style={styles.invitationRole}>
|
||||
{getRoleLabel(invitation.role)}
|
||||
</Text>
|
||||
<Ionicons name="chevron-down" size={12} color={AppColors.primary} />
|
||||
</TouchableOpacity>
|
||||
<View style={[styles.statusDot, { backgroundColor: getStatusColor(invitation.status) }]} />
|
||||
<Text style={[styles.invitationStatus, { color: getStatusColor(invitation.status) }]}>
|
||||
{invitation.status}
|
||||
@ -468,9 +595,19 @@ const styles = StyleSheet.create({
|
||||
alignItems: 'center',
|
||||
marginTop: 2,
|
||||
},
|
||||
roleChip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: AppColors.primaryLighter,
|
||||
paddingHorizontal: Spacing.sm,
|
||||
paddingVertical: 2,
|
||||
borderRadius: BorderRadius.full,
|
||||
gap: 2,
|
||||
},
|
||||
invitationRole: {
|
||||
fontSize: FontSizes.xs,
|
||||
color: AppColors.textSecondary,
|
||||
color: AppColors.primary,
|
||||
fontWeight: FontWeights.medium,
|
||||
},
|
||||
statusDot: {
|
||||
width: 6,
|
||||
|
||||
@ -157,22 +157,15 @@ export default function HomeScreen() {
|
||||
setError(null);
|
||||
try {
|
||||
const onboardingCompleted = await api.isOnboardingCompleted();
|
||||
const response = await api.getAllBeneficiaries();
|
||||
|
||||
let allBeneficiaries: Beneficiary[] = [];
|
||||
// Use only local beneficiaries (no API fetch)
|
||||
setBeneficiaries(localBeneficiaries);
|
||||
|
||||
if (response.ok && response.data) {
|
||||
allBeneficiaries = [...response.data];
|
||||
if (!currentBeneficiary && localBeneficiaries.length > 0) {
|
||||
setCurrentBeneficiary(localBeneficiaries[0]);
|
||||
}
|
||||
|
||||
allBeneficiaries = [...allBeneficiaries, ...localBeneficiaries];
|
||||
setBeneficiaries(allBeneficiaries);
|
||||
|
||||
if (!currentBeneficiary && allBeneficiaries.length > 0) {
|
||||
setCurrentBeneficiary(allBeneficiaries[0]);
|
||||
}
|
||||
|
||||
if (allBeneficiaries.length === 0 && !onboardingCompleted) {
|
||||
if (localBeneficiaries.length === 0 && !onboardingCompleted) {
|
||||
router.replace({
|
||||
pathname: '/(auth)/add-loved-one',
|
||||
params: { email: user?.email || '' },
|
||||
@ -181,11 +174,7 @@ export default function HomeScreen() {
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load beneficiaries:', err);
|
||||
if (localBeneficiaries.length > 0) {
|
||||
setBeneficiaries(localBeneficiaries);
|
||||
} else {
|
||||
setError('Failed to load beneficiaries');
|
||||
}
|
||||
setBeneficiaries(localBeneficiaries);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ import * as Clipboard from 'expo-clipboard';
|
||||
import { router } from 'expo-router';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { ProfileDrawer } from '@/components/ProfileDrawer';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import {
|
||||
AppColors,
|
||||
BorderRadius,
|
||||
@ -42,6 +43,7 @@ const generateInviteCode = (identifier: string): string => {
|
||||
|
||||
export default function ProfileScreen() {
|
||||
const { user, logout } = useAuth();
|
||||
const toast = useToast();
|
||||
|
||||
// Drawer state
|
||||
const [drawerVisible, setDrawerVisible] = useState(false);
|
||||
@ -129,7 +131,7 @@ export default function ProfileScreen() {
|
||||
|
||||
const handleCopyInviteCode = async () => {
|
||||
await Clipboard.setStringAsync(inviteCode);
|
||||
Alert.alert('Copied!', `Invite code "${inviteCode}" copied to clipboard`);
|
||||
toast.success(`Invite code "${inviteCode}" copied to clipboard`);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -3,6 +3,7 @@ const router = express.Router();
|
||||
const jwt = require('jsonwebtoken');
|
||||
const crypto = require('crypto');
|
||||
const { supabase } = require('../config/supabase');
|
||||
const { sendInvitationEmail } = require('../services/email');
|
||||
|
||||
/**
|
||||
* Middleware to verify JWT token
|
||||
@ -104,10 +105,37 @@ router.post('/', async (req, res) => {
|
||||
return res.status(500).json({ error: 'Failed to create invitation' });
|
||||
}
|
||||
|
||||
// TODO: Send invitation email if email provided
|
||||
// Send invitation email if email provided
|
||||
let emailSent = false;
|
||||
if (email) {
|
||||
// Get inviter and beneficiary names for email
|
||||
const { data: inviter } = await supabase
|
||||
.from('users')
|
||||
.select('first_name, last_name, email')
|
||||
.eq('id', userId)
|
||||
.single();
|
||||
|
||||
const { data: beneficiaryData } = await supabase
|
||||
.from('users')
|
||||
.select('first_name, last_name')
|
||||
.eq('id', beneficiaryId)
|
||||
.single();
|
||||
|
||||
const inviterName = inviter ? `${inviter.first_name || ''} ${inviter.last_name || ''}`.trim() || inviter.email : null;
|
||||
const beneficiaryName = beneficiaryData ? `${beneficiaryData.first_name || ''} ${beneficiaryData.last_name || ''}`.trim() : null;
|
||||
|
||||
emailSent = await sendInvitationEmail({
|
||||
email: email.toLowerCase(),
|
||||
inviterName,
|
||||
beneficiaryName,
|
||||
role,
|
||||
inviteCode: inviteToken
|
||||
});
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
emailSent,
|
||||
invitation: {
|
||||
id: invitation.id,
|
||||
code: invitation.token,
|
||||
@ -289,6 +317,69 @@ router.get('/', async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* PATCH /api/invitations/:id
|
||||
* Updates invitation role
|
||||
*/
|
||||
router.patch('/:id', async (req, res) => {
|
||||
try {
|
||||
const userId = req.user.userId;
|
||||
const invitationId = parseInt(req.params.id, 10);
|
||||
const { role } = req.body;
|
||||
|
||||
if (!role || !['caretaker', 'guardian'].includes(role)) {
|
||||
return res.status(400).json({ error: 'Invalid role. Must be: caretaker or guardian' });
|
||||
}
|
||||
|
||||
// Check invitation belongs to user
|
||||
const { data: invitation, error: findError } = await supabase
|
||||
.from('invitations')
|
||||
.select('*')
|
||||
.eq('id', invitationId)
|
||||
.eq('invited_by', userId)
|
||||
.single();
|
||||
|
||||
if (findError || !invitation) {
|
||||
return res.status(404).json({ error: 'Invitation not found' });
|
||||
}
|
||||
|
||||
// Update invitation role
|
||||
const { data: updated, error } = await supabase
|
||||
.from('invitations')
|
||||
.update({ role })
|
||||
.eq('id', invitationId)
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (error) {
|
||||
console.error('Update invitation error:', error);
|
||||
return res.status(500).json({ error: 'Failed to update invitation' });
|
||||
}
|
||||
|
||||
// If invitation was already accepted, also update user_access
|
||||
if (invitation.accepted_by) {
|
||||
await supabase
|
||||
.from('user_access')
|
||||
.update({ role })
|
||||
.eq('accessor_id', invitation.accepted_by)
|
||||
.eq('beneficiary_id', invitation.beneficiary_id);
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
invitation: {
|
||||
id: updated.id,
|
||||
role: updated.role,
|
||||
email: updated.email
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Update invitation error:', error);
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* DELETE /api/invitations/:id
|
||||
* Revokes a pending invitation
|
||||
|
||||
@ -216,8 +216,124 @@ If you didn't request this code, you can safely ignore this email.
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send invitation email to share beneficiary access
|
||||
*/
|
||||
async function sendInvitationEmail({ email, inviterName, beneficiaryName, role, inviteCode }) {
|
||||
const frontendUrl = process.env.FRONTEND_URL || 'https://wellnuo.smartlaunchhub.com';
|
||||
const acceptLink = `${frontendUrl}/accept-invite?code=${inviteCode}`;
|
||||
const roleText = role === 'guardian' ? 'Guardian (full access)' : 'Caretaker (view only)';
|
||||
|
||||
const htmlContent = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #F5F7FA; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;">
|
||||
<table width="100%" cellspacing="0" cellpadding="0" style="background-color: #F5F7FA;">
|
||||
<tr>
|
||||
<td align="center" style="padding: 48px 24px;">
|
||||
<table width="100%" cellspacing="0" cellpadding="0" style="max-width: 500px; background-color: #FFFFFF; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
|
||||
|
||||
<!-- Header -->
|
||||
<tr>
|
||||
<td style="background: linear-gradient(135deg, #4A90D9 0%, #357ABD 100%); padding: 32px; text-align: center;">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; color: #FFFFFF;">WellNuo</h1>
|
||||
<p style="margin: 8px 0 0 0; font-size: 14px; color: rgba(255,255,255,0.9);">Elderly Care Monitoring</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Content -->
|
||||
<tr>
|
||||
<td style="padding: 32px;">
|
||||
<h2 style="margin: 0 0 16px 0; font-size: 20px; font-weight: 600; color: #333333;">You've been invited!</h2>
|
||||
|
||||
<p style="margin: 0 0 24px 0; font-size: 15px; color: #666666; line-height: 1.6;">
|
||||
<strong>${inviterName || 'Someone'}</strong> has invited you to help monitor
|
||||
<strong>${beneficiaryName || 'their loved one'}</strong> on WellNuo.
|
||||
</p>
|
||||
|
||||
<!-- Role Badge -->
|
||||
<div style="background-color: #F0F7FF; border-radius: 8px; padding: 16px; margin-bottom: 24px;">
|
||||
<p style="margin: 0; font-size: 13px; color: #666666;">Your role:</p>
|
||||
<p style="margin: 4px 0 0 0; font-size: 16px; font-weight: 600; color: #4A90D9;">${roleText}</p>
|
||||
</div>
|
||||
|
||||
<!-- Invite Code -->
|
||||
<div style="background-color: #F5F7FA; border-radius: 8px; padding: 20px; text-align: center; margin-bottom: 24px;">
|
||||
<p style="margin: 0 0 8px 0; font-size: 13px; color: #666666;">Your invitation code:</p>
|
||||
<p style="margin: 0; font-size: 28px; font-weight: 700; letter-spacing: 3px; color: #333333;">${inviteCode}</p>
|
||||
</div>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<table width="100%" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="${acceptLink}" style="display: inline-block; padding: 14px 32px; background: linear-gradient(135deg, #4A90D9 0%, #357ABD 100%); color: #FFFFFF; text-decoration: none; border-radius: 8px; font-size: 16px; font-weight: 600;">Accept Invitation</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 24px 0 0 0; font-size: 13px; color: #999999; text-align: center;">
|
||||
This invitation expires in 7 days.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Footer -->
|
||||
<tr>
|
||||
<td style="padding: 24px; background-color: #F5F7FA; text-align: center;">
|
||||
<p style="margin: 0; font-size: 12px; color: #999999;">
|
||||
If you didn't expect this invitation, you can safely ignore this email.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
const textContent = `
|
||||
WellNuo - You've been invited!
|
||||
|
||||
${inviterName || 'Someone'} has invited you to help monitor ${beneficiaryName || 'their loved one'} on WellNuo.
|
||||
|
||||
Your role: ${roleText}
|
||||
|
||||
Your invitation code: ${inviteCode}
|
||||
|
||||
Accept your invitation: ${acceptLink}
|
||||
|
||||
This invitation expires in 7 days.
|
||||
|
||||
If you didn't expect this invitation, you can safely ignore this email.
|
||||
|
||||
WellNuo - Elderly Care Monitoring
|
||||
`;
|
||||
|
||||
try {
|
||||
await sendEmail({
|
||||
to: email,
|
||||
subject: `${inviterName || 'Someone'} invited you to WellNuo`,
|
||||
htmlContent,
|
||||
textContent
|
||||
});
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Failed to send invitation email:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
sendEmail,
|
||||
sendPasswordResetEmail,
|
||||
sendOTPEmail
|
||||
sendOTPEmail,
|
||||
sendInvitationEmail
|
||||
};
|
||||
|
||||
69
components/ui/DevModeToggle.tsx
Normal file
69
components/ui/DevModeToggle.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import { View, Text, Switch, StyleSheet } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import {
|
||||
AppColors,
|
||||
BorderRadius,
|
||||
FontSizes,
|
||||
Spacing,
|
||||
FontWeights,
|
||||
} from '@/constants/theme';
|
||||
|
||||
interface DevModeToggleProps {
|
||||
value: boolean;
|
||||
onValueChange: (value: boolean) => void;
|
||||
label?: string;
|
||||
hint?: string;
|
||||
}
|
||||
|
||||
export function DevModeToggle({
|
||||
value,
|
||||
onValueChange,
|
||||
label = 'Developer Mode',
|
||||
hint = 'Show WebView dashboard',
|
||||
}: DevModeToggleProps) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.left}>
|
||||
<Ionicons name="code-slash" size={20} color={AppColors.warning} />
|
||||
<View>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
<Text style={styles.hint}>{hint}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Switch
|
||||
value={value}
|
||||
onValueChange={onValueChange}
|
||||
trackColor={{ false: AppColors.border, true: AppColors.primaryLight }}
|
||||
thumbColor={value ? AppColors.primary : AppColors.textMuted}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: AppColors.warningLight,
|
||||
borderRadius: BorderRadius.lg,
|
||||
padding: Spacing.md,
|
||||
borderWidth: 1,
|
||||
borderColor: AppColors.warning,
|
||||
},
|
||||
left: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: Spacing.md,
|
||||
},
|
||||
label: {
|
||||
fontSize: FontSizes.sm,
|
||||
fontWeight: FontWeights.semibold,
|
||||
color: AppColors.textPrimary,
|
||||
},
|
||||
hint: {
|
||||
fontSize: FontSizes.xs,
|
||||
color: AppColors.textSecondary,
|
||||
},
|
||||
});
|
||||
@ -653,6 +653,41 @@ class ApiService {
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Update invitation role
|
||||
async updateInvitation(invitationId: string, role: 'caretaker' | 'guardian'): Promise<ApiResponse<{ success: boolean; invitation: { id: string; role: string; email: string } }>> {
|
||||
const token = await this.getToken();
|
||||
if (!token) {
|
||||
return { ok: false, error: { message: 'Not authenticated', code: 'UNAUTHORIZED' } };
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${WELLNUO_API_URL}/invitations/${invitationId}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ role }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
return { data, ok: true };
|
||||
}
|
||||
|
||||
return {
|
||||
ok: false,
|
||||
error: { message: data.error || 'Failed to update invitation' },
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
ok: false,
|
||||
error: { message: 'Network error. Please check your connection.' },
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const api = new ApiService();
|
||||
|
||||
@ -79,6 +79,15 @@ export interface Beneficiary {
|
||||
equipmentStatus?: EquipmentStatus;
|
||||
trackingNumber?: string; // Shipping tracking number
|
||||
isDemo?: boolean; // Demo mode flag
|
||||
// Invitations for sharing access
|
||||
invitations?: {
|
||||
id: string;
|
||||
email: string;
|
||||
role: string;
|
||||
label?: string;
|
||||
status: string;
|
||||
created_at: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
// Dashboard API response
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user