3c52d8869e
Rollback-Punkt vor Expo SDK 54 / RN 0.81 Upgrade. UI/UX: - Profile: ProfileHeader redesign (sign-in chip + member-since), StatsBar 3 pill cards, Demographics accordion completed (Geburtsjahr, Geschlecht, Familienstand, Beruf-split, Wohnort), Pro-Trial-Banner, Approved-Domains list, DigaMissionBanner - Settings: section-based layout, neutral icons (matched Header dropdown style) - Header dropdown: extended with logout + games-page link - Notifications page: skeleton dummy data - Locales: i18n keys for new screens New components: - WheelPickerModal: native iOS UIPickerView wheel for long lists (Geburtsjahr 91 items, Bundesland 16, Stadt 30+/Bundesland) - OptionsBottomSheet: iOS-style options sheet (used briefly for Geschlecht, currently unused — kept for potential future use) - germanCities.ts: Top-cities per Bundesland (DSGVO-clean static data) New libs (NewArch-codegen verified): - @react-native-menu/menu 2.0.0 (UIMenu wrapper, Apple HIG-konform) - @lodev09/react-native-true-sheet 3.10.1 (UISheetPresentationController wrapper — ABER incompatible mit RN 0.79.6, Build-Error → Trigger für SDK-54-Upgrade) Maestro E2E: - Initial setup mit auth/community/profile/urge flows Scripts: - build-ios-clean.sh: Xcode DerivedData + ios/build cleanup vor expo run:ios Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
519 lines
17 KiB
TypeScript
519 lines
17 KiB
TypeScript
import { useState, useMemo } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
Pressable,
|
|
Image,
|
|
ActivityIndicator,
|
|
} from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { SuccessAlert } from '../SuccessAlert';
|
|
import { ConfirmAlert } from '../ConfirmAlert';
|
|
import type { CustomDomain, Tier } from '../../hooks/useCustomDomains';
|
|
|
|
// ─── Helpers ─────────────────────────────────────────────────────────────
|
|
|
|
function timeAgo(input?: string | Date): string {
|
|
if (!input) return '';
|
|
const date = typeof input === 'string' ? new Date(input) : input;
|
|
const diffMs = Date.now() - date.getTime();
|
|
const minutes = Math.floor(diffMs / 60_000);
|
|
if (minutes < 1) return 'jetzt';
|
|
if (minutes < 60) return `${minutes}m`;
|
|
const hours = Math.floor(minutes / 60);
|
|
if (hours < 24) return `${hours}h`;
|
|
const days = Math.floor(hours / 24);
|
|
if (days < 7) return `${days}d`;
|
|
const weeks = Math.floor(days / 7);
|
|
if (weeks < 5) return `${weeks}w`;
|
|
const months = Math.floor(days / 30);
|
|
return `${months}mo`;
|
|
}
|
|
|
|
function timeSinceSubmit(input?: string | Date): string {
|
|
if (!input) return '';
|
|
const date = typeof input === 'string' ? new Date(input) : input;
|
|
const diffMs = Date.now() - date.getTime();
|
|
const hours = Math.floor(diffMs / 3_600_000);
|
|
if (hours < 1) {
|
|
const minutes = Math.max(1, Math.floor(diffMs / 60_000));
|
|
return `${minutes} min`;
|
|
}
|
|
if (hours < 24) return `${hours} Std`;
|
|
const days = Math.floor(hours / 24);
|
|
return `${days} Tag${days === 1 ? '' : 'e'}`;
|
|
}
|
|
|
|
type Props = {
|
|
domains: CustomDomain[];
|
|
tier: Tier;
|
|
onAdd?: () => void;
|
|
onSubmit?: (id: string) => Promise<{ ok: boolean }>;
|
|
onRemove?: (id: string) => Promise<{ ok: boolean }>;
|
|
onUpgradePro?: () => void;
|
|
};
|
|
|
|
// Sort-Reihenfolge: User sieht zuerst was Aufmerksamkeit braucht.
|
|
// submitted (in Prüfung) > rejected (kann erneut) > active (settled OK)
|
|
const STATUS_PRIORITY: Record<string, number> = {
|
|
submitted: 0,
|
|
rejected: 1,
|
|
active: 2,
|
|
approved: 99,
|
|
};
|
|
|
|
export function DomainGrid({ domains, tier, onAdd, onSubmit, onUpgradePro }: Props) {
|
|
const { t } = useTranslation();
|
|
// Slot-relevante Domains (alles außer approved). Sortiert nach Status-Priority,
|
|
// innerhalb gleicher Priority dann newest-first by addedAt.
|
|
const visible = useMemo(() => {
|
|
return domains
|
|
.filter((d) => d.status !== 'approved')
|
|
.slice()
|
|
.sort((a, b) => {
|
|
const pa = STATUS_PRIORITY[a.status] ?? 99;
|
|
const pb = STATUS_PRIORITY[b.status] ?? 99;
|
|
if (pa !== pb) return pa - pb;
|
|
const ta = a.addedAt ? new Date(a.addedAt).getTime() : 0;
|
|
const tb = b.addedAt ? new Date(b.addedAt).getTime() : 0;
|
|
return tb - ta;
|
|
});
|
|
}, [domains]);
|
|
|
|
return (
|
|
<View style={{ gap: 12 }}>
|
|
{/* Header: Section-Title + Slot-Counter + Add-Button (inline, neben SlotPill) */}
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<Text style={{ fontSize: 14, fontFamily: 'Nunito_700Bold', color: '#0a0a0a' }}>
|
|
{t('blocker.domain_section_title')}
|
|
</Text>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
<SlotPill tier={tier} />
|
|
{onAdd && (
|
|
<Pressable
|
|
onPress={tier.atLimit ? undefined : onAdd}
|
|
accessibilityLabel={t('blocker.domain_add_a11y')}
|
|
accessibilityState={{ disabled: tier.atLimit }}
|
|
disabled={tier.atLimit}
|
|
hitSlop={8}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
// atLimit → grau + 50% opacity (deutlich visuell disabled)
|
|
backgroundColor: tier.atLimit ? '#a3a3a3' : '#007AFF',
|
|
opacity: tier.atLimit ? 0.5 : 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Ionicons name="add" size={22} color="#fff" />
|
|
</View>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Progress-Bar — 3-stufige Color-Schwelle: <60% grün, 60-90% orange, >=90% rot */}
|
|
{(() => {
|
|
const pct = (tier.usedSlots / tier.domainLimit) * 100;
|
|
const barColor = pct >= 90 ? '#dc2626' : pct >= 60 ? '#f59e0b' : '#16a34a';
|
|
return (
|
|
<View style={{ height: 4, borderRadius: 2, backgroundColor: '#f0f0f0', overflow: 'hidden' }}>
|
|
<View
|
|
style={{
|
|
height: '100%',
|
|
width: `${Math.min(100, pct)}%`,
|
|
backgroundColor: barColor,
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
})()}
|
|
|
|
{/* Limit-Reached Upsell (nur Free) */}
|
|
{tier.atLimit && tier.plan === 'free' && (
|
|
<Pressable
|
|
onPress={onUpgradePro}
|
|
style={({ pressed }) => ({
|
|
opacity: pressed ? 0.85 : 1,
|
|
})}
|
|
>
|
|
<View style={{
|
|
backgroundColor: '#eff6ff',
|
|
borderWidth: 1,
|
|
borderColor: '#bfdbfe',
|
|
borderRadius: 12,
|
|
padding: 12,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
}}>
|
|
<Ionicons name="lock-closed" size={18} color="#2563eb" />
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={{ fontSize: 13, fontFamily: 'Nunito_600SemiBold', color: '#1e3a8a' }}>
|
|
{t('blocker.domain_limit_title')}
|
|
</Text>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#3b82f6' }}>
|
|
{t('blocker.domain_limit_desc')}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</Pressable>
|
|
)}
|
|
|
|
{/* Empty State */}
|
|
{visible.length === 0 ? (
|
|
<View
|
|
style={{
|
|
paddingVertical: 32,
|
|
paddingHorizontal: 16,
|
|
borderRadius: 14,
|
|
borderWidth: 1,
|
|
borderStyle: 'dashed',
|
|
borderColor: '#d4d4d4',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Ionicons name="globe-outline" size={28} color="#a3a3a3" />
|
|
<Text
|
|
style={{
|
|
fontSize: 13,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: '#737373',
|
|
marginTop: 8,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
{t('blocker.domain_empty')}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<DomainTilesGrid
|
|
domains={visible}
|
|
tier={tier}
|
|
onSubmit={onSubmit}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// ─── SlotPill ─────────────────────────────────────────────────────────────
|
|
|
|
function SlotPill({ tier }: { tier: Tier }) {
|
|
const bg = tier.atLimit ? '#fee2e2' : '#f5f5f5';
|
|
const fg = tier.atLimit ? '#dc2626' : '#525252';
|
|
return (
|
|
<View
|
|
style={{
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 3,
|
|
borderRadius: 999,
|
|
backgroundColor: bg,
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: fg }}>
|
|
{tier.usedSlots}/{tier.domainLimit}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// ─── Tiles ────────────────────────────────────────────────────────────────
|
|
|
|
function DomainTilesGrid({
|
|
domains,
|
|
tier,
|
|
onSubmit,
|
|
}: {
|
|
domains: CustomDomain[];
|
|
tier: Tier;
|
|
onSubmit?: (id: string) => Promise<{ ok: boolean }>;
|
|
}) {
|
|
// 3-Spalten-Grid via flex-wrap. Parent ScrollView (in blocker.tsx) handles scroll —
|
|
// KEIN nested ScrollView hier, sonst collabiert der Layout-Pass weil ScrollView
|
|
// inner-content-view keine definierte Width für %-basierte Tile-Widths hat.
|
|
return (
|
|
<View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 14 }}>
|
|
{domains.map((d) => (
|
|
<View key={d.id} style={{ width: '33.333%', paddingHorizontal: 4 }}>
|
|
<DomainTile domain={d} tier={tier} onSubmit={onSubmit} />
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function DomainTile({
|
|
domain,
|
|
tier,
|
|
onSubmit,
|
|
}: {
|
|
domain: CustomDomain;
|
|
tier: Tier;
|
|
onSubmit?: (id: string) => Promise<{ ok: boolean }>;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [imgError, setImgError] = useState(false);
|
|
const [successVisible, setSuccessVisible] = useState(false);
|
|
const [successContent, setSuccessContent] = useState<{ title: string; message: string }>({
|
|
title: '',
|
|
message: '',
|
|
});
|
|
const [confirmVisible, setConfirmVisible] = useState(false);
|
|
const stripped = domain.domain.replace(/^www\./, '');
|
|
|
|
const isLegend = tier.plan === 'legend';
|
|
|
|
// statusColor wird auf Badge + Button angewendet.
|
|
// iOS-native: blue (active), orange (submitted), red (rejected).
|
|
const statusColor = (() => {
|
|
switch (domain.status) {
|
|
case 'submitted':
|
|
return '#f59e0b'; // orange (Voting/Prüfung)
|
|
case 'rejected':
|
|
return '#FF3B30'; // iOS-red
|
|
default:
|
|
return '#007AFF'; // iOS-blue (active, "freigeben"-CTA)
|
|
}
|
|
})();
|
|
|
|
// Time-Color: nur Status die Aufmerksamkeit brauchen (submitted/rejected) sind farbig.
|
|
// Active = neutral gray (settled state, kein Alarm-Indikator nötig).
|
|
const timeColor = domain.status === 'active' ? '#a3a3a3' : statusColor;
|
|
|
|
const badgeLabel = (() => {
|
|
switch (domain.status) {
|
|
case 'submitted':
|
|
return isLegend ? t('blocker.domain_badge_pruefung') : t('blocker.domain_badge_voting');
|
|
case 'rejected':
|
|
return t('blocker.domain_badge_rejected');
|
|
default:
|
|
return t('blocker.domain_badge_active');
|
|
}
|
|
})();
|
|
|
|
// Tier-aware Confirm-Dialog vor Freigabe — Pro geht zu Community-Voting,
|
|
// Legend direkt zum ReBreak-Team. Animiertes Modal statt nativem Alert.
|
|
const isResubmit = domain.status === 'rejected';
|
|
const confirmTitle = isLegend
|
|
? isResubmit
|
|
? t('blocker.domain_confirm_legend_resubmit')
|
|
: t('blocker.domain_confirm_legend_first')
|
|
: isResubmit
|
|
? t('blocker.domain_confirm_community_resubmit')
|
|
: t('blocker.domain_confirm_community_first');
|
|
const confirmMessage = isLegend
|
|
? t('blocker.domain_confirm_legend_message', { domain: stripped })
|
|
: t('blocker.domain_confirm_community_message', { domain: stripped });
|
|
|
|
function openConfirm() {
|
|
if (!onSubmit) return;
|
|
setConfirmVisible(true);
|
|
}
|
|
|
|
async function handleConfirm() {
|
|
setConfirmVisible(false);
|
|
if (!onSubmit) return;
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
const result = await onSubmit(domain.id);
|
|
if (result.ok) {
|
|
setSuccessContent({
|
|
title: isLegend ? t('blocker.domain_success_legend_title') : t('blocker.domain_success_community_title'),
|
|
message: isLegend
|
|
? t('blocker.domain_success_legend_message')
|
|
: t('blocker.domain_success_community_message'),
|
|
});
|
|
setSuccessVisible(true);
|
|
}
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
const isFreeAndUsed = tier.plan === 'free' && domain.status !== 'active';
|
|
const showSubmit = tier.canSubmit && domain.status === 'active';
|
|
const showResubmit = tier.canSubmit && domain.status === 'rejected';
|
|
const showInPruefungBtn = domain.status === 'submitted';
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
backgroundColor: '#fff',
|
|
borderWidth: 1,
|
|
borderColor: '#e5e5e5',
|
|
borderRadius: 14,
|
|
padding: 8,
|
|
// KEIN aspectRatio:1 mehr — der hat den Button auf 0 Höhe gepresst.
|
|
// minHeight statt fixer aspect-ratio: Tile darf wachsen wenn Button da ist,
|
|
// bleibt aber konsistent groß für visuelle Stabilität.
|
|
minHeight: 130,
|
|
opacity: isFreeAndUsed ? 0.55 : 1,
|
|
gap: 6,
|
|
}}
|
|
>
|
|
{/* Top-Row: Zeit links · Badge rechts — beide in Status-Color (matcht Bottom-Button). */}
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 4,
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
|
|
<Ionicons name="time-outline" size={9} color={timeColor} />
|
|
<Text style={{ fontSize: 9, fontFamily: 'Nunito_600SemiBold', color: timeColor }}>
|
|
{timeAgo(domain.addedAt)}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
paddingHorizontal: 5,
|
|
paddingVertical: 1,
|
|
borderRadius: 999,
|
|
backgroundColor: statusColor,
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 8, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
|
|
{badgeLabel}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Mitte: Favicon + Domain-Name (zentriert, flex-1) */}
|
|
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 4, paddingVertical: 8 }}>
|
|
{!imgError ? (
|
|
<Image
|
|
source={{ uri: `https://www.google.com/s2/favicons?domain=${stripped}&sz=128` }}
|
|
style={{ width: 26, height: 26, borderRadius: 5 }}
|
|
onError={() => setImgError(true)}
|
|
/>
|
|
) : (
|
|
<View
|
|
style={{
|
|
width: 26,
|
|
height: 26,
|
|
borderRadius: 5,
|
|
backgroundColor: '#525252',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 9, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
|
|
{stripped.slice(0, 2).toUpperCase()}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
<Text
|
|
numberOfLines={1}
|
|
style={{
|
|
fontSize: 10,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: '#0a0a0a',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
{stripped}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Bottom-Slot: ALWAYS rendered Container (32px), Inhalt je nach Status.
|
|
* Garantiert konsistente Tile-Höhe + sichtbaren Button. */}
|
|
<View style={{ height: 28 }}>
|
|
{showInPruefungBtn && (
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
backgroundColor: '#f59e0b',
|
|
borderRadius: 6,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 10, fontFamily: 'Nunito_600SemiBold', color: '#fff' }}>
|
|
{isLegend ? t('blocker.domain_btn_rebreak_prueft') : t('blocker.domain_btn_in_abstimmung')}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{showSubmit && (
|
|
<Pressable
|
|
onPress={openConfirm}
|
|
disabled={submitting}
|
|
style={{
|
|
flex: 1,
|
|
borderRadius: 6,
|
|
backgroundColor: 'transparent',
|
|
borderWidth: 1,
|
|
borderColor: '#007AFF',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
opacity: submitting ? 0.5 : 1,
|
|
}}
|
|
>
|
|
{submitting ? (
|
|
<ActivityIndicator size="small" color="#007AFF" />
|
|
) : (
|
|
<Text style={{ fontSize: 10, fontFamily: 'Nunito_600SemiBold', color: '#007AFF' }}>
|
|
{t('blocker.domain_btn_freigeben')}
|
|
</Text>
|
|
)}
|
|
</Pressable>
|
|
)}
|
|
{showResubmit && (
|
|
<Pressable
|
|
onPress={openConfirm}
|
|
disabled={submitting}
|
|
style={{
|
|
flex: 1,
|
|
borderRadius: 6,
|
|
backgroundColor: 'transparent',
|
|
borderWidth: 1,
|
|
borderColor: '#FF3B30',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
opacity: submitting ? 0.5 : 1,
|
|
}}
|
|
>
|
|
{submitting ? (
|
|
<ActivityIndicator size="small" color="#FF3B30" />
|
|
) : (
|
|
<Text style={{ fontSize: 10, fontFamily: 'Nunito_600SemiBold', color: '#FF3B30' }}>
|
|
{t('blocker.domain_btn_erneut')}
|
|
</Text>
|
|
)}
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
|
|
{/* Confirm-Modal vor Submit (statt nativer Alert.alert — selber animation-Style wie SuccessAlert) */}
|
|
<ConfirmAlert
|
|
visible={confirmVisible}
|
|
title={confirmTitle}
|
|
message={confirmMessage}
|
|
confirmLabel={t('blocker.domain_btn_freigeben')}
|
|
icon={isLegend ? 'shield-checkmark' : 'people'}
|
|
iconColor="#f59e0b"
|
|
onConfirm={handleConfirm}
|
|
onCancel={() => setConfirmVisible(false)}
|
|
/>
|
|
|
|
{/* Success-Alert mit animiertem Check-Icon nach erfolgreichem Submit */}
|
|
<SuccessAlert
|
|
visible={successVisible}
|
|
title={successContent.title}
|
|
message={successContent.message}
|
|
onClose={() => setSuccessVisible(false)}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|