51697c3aa4
- components/plan/PlanChangeSheet.tsx — upgrade/downgrade briefing per pricing-tiers.md §4
(fetches GET /api/plan/change-preview; gains/keeps/changes; recovery-safety line;
billing hint w/o purchase button; CTA row, no 'are you sure?' interstitial)
- debug.tsx: PlanOverrideToggle routes every flip through PlanChangeSheet first
- devices.tsx + protectedDevices.ts: 'degraded' status (red, inline 'protection expired —
remove the profile yourself' hint, no green checkmark); maxProtectedDevices limit hint
- mail.tsx + MailAccountCard.tsx + useMailStatus.ts: over-limit banner + paused-account
greyed-out + PausedBadge (all defensive — only shows if backend sends the field)
- blocker.tsx: free-tier transparency hint ('Grundschutz aktiv — voller Schutz: Pro/Legend')
+ custom-domain over-limit banner
- locales: plan.change.* + plan_limit.* (de + en)
tsc clean. Backend side (GET /api/plan/change-preview, paused/degraded fields) in progress
in parallel — UI built defensively to work before it lands.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
557 lines
19 KiB
TypeScript
557 lines
19 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
LayoutAnimation,
|
|
Platform,
|
|
Pressable,
|
|
TouchableOpacity,
|
|
Text,
|
|
UIManager,
|
|
View,
|
|
} from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { ConfirmAlert } from '../ConfirmAlert';
|
|
import { EditMailAccountSheet } from './EditMailAccountSheet';
|
|
import { useMailInterval } from '../../hooks/useMailInterval';
|
|
import type { MailAccount } from '../../hooks/useMailStatus';
|
|
|
|
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
|
|
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
}
|
|
|
|
type Props = {
|
|
account: MailAccount;
|
|
plan: 'free' | 'pro' | 'legend';
|
|
expanded: boolean;
|
|
onToggle: () => void;
|
|
onDisconnect: (id: string) => Promise<void>;
|
|
onIntervalChanged: () => void;
|
|
onEditSuccess: () => void;
|
|
disconnecting?: boolean;
|
|
};
|
|
|
|
function PausedBadge({ t }: { t: (k: string) => string }) {
|
|
return (
|
|
<View
|
|
style={{
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
borderRadius: 5,
|
|
backgroundColor: 'rgba(115,115,115,0.1)',
|
|
alignSelf: 'flex-start',
|
|
marginTop: 3,
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 10, color: '#737373', fontFamily: 'Nunito_600SemiBold' }}>
|
|
{t('plan_limit.mail_account_paused')}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function resolveProviderIcon(provider: string): {
|
|
icon: React.ComponentProps<typeof Ionicons>['name'];
|
|
color: string;
|
|
} {
|
|
const p = provider.toLowerCase();
|
|
if (p.includes('gmail') || p.includes('google')) return { icon: 'mail', color: '#EA4335' };
|
|
if (p.includes('icloud') || p.includes('apple')) return { icon: 'cloud', color: '#007AFF' };
|
|
if (p.includes('outlook') || p.includes('hotmail') || p.includes('microsoft'))
|
|
return { icon: 'mail-open', color: '#0078D4' };
|
|
if (p.includes('yahoo')) return { icon: 'at', color: '#7C3AED' };
|
|
if (p.includes('gmx') || p.includes('web.de'))
|
|
return { icon: 'mail-unread', color: '#E87A22' };
|
|
return { icon: 'server', color: '#737373' };
|
|
}
|
|
|
|
const STALE_THRESHOLD_MS = 5 * 60 * 1_000;
|
|
const IDLE_HEARTBEAT_STALE_MS = STALE_THRESHOLD_MS;
|
|
const NO_NEW_MAIL_THRESHOLD_MS = 60 * 60_000;
|
|
|
|
function formatRelativeAbsolute(ts: Date): string {
|
|
const min = Math.floor((Date.now() - ts.getTime()) / 60_000);
|
|
const todayStr = new Date().toDateString();
|
|
const yesterdayStr = new Date(Date.now() - 86_400_000).toDateString();
|
|
|
|
const hh = ts.getHours().toString().padStart(2, '0');
|
|
const mm = ts.getMinutes().toString().padStart(2, '0');
|
|
|
|
let dayLabel: string;
|
|
if (ts.toDateString() === todayStr) dayLabel = 'heute';
|
|
else if (ts.toDateString() === yesterdayStr) dayLabel = 'gestern';
|
|
else dayLabel = ts.toLocaleDateString('de', { day: '2-digit', month: '2-digit' });
|
|
|
|
let rel: string;
|
|
if (min < 1) rel = 'gerade eben';
|
|
else if (min < 60) rel = `vor ${min} min`;
|
|
else if (min < 1440) rel = `vor ${Math.floor(min / 60)}h`;
|
|
else rel = `vor ${Math.floor(min / 1440)}d`;
|
|
|
|
return `${rel} (${dayLabel} ${hh}:${mm})`;
|
|
}
|
|
|
|
function idleHeartbeatAlive(lastIdleHeartbeatAt: string | null | undefined): boolean {
|
|
if (!lastIdleHeartbeatAt) return false;
|
|
return Date.now() - new Date(lastIdleHeartbeatAt).getTime() < IDLE_HEARTBEAT_STALE_MS;
|
|
}
|
|
|
|
function StatusBadgeRow({
|
|
account,
|
|
isLegend,
|
|
t,
|
|
}: {
|
|
account: MailAccount;
|
|
isLegend: boolean;
|
|
t: (k: string, opts?: Record<string, string | number>) => string;
|
|
}) {
|
|
// Priority 1 — auth / connect error
|
|
if (account.lastConnectError) {
|
|
const isAuthError =
|
|
account.lastConnectError.toLowerCase().includes('invalid credentials') ||
|
|
account.lastConnectError.toLowerCase().includes('authentication failed');
|
|
const errorLabel = isAuthError ? t('mail.status_auth_error') : t('mail.status_connect_error');
|
|
const since = account.lastConnectErrorAt
|
|
? formatRelativeAbsolute(new Date(account.lastConnectErrorAt))
|
|
: null;
|
|
return (
|
|
<View style={{ marginTop: 3 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Ionicons name="lock-closed" size={11} color="#dc2626" style={{ marginRight: 4 }} />
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}>
|
|
{errorLabel}
|
|
</Text>
|
|
<Text
|
|
style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginLeft: 4 }}
|
|
>
|
|
· {t('mail.status_error_tap_hint')}
|
|
</Text>
|
|
</View>
|
|
{since ? (
|
|
<Text
|
|
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
|
>
|
|
{since}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Priority 5 — never connected
|
|
if (!account.lastScannedAt) {
|
|
return (
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }}>
|
|
<View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#a3a3a3', marginRight: 5 }} />
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#a3a3a3' }}>
|
|
{t('mail.status_waiting_first_connect')}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const heartbeatAlive = idleHeartbeatAlive(account.lastIdleHeartbeatAt);
|
|
const lastScannedTs = new Date(account.lastScannedAt);
|
|
const scannedAgo = Date.now() - lastScannedTs.getTime();
|
|
const scannedRelAbs = formatRelativeAbsolute(lastScannedTs);
|
|
|
|
// Priority 4 — stale: heartbeat missing/expired AND scan is old
|
|
if (!heartbeatAlive && scannedAgo > STALE_THRESHOLD_MS) {
|
|
return (
|
|
<View style={{ marginTop: 3 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View
|
|
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#d97706', marginRight: 5 }}
|
|
/>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#d97706' }}>
|
|
{t('mail.status_stale')}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
|
numberOfLines={1}
|
|
>
|
|
{t('mail.status_stale_last_scan', { rel: scannedRelAbs })}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Priority 2 + 3 — heartbeat alive (or scan recent enough for pre-migration backend)
|
|
if (heartbeatAlive) {
|
|
const heartbeatTs = new Date(account.lastIdleHeartbeatAt!);
|
|
const heartbeatMin = Math.floor((Date.now() - heartbeatTs.getTime()) / 60_000);
|
|
const idleSince = heartbeatMin < 1 ? 'gerade eben' : `${heartbeatMin} min`;
|
|
|
|
if (scannedAgo > NO_NEW_MAIL_THRESHOLD_MS) {
|
|
// Priority 3 — connected but no new mail for >1h
|
|
return (
|
|
<View style={{ marginTop: 3 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View
|
|
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
|
|
/>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
|
|
{isLegend ? t('mail.live') : t('mail.account_active')}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
|
numberOfLines={1}
|
|
>
|
|
{t('mail.status_live_no_new_mail', { rel: scannedRelAbs })}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Priority 2 — live + heartbeat recent + scan recent
|
|
return (
|
|
<View style={{ marginTop: 3 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View
|
|
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
|
|
/>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
|
|
{isLegend ? t('mail.live') : t('mail.account_active')}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
|
numberOfLines={1}
|
|
>
|
|
{t('mail.status_live_idle', { rel: idleSince })}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Fallback — scan recent, backend without heartbeat field
|
|
return (
|
|
<View style={{ marginTop: 3 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View
|
|
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
|
|
/>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
|
|
{isLegend ? t('mail.live') : t('mail.account_active')}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
|
numberOfLines={1}
|
|
>
|
|
{scannedRelAbs}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const INTERVAL_OPTIONS_BY_PLAN: Record<'free' | 'pro' | 'legend', number[]> = {
|
|
free: [4],
|
|
pro: [1, 4, 8],
|
|
legend: [1, 4, 8],
|
|
};
|
|
|
|
const HEADER_ROW = {
|
|
flexDirection: 'row' as const,
|
|
alignItems: 'center' as const,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 14,
|
|
};
|
|
|
|
const ACTION_BTN_BASE = {
|
|
flex: 1,
|
|
flexDirection: 'row' as const,
|
|
alignItems: 'center' as const,
|
|
justifyContent: 'center' as const,
|
|
paddingVertical: 12,
|
|
borderRadius: 10,
|
|
};
|
|
|
|
export function MailAccountCard({
|
|
account,
|
|
plan,
|
|
expanded,
|
|
onToggle,
|
|
onDisconnect,
|
|
onIntervalChanged,
|
|
onEditSuccess,
|
|
disconnecting,
|
|
}: Props) {
|
|
const { t } = useTranslation();
|
|
const [confirmVisible, setConfirmVisible] = useState(false);
|
|
const [editVisible, setEditVisible] = useState(false);
|
|
const { setInterval, updating } = useMailInterval();
|
|
const { icon, color } = resolveProviderIcon(account.provider);
|
|
|
|
const isLegend = plan === 'legend';
|
|
const isPaused = account.paused === true;
|
|
const intervalOptions = INTERVAL_OPTIONS_BY_PLAN[plan];
|
|
|
|
function handleToggle() {
|
|
if (account.lastConnectError) {
|
|
setEditVisible(true);
|
|
return;
|
|
}
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
|
onToggle();
|
|
}
|
|
|
|
async function handleSetInterval(value: number) {
|
|
const res = await setInterval(account.id, value);
|
|
if (res.ok) onIntervalChanged();
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<View
|
|
style={{
|
|
backgroundColor: isPaused ? '#fafafa' : '#fff',
|
|
borderRadius: 16,
|
|
borderWidth: 1,
|
|
borderColor: account.lastConnectError ? '#fecaca' : isPaused ? '#d4d4d4' : '#e5e5e5',
|
|
overflow: 'hidden',
|
|
opacity: isPaused ? 0.75 : 1,
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<Pressable onPress={handleToggle} android_ripple={{ color: '#f5f5f5' }}>
|
|
<View style={HEADER_ROW}>
|
|
<View
|
|
style={{
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 10,
|
|
backgroundColor: color + '18',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: 12,
|
|
}}
|
|
>
|
|
<Ionicons name={icon} size={19} color={color} />
|
|
</View>
|
|
|
|
<View style={{ flex: 1, minWidth: 0, marginRight: 8 }}>
|
|
<Text
|
|
style={{ fontSize: 14, fontFamily: 'Nunito_700Bold', color: isPaused ? '#a3a3a3' : '#0a0a0a' }}
|
|
numberOfLines={1}
|
|
>
|
|
{account.email}
|
|
</Text>
|
|
{isPaused
|
|
? <PausedBadge t={t} />
|
|
: <StatusBadgeRow account={account} isLegend={isLegend} t={t} />
|
|
}
|
|
</View>
|
|
|
|
<Ionicons
|
|
name={expanded ? 'chevron-up' : 'chevron-down'}
|
|
size={18}
|
|
color="#a3a3a3"
|
|
/>
|
|
</View>
|
|
</Pressable>
|
|
|
|
{/* Body */}
|
|
{expanded && (
|
|
<View style={{ borderTopWidth: 1, borderTopColor: '#f5f5f5', padding: 14 }}>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: '#fef2f2',
|
|
borderRadius: 12,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 12,
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<Ionicons name="shield-checkmark" size={20} color="#dc2626" style={{ marginRight: 10 }} />
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}>
|
|
{t('mail.account_stat_blocked')}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 22,
|
|
fontFamily: 'Nunito_800ExtraBold',
|
|
color: '#dc2626',
|
|
marginTop: 1,
|
|
}}
|
|
>
|
|
{account.totalBlocked.toLocaleString()}
|
|
</Text>
|
|
</View>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#737373' }}>
|
|
{t('mail.account_of_scanned', {
|
|
scanned: account.totalScanned.toLocaleString(),
|
|
})}
|
|
</Text>
|
|
</View>
|
|
|
|
{isLegend ? (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: '#f0fdf4',
|
|
borderRadius: 10,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<Ionicons name="flash" size={14} color="#16a34a" style={{ marginRight: 8 }} />
|
|
<Text
|
|
style={{
|
|
flex: 1,
|
|
fontSize: 12,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: '#16a34a',
|
|
}}
|
|
>
|
|
{t('mail.realtime_desc')}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<View style={{ marginBottom: 12 }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 11,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: '#737373',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.6,
|
|
marginBottom: 6,
|
|
}}
|
|
>
|
|
{t('mail.scan_interval_label')}
|
|
</Text>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
{intervalOptions.map((opt, idx) => {
|
|
const active = account.scanInterval === opt;
|
|
const disabled = plan === 'free' || updating === account.id;
|
|
return (
|
|
<TouchableOpacity
|
|
key={opt}
|
|
activeOpacity={0.7}
|
|
disabled={disabled}
|
|
onPress={() => handleSetInterval(opt)}
|
|
style={{
|
|
flex: 1,
|
|
paddingVertical: 9,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
backgroundColor: active ? '#007AFF' : '#f5f5f5',
|
|
marginLeft: idx === 0 ? 0 : 6,
|
|
opacity: disabled && !active ? 0.5 : 1,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 13,
|
|
fontFamily: 'Nunito_700Bold',
|
|
color: active ? '#fff' : '#525252',
|
|
}}
|
|
>
|
|
{opt}h
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
{plan === 'free' && (
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: '#a3a3a3',
|
|
marginTop: 6,
|
|
}}
|
|
>
|
|
{t('mail.free_scan_interval_hint')}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
)}
|
|
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={() => setEditVisible(true)}
|
|
style={{ ...ACTION_BTN_BASE, backgroundColor: '#f5f5f5', marginRight: 6 }}
|
|
>
|
|
<Ionicons
|
|
name="key-outline"
|
|
size={14}
|
|
color="#525252"
|
|
style={{ marginRight: 6 }}
|
|
/>
|
|
<Text
|
|
style={{ fontSize: 13, fontFamily: 'Nunito_700Bold', color: '#525252' }}
|
|
numberOfLines={1}
|
|
>
|
|
{t('mail.account_change_password')}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={() => setConfirmVisible(true)}
|
|
disabled={disconnecting}
|
|
style={{
|
|
...ACTION_BTN_BASE,
|
|
backgroundColor: '#fef2f2',
|
|
marginLeft: 6,
|
|
opacity: disconnecting ? 0.6 : 1,
|
|
}}
|
|
>
|
|
{disconnecting ? (
|
|
<ActivityIndicator size="small" color="#dc2626" />
|
|
) : (
|
|
<>
|
|
<Ionicons
|
|
name="trash-outline"
|
|
size={14}
|
|
color="#dc2626"
|
|
style={{ marginRight: 6 }}
|
|
/>
|
|
<Text
|
|
style={{ fontSize: 13, fontFamily: 'Nunito_700Bold', color: '#dc2626' }}
|
|
numberOfLines={1}
|
|
>
|
|
{t('mail.disconnect')}
|
|
</Text>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<ConfirmAlert
|
|
visible={confirmVisible}
|
|
title={t('mail.account_disconnect_confirm_title')}
|
|
message={t('mail.account_disconnect_confirm_message', { email: account.email })}
|
|
confirmLabel={t('mail.account_disconnect_confirm_btn')}
|
|
destructive
|
|
icon="trash"
|
|
iconColor="#FF3B30"
|
|
onConfirm={async () => {
|
|
setConfirmVisible(false);
|
|
await onDisconnect(account.id);
|
|
}}
|
|
onCancel={() => setConfirmVisible(false)}
|
|
/>
|
|
|
|
<EditMailAccountSheet
|
|
visible={editVisible}
|
|
email={account.email}
|
|
onClose={() => setEditVisible(false)}
|
|
onSuccess={onEditSuccess}
|
|
/>
|
|
</>
|
|
);
|
|
}
|