392 lines
13 KiB
TypeScript
392 lines
13 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
LayoutAnimation,
|
|
Platform,
|
|
Pressable,
|
|
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 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' };
|
|
}
|
|
|
|
function formatRelativeTime(iso: string | null, t: (k: string) => string): string {
|
|
if (!iso) return t('mail.account_never_scanned');
|
|
const diff = Date.now() - new Date(iso).getTime();
|
|
const mins = Math.floor(diff / 60_000);
|
|
if (mins < 2) return t('mail.account_just_now');
|
|
if (mins < 60) return `${mins} min`;
|
|
const hours = Math.floor(mins / 60);
|
|
if (hours < 24) return `${hours}h`;
|
|
return `${Math.floor(hours / 24)}d`;
|
|
}
|
|
|
|
const INTERVAL_OPTIONS_BY_PLAN: Record<'free' | 'pro' | 'legend', number[]> = {
|
|
free: [4],
|
|
pro: [1, 4, 8],
|
|
legend: [1, 4, 8],
|
|
};
|
|
|
|
// Solid styles outside of render — no gap, no callback layout.
|
|
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 intervalOptions = INTERVAL_OPTIONS_BY_PLAN[plan];
|
|
|
|
function handleToggle() {
|
|
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: '#fff',
|
|
borderRadius: 16,
|
|
borderWidth: 1,
|
|
borderColor: '#e5e5e5',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{/* ── 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: '#0a0a0a' }}
|
|
numberOfLines={1}
|
|
>
|
|
{account.email}
|
|
</Text>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }}>
|
|
<View
|
|
style={{
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: 3,
|
|
backgroundColor: account.isActive ? '#16a34a' : '#dc2626',
|
|
marginRight: 5,
|
|
}}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontSize: 11,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: account.isActive ? '#16a34a' : '#dc2626',
|
|
marginRight: 8,
|
|
}}
|
|
>
|
|
{account.isActive
|
|
? isLegend
|
|
? t('mail.live')
|
|
: t('mail.account_active')
|
|
: t('mail.account_inactive')}
|
|
</Text>
|
|
<Text
|
|
style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#a3a3a3' }}
|
|
numberOfLines={1}
|
|
>
|
|
· {formatRelativeTime(account.lastScannedAt, t)}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Ionicons
|
|
name={expanded ? 'chevron-up' : 'chevron-down'}
|
|
size={18}
|
|
color="#a3a3a3"
|
|
/>
|
|
</View>
|
|
</Pressable>
|
|
|
|
{/* ── Body ── */}
|
|
{expanded && (
|
|
<View style={{ borderTopWidth: 1, borderTopColor: '#f5f5f5', padding: 14 }}>
|
|
{/* Big stat: Blocked */}
|
|
<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>
|
|
|
|
{/* Scan Mode */}
|
|
{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 (
|
|
<Pressable
|
|
key={opt}
|
|
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>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
{plan === 'free' && (
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: '#a3a3a3',
|
|
marginTop: 6,
|
|
}}
|
|
>
|
|
{t('mail.free_scan_interval_hint')}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
)}
|
|
|
|
{/* Action Row */}
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<Pressable
|
|
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>
|
|
</Pressable>
|
|
<Pressable
|
|
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>
|
|
</>
|
|
)}
|
|
</Pressable>
|
|
</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}
|
|
/>
|
|
</>
|
|
);
|
|
}
|