108 lines
4.0 KiB
TypeScript
108 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Button } from '@tamagui/button';
|
|
import { Input } from '@tamagui/input';
|
|
import { Card } from '@tamagui/card';
|
|
import { useTranslation } from '@/guest/i18n/useTranslation';
|
|
import { useEventData } from '../context/EventDataContext';
|
|
import { useGuestIdentity } from '../context/GuestIdentityContext';
|
|
import EventLogo from '../components/EventLogo';
|
|
import { useGuestThemeVariant } from '../lib/guestTheme';
|
|
|
|
export default function ProfileSetupScreen() {
|
|
const { token } = useParams<{ token: string }>();
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation();
|
|
const { event, status } = useEventData();
|
|
const identity = useGuestIdentity();
|
|
const { isDark } = useGuestThemeVariant();
|
|
const primaryText = isDark ? '#F8FAFF' : '#0F172A';
|
|
const mutedText = isDark ? 'rgba(226, 232, 240, 0.7)' : 'rgba(15, 23, 42, 0.6)';
|
|
const cardBackground = isDark ? 'rgba(15, 23, 42, 0.75)' : 'rgba(255, 255, 255, 0.9)';
|
|
const cardBorder = isDark ? 'rgba(148, 163, 184, 0.18)' : 'rgba(15, 23, 42, 0.12)';
|
|
const [nameDraft, setNameDraft] = React.useState(identity.name ?? '');
|
|
const [saving, setSaving] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (identity.hydrated) {
|
|
setNameDraft(identity.name ?? '');
|
|
}
|
|
}, [identity.hydrated, identity.name]);
|
|
|
|
const handleSubmit = React.useCallback(() => {
|
|
if (!token) {
|
|
return;
|
|
}
|
|
const trimmed = nameDraft.trim();
|
|
if (!trimmed) {
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
identity.setName(trimmed);
|
|
navigate(`/e/${encodeURIComponent(token)}`);
|
|
}, [identity, nameDraft, navigate, token]);
|
|
|
|
if (status === 'loading' || status === 'idle') {
|
|
return (
|
|
<YStack flex={1} minHeight="100vh" justifyContent="center" padding="$5" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
|
|
<Text color={mutedText}>{t('profileSetup.loading')}</Text>
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
if (!event) {
|
|
return (
|
|
<YStack flex={1} minHeight="100vh" justifyContent="center" padding="$5" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
|
|
<Text color="#FCA5A5">{t('profileSetup.error.default')}</Text>
|
|
<Button onPress={() => navigate('/event')} marginTop="$3">
|
|
{t('profileSetup.error.backToStart')}
|
|
</Button>
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<YStack flex={1} minHeight="100vh" padding="$5" justifyContent="center" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
|
|
<YStack gap="$5" maxWidth={420} width="100%" alignSelf="center">
|
|
<YStack gap="$2">
|
|
<XStack alignItems="center" gap="$3">
|
|
<EventLogo name={event.name} icon={event.type?.icon ?? null} size="m" />
|
|
<Text fontSize="$7" fontFamily="$display" fontWeight="$9" color={primaryText}>
|
|
{event.name}
|
|
</Text>
|
|
</XStack>
|
|
<Text color={mutedText}>
|
|
{t('profileSetup.card.description')}
|
|
</Text>
|
|
</YStack>
|
|
|
|
<Card padding="$4" backgroundColor={cardBackground} borderColor={cardBorder} borderWidth={1}>
|
|
<YStack gap="$3">
|
|
<Text color={mutedText} fontSize="$3">
|
|
{t('profileSetup.form.label')}
|
|
</Text>
|
|
<Input
|
|
value={nameDraft}
|
|
onChangeText={setNameDraft}
|
|
placeholder={t('profileSetup.form.placeholder')}
|
|
backgroundColor={isDark ? 'rgba(15, 23, 42, 0.6)' : 'rgba(15, 23, 42, 0.05)'}
|
|
borderColor={cardBorder}
|
|
color={primaryText}
|
|
/>
|
|
<Button
|
|
onPress={handleSubmit}
|
|
disabled={!nameDraft.trim() || saving}
|
|
backgroundColor="$primary"
|
|
color="#FFFFFF"
|
|
>
|
|
{saving ? t('profileSetup.form.submitting') : t('profileSetup.form.submit')}
|
|
</Button>
|
|
</YStack>
|
|
</Card>
|
|
</YStack>
|
|
</YStack>
|
|
);
|
|
}
|