528 lines
18 KiB
TypeScript
528 lines
18 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Image as ImageIcon, RefreshCcw, UploadCloud, Trash2, ChevronDown, Save } from 'lucide-react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
|
import { MobileShell } from './components/MobileShell';
|
|
import { MobileCard, CTAButton } from './components/Primitives';
|
|
import { TenantEvent, getEvent, updateEvent, getTenantFonts, TenantFont } from '../api';
|
|
import { isAuthError } from '../auth/tokens';
|
|
import { ApiError, getApiErrorMessage } from '../lib/apiError';
|
|
import { MobileSheet } from './components/Sheet';
|
|
import toast from 'react-hot-toast';
|
|
|
|
type BrandingForm = {
|
|
primary: string;
|
|
accent: string;
|
|
headingFont: string;
|
|
bodyFont: string;
|
|
logoDataUrl: string;
|
|
};
|
|
|
|
export default function MobileBrandingPage() {
|
|
const { slug: slugParam } = useParams<{ slug?: string }>();
|
|
const slug = slugParam ?? null;
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation('management');
|
|
|
|
const [event, setEvent] = React.useState<TenantEvent | null>(null);
|
|
const [form, setForm] = React.useState<BrandingForm>({
|
|
primary: '#007AFF',
|
|
accent: '#5AD2F4',
|
|
headingFont: '',
|
|
bodyFont: '',
|
|
logoDataUrl: '',
|
|
});
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [saving, setSaving] = React.useState(false);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [showFontsSheet, setShowFontsSheet] = React.useState(false);
|
|
const [fontField, setFontField] = React.useState<'heading' | 'body'>('heading');
|
|
const [fonts, setFonts] = React.useState<TenantFont[]>([]);
|
|
const [fontsLoading, setFontsLoading] = React.useState(false);
|
|
const [fontsLoaded, setFontsLoaded] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (!slug) return;
|
|
(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await getEvent(slug);
|
|
setEvent(data);
|
|
setForm(extractBranding(data));
|
|
setError(null);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Branding konnte nicht geladen werden.')));
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
})();
|
|
}, [slug, t]);
|
|
|
|
React.useEffect(() => {
|
|
if (!showFontsSheet || fontsLoaded) return;
|
|
setFontsLoading(true);
|
|
getTenantFonts()
|
|
.then((data) => setFonts(data ?? []))
|
|
.catch(() => undefined)
|
|
.finally(() => {
|
|
setFontsLoading(false);
|
|
setFontsLoaded(true);
|
|
});
|
|
}, [showFontsSheet, fontsLoaded]);
|
|
|
|
const previewTitle = event ? renderName(event.name) : t('events.placeholders.untitled', 'Unbenanntes Event');
|
|
const previewHeadingFont = form.headingFont || 'Montserrat';
|
|
const previewBodyFont = form.bodyFont || 'Montserrat';
|
|
|
|
async function handleSave() {
|
|
if (!event?.slug) return;
|
|
const eventTypeId = event.event_type_id ?? event.event_type?.id ?? null;
|
|
if (!eventTypeId) {
|
|
const msg = t('events.errors.missingType', 'Event type fehlt. Speichere das Event erneut im Admin.');
|
|
setError(msg);
|
|
toast.error(msg);
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
setError(null);
|
|
try {
|
|
const payload = {
|
|
name: typeof event.name === 'string' ? event.name : renderName(event.name),
|
|
slug: event.slug,
|
|
event_type_id: eventTypeId,
|
|
event_date: event.event_date ?? undefined,
|
|
status: event.status ?? 'draft',
|
|
is_active: event.is_active ?? undefined,
|
|
};
|
|
const settings = { ...(event.settings ?? {}) };
|
|
settings.branding = {
|
|
...(typeof settings.branding === 'object' ? (settings.branding as Record<string, unknown>) : {}),
|
|
primary_color: form.primary,
|
|
accent_color: form.accent,
|
|
heading_font: form.headingFont,
|
|
body_font: form.bodyFont,
|
|
typography: {
|
|
...(typeof (settings.branding as Record<string, unknown> | undefined)?.typography === 'object'
|
|
? ((settings.branding as Record<string, unknown>).typography as Record<string, unknown>)
|
|
: {}),
|
|
heading: form.headingFont,
|
|
body: form.bodyFont,
|
|
},
|
|
palette: {
|
|
...(typeof (settings.branding as Record<string, unknown> | undefined)?.palette === 'object'
|
|
? ((settings.branding as Record<string, unknown>).palette as Record<string, unknown>)
|
|
: {}),
|
|
primary: form.primary,
|
|
secondary: form.accent,
|
|
},
|
|
logo_data_url: form.logoDataUrl || null,
|
|
logo: form.logoDataUrl
|
|
? {
|
|
mode: 'upload',
|
|
value: form.logoDataUrl,
|
|
position: 'center',
|
|
size: 'm',
|
|
}
|
|
: null,
|
|
};
|
|
const updated = await updateEvent(event.slug, {
|
|
...payload,
|
|
settings,
|
|
});
|
|
setEvent(updated);
|
|
toast.success(t('events.branding.saveSuccess', 'Branding gespeichert'));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
let message = getApiErrorMessage(err, t('events.errors.saveFailed', 'Branding konnte nicht gespeichert werden.'));
|
|
if (err instanceof ApiError && err.meta?.errors && typeof err.meta.errors === 'object') {
|
|
const allErrors = Object.values(err.meta.errors as Record<string, unknown>)
|
|
.flat()
|
|
.filter((val): val is string => typeof val === 'string');
|
|
if (allErrors.length) {
|
|
message = allErrors.join('\n');
|
|
}
|
|
}
|
|
setError(message);
|
|
toast.error(message, { duration: 5000 });
|
|
}
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
function handleReset() {
|
|
if (event) {
|
|
setForm(extractBranding(event));
|
|
}
|
|
}
|
|
|
|
return (
|
|
<MobileShell
|
|
activeTab="home"
|
|
title={t('events.branding.titleShort', 'Branding')}
|
|
onBack={() => navigate(-1)}
|
|
headerActions={
|
|
<Pressable disabled={saving} onPress={() => handleSave()}>
|
|
<Save size={18} color="#007AFF" />
|
|
</Pressable>
|
|
}
|
|
>
|
|
{error ? (
|
|
<MobileCard>
|
|
<Text fontWeight="700" color="#b91c1c">
|
|
{error}
|
|
</Text>
|
|
</MobileCard>
|
|
) : null}
|
|
|
|
<MobileCard space="$3">
|
|
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
|
{t('events.branding.previewTitle', 'Guest App Preview')}
|
|
</Text>
|
|
<YStack borderRadius={16} borderWidth={1} borderColor="#e5e7eb" backgroundColor="#f8fafc" padding="$3" space="$2" alignItems="center">
|
|
<YStack width="100%" borderRadius={12} backgroundColor="white" borderWidth={1} borderColor="#e5e7eb" overflow="hidden">
|
|
<YStack backgroundColor={form.primary} height={64} />
|
|
<YStack padding="$3" space="$1.5">
|
|
<Text fontSize="$md" fontWeight="800" color="#111827" style={{ fontFamily: previewHeadingFont }}>
|
|
{previewTitle}
|
|
</Text>
|
|
<Text fontSize="$sm" color="#4b5563" style={{ fontFamily: previewBodyFont }}>
|
|
{t('events.branding.previewSubtitle', 'Aktuelle Farben & Schriften')}
|
|
</Text>
|
|
<XStack space="$2" marginTop="$1">
|
|
<ColorSwatch color={form.primary} label={t('events.branding.primary', 'Primary')} />
|
|
<ColorSwatch color={form.accent} label={t('events.branding.accent', 'Accent')} />
|
|
</XStack>
|
|
</YStack>
|
|
</YStack>
|
|
</YStack>
|
|
</MobileCard>
|
|
|
|
<MobileCard space="$3">
|
|
<Text fontSize="$md" fontWeight="800" color="#111827">
|
|
{t('events.branding.colors', 'Colors')}
|
|
</Text>
|
|
<ColorField
|
|
label={t('events.branding.primary', 'Primary Color')}
|
|
value={form.primary}
|
|
onChange={(value) => setForm((prev) => ({ ...prev, primary: value }))}
|
|
/>
|
|
<ColorField
|
|
label={t('events.branding.accent', 'Accent Color')}
|
|
value={form.accent}
|
|
onChange={(value) => setForm((prev) => ({ ...prev, accent: value }))}
|
|
/>
|
|
</MobileCard>
|
|
|
|
<MobileCard space="$3">
|
|
<Text fontSize="$md" fontWeight="800" color="#111827">
|
|
{t('events.branding.fonts', 'Fonts')}
|
|
</Text>
|
|
<InputField
|
|
label={t('events.branding.headingFont', 'Headline Font')}
|
|
value={form.headingFont}
|
|
placeholder="SF Pro Display"
|
|
onChange={(value) => setForm((prev) => ({ ...prev, headingFont: value }))}
|
|
onPicker={() => {
|
|
setFontField('heading');
|
|
setShowFontsSheet(true);
|
|
}}
|
|
/>
|
|
<InputField
|
|
label={t('events.branding.bodyFont', 'Body Font')}
|
|
value={form.bodyFont}
|
|
placeholder="SF Pro Text"
|
|
onChange={(value) => setForm((prev) => ({ ...prev, bodyFont: value }))}
|
|
onPicker={() => {
|
|
setFontField('body');
|
|
setShowFontsSheet(true);
|
|
}}
|
|
/>
|
|
</MobileCard>
|
|
|
|
<MobileCard space="$3">
|
|
<Text fontSize="$md" fontWeight="800" color="#111827">
|
|
{t('events.branding.logo', 'Logo')}
|
|
</Text>
|
|
<YStack
|
|
borderRadius={14}
|
|
borderWidth={1}
|
|
borderColor="#e5e7eb"
|
|
backgroundColor="#f8fafc"
|
|
padding="$3"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
space="$2"
|
|
>
|
|
{form.logoDataUrl ? (
|
|
<>
|
|
<img src={form.logoDataUrl} alt="Logo" style={{ maxHeight: 80, maxWidth: '100%', objectFit: 'contain' }} />
|
|
<XStack space="$2">
|
|
<CTAButton
|
|
label={t('events.branding.replaceLogo', 'Replace logo')}
|
|
onPress={() => document.getElementById('branding-logo-input')?.click()}
|
|
/>
|
|
<Pressable onPress={() => setForm((prev) => ({ ...prev, logoDataUrl: '' }))}>
|
|
<XStack
|
|
alignItems="center"
|
|
space="$1.5"
|
|
paddingHorizontal="$3"
|
|
paddingVertical="$2"
|
|
borderRadius={12}
|
|
borderWidth={1}
|
|
borderColor="#e5e7eb"
|
|
>
|
|
<Trash2 size={16} color="#b91c1c" />
|
|
<Text fontSize="$sm" color="#b91c1c" fontWeight="700">
|
|
{t('events.branding.removeLogo', 'Remove')}
|
|
</Text>
|
|
</XStack>
|
|
</Pressable>
|
|
</XStack>
|
|
</>
|
|
) : (
|
|
<>
|
|
<ImageIcon size={28} color="#94a3b8" />
|
|
<Text fontSize="$sm" color="#4b5563" textAlign="center">
|
|
{t('events.branding.logoHint', 'Upload a logo to brand guest invites and QR posters.')}
|
|
</Text>
|
|
<Pressable onPress={() => document.getElementById('branding-logo-input')?.click()}>
|
|
<XStack
|
|
alignItems="center"
|
|
space="$2"
|
|
paddingHorizontal="$3.5"
|
|
paddingVertical="$2.5"
|
|
borderRadius={12}
|
|
borderWidth={1}
|
|
borderColor="#e5e7eb"
|
|
backgroundColor="white"
|
|
>
|
|
<UploadCloud size={18} color="#007AFF" />
|
|
<Text fontSize="$sm" color="#007AFF" fontWeight="700">
|
|
{t('events.branding.uploadLogo', 'Upload logo (max. 1 MB)')}
|
|
</Text>
|
|
</XStack>
|
|
</Pressable>
|
|
</>
|
|
)}
|
|
<input
|
|
id="branding-logo-input"
|
|
type="file"
|
|
accept="image/*"
|
|
style={{ display: 'none' }}
|
|
onChange={(event) => {
|
|
const file = event.target.files?.[0];
|
|
if (!file) return;
|
|
if (file.size > 1024 * 1024) {
|
|
setError(t('events.branding.logoTooLarge', 'Logo must be under 1 MB.'));
|
|
return;
|
|
}
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
const nextLogo =
|
|
typeof reader.result === 'string'
|
|
? reader.result
|
|
: typeof reader.result === 'object' && reader.result !== null
|
|
? String(reader.result)
|
|
: '';
|
|
setForm((prev) => ({ ...prev, logoDataUrl: nextLogo }));
|
|
setError(null);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}}
|
|
/>
|
|
</YStack>
|
|
</MobileCard>
|
|
|
|
<YStack space="$2">
|
|
<CTAButton label={saving ? t('events.branding.saving', 'Saving...') : t('events.branding.save', 'Save Branding')} onPress={() => handleSave()} />
|
|
<Pressable disabled={loading || saving} onPress={handleReset}>
|
|
<XStack
|
|
height={52}
|
|
borderRadius={14}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
backgroundColor="white"
|
|
borderWidth={1}
|
|
borderColor="#e5e7eb"
|
|
space="$2"
|
|
>
|
|
<RefreshCcw size={16} color="#111827" />
|
|
<Text fontSize="$sm" color="#111827" fontWeight="700">
|
|
{t('events.branding.reset', 'Reset to Defaults')}
|
|
</Text>
|
|
</XStack>
|
|
</Pressable>
|
|
</YStack>
|
|
|
|
<MobileSheet
|
|
open={showFontsSheet}
|
|
onClose={() => setShowFontsSheet(false)}
|
|
title={t('events.branding.fontPicker', 'Select font')}
|
|
footer={null}
|
|
bottomOffsetPx={120}
|
|
>
|
|
<YStack space="$2">
|
|
{fontsLoading ? (
|
|
Array.from({ length: 4 }).map((_, idx) => <MobileCard key={`font-sk-${idx}`} height={48} opacity={0.6} />)
|
|
) : fonts.length === 0 ? (
|
|
<Text fontSize="$sm" color="#4b5563">
|
|
{t('events.branding.noFonts', 'Keine Schriftarten gefunden.')}
|
|
</Text>
|
|
) : (
|
|
fonts.map((font) => (
|
|
<Pressable
|
|
key={font.family}
|
|
onPress={() => {
|
|
setForm((prev) => ({
|
|
...prev,
|
|
[fontField === 'heading' ? 'headingFont' : 'bodyFont']: font.family,
|
|
}));
|
|
setShowFontsSheet(false);
|
|
}}
|
|
>
|
|
<XStack alignItems="center" justifyContent="space-between" paddingVertical="$2">
|
|
<YStack>
|
|
<Text fontSize="$sm" color="#111827" style={{ fontFamily: font.family }}>
|
|
{font.family}
|
|
</Text>
|
|
{font.variants?.length ? (
|
|
<Text fontSize="$xs" color="#6b7280" style={{ fontFamily: font.family }}>
|
|
{font.variants.map((v) => v.style ?? v.weight ?? '').filter(Boolean).join(', ')}
|
|
</Text>
|
|
) : null}
|
|
</YStack>
|
|
{form[fontField === 'heading' ? 'headingFont' : 'bodyFont'] === font.family ? (
|
|
<Text fontSize="$xs" color="#007AFF">
|
|
{t('common.active', 'Active')}
|
|
</Text>
|
|
) : null}
|
|
</XStack>
|
|
</Pressable>
|
|
))
|
|
)}
|
|
</YStack>
|
|
</MobileSheet>
|
|
</MobileShell>
|
|
);
|
|
}
|
|
|
|
function extractBranding(event: TenantEvent): BrandingForm {
|
|
const source = (event.settings as Record<string, unknown>) ?? {};
|
|
const branding = (source.branding as Record<string, unknown>) ?? source;
|
|
const readColor = (key: string, fallback: string) => {
|
|
const value = branding[key];
|
|
return typeof value === 'string' && value.startsWith('#') ? value : fallback;
|
|
};
|
|
const readText = (key: string) => {
|
|
const value = branding[key];
|
|
return typeof value === 'string' ? value : '';
|
|
};
|
|
return {
|
|
primary: readColor('primary_color', '#007AFF'),
|
|
accent: readColor('accent_color', '#5AD2F4'),
|
|
headingFont: readText('heading_font'),
|
|
bodyFont: readText('body_font'),
|
|
logoDataUrl: readText('logo_data_url'),
|
|
};
|
|
}
|
|
|
|
function renderName(name: TenantEvent['name']): string {
|
|
if (typeof name === 'string') return name;
|
|
if (name && typeof name === 'object') {
|
|
return name.de ?? name.en ?? Object.values(name)[0] ?? '';
|
|
}
|
|
return '';
|
|
}
|
|
|
|
function ColorField({ label, value, onChange }: { label: string; value: string; onChange: (next: string) => void }) {
|
|
return (
|
|
<YStack space="$2">
|
|
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
|
{label}
|
|
</Text>
|
|
<XStack alignItems="center" space="$2">
|
|
<input
|
|
type="color"
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
style={{ width: 52, height: 52, borderRadius: 12, border: '1px solid #e5e7eb', background: 'white' }}
|
|
/>
|
|
<Text fontSize="$sm" color="#4b5563">
|
|
{value}
|
|
</Text>
|
|
</XStack>
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
function ColorSwatch({ color, label }: { color: string; label: string }) {
|
|
return (
|
|
<YStack alignItems="center" space="$1">
|
|
<YStack width={40} height={40} borderRadius={12} borderWidth={1} borderColor="#e5e7eb" backgroundColor={color} />
|
|
<Text fontSize="$xs" color="#4b5563">
|
|
{label}
|
|
</Text>
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
function InputField({
|
|
label,
|
|
value,
|
|
placeholder,
|
|
onChange,
|
|
onPicker,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
placeholder?: string;
|
|
onChange: (next: string) => void;
|
|
onPicker?: () => void;
|
|
}) {
|
|
return (
|
|
<YStack space="$2">
|
|
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
|
{label}
|
|
</Text>
|
|
<XStack
|
|
alignItems="center"
|
|
borderRadius={12}
|
|
borderWidth={1}
|
|
borderColor="#e5e7eb"
|
|
paddingLeft="$3"
|
|
paddingRight="$2"
|
|
height={48}
|
|
backgroundColor="white"
|
|
space="$2"
|
|
>
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
placeholder={placeholder}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
style={{
|
|
flex: 1,
|
|
height: '100%',
|
|
border: 'none',
|
|
outline: 'none',
|
|
fontSize: 14,
|
|
background: 'transparent',
|
|
}}
|
|
onFocus={onPicker}
|
|
/>
|
|
{onPicker ? (
|
|
<Pressable onPress={onPicker}>
|
|
<ChevronDown size={16} color="#007AFF" />
|
|
</Pressable>
|
|
) : null}
|
|
</XStack>
|
|
</YStack>
|
|
);
|
|
}
|