added watermark settings tab on the branding page and added more package details to the billing page, added a new guest notifications page
This commit is contained in:
Codex Agent
@@ -1,15 +1,16 @@
|
||||
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 { Image as ImageIcon, RefreshCcw, UploadCloud, Trash2, ChevronDown, Save, Droplets, Lock } 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 { TenantEvent, getEvent, updateEvent, getTenantFonts, TenantFont, WatermarkSettings } from '../api';
|
||||
import { isAuthError } from '../auth/tokens';
|
||||
import { ApiError, getApiErrorMessage } from '../lib/apiError';
|
||||
import { isBrandingAllowed } from '../lib/events';
|
||||
import { MobileSheet } from './components/Sheet';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
@@ -21,6 +22,31 @@ type BrandingForm = {
|
||||
logoDataUrl: string;
|
||||
};
|
||||
|
||||
type WatermarkPosition =
|
||||
| 'top-left'
|
||||
| 'top-center'
|
||||
| 'top-right'
|
||||
| 'middle-left'
|
||||
| 'center'
|
||||
| 'middle-right'
|
||||
| 'bottom-left'
|
||||
| 'bottom-center'
|
||||
| 'bottom-right';
|
||||
|
||||
type WatermarkForm = {
|
||||
mode: 'base' | 'custom' | 'off';
|
||||
assetPath: string;
|
||||
assetDataUrl: string;
|
||||
position: WatermarkPosition;
|
||||
opacity: number;
|
||||
scale: number;
|
||||
padding: number;
|
||||
offsetX: number;
|
||||
offsetY: number;
|
||||
};
|
||||
|
||||
type TabKey = 'branding' | 'watermark';
|
||||
|
||||
export default function MobileBrandingPage() {
|
||||
const { slug: slugParam } = useParams<{ slug?: string }>();
|
||||
const slug = slugParam ?? null;
|
||||
@@ -35,6 +61,18 @@ export default function MobileBrandingPage() {
|
||||
bodyFont: '',
|
||||
logoDataUrl: '',
|
||||
});
|
||||
const [watermarkForm, setWatermarkForm] = React.useState<WatermarkForm>({
|
||||
mode: 'base',
|
||||
assetPath: '',
|
||||
assetDataUrl: '',
|
||||
position: 'bottom-right',
|
||||
opacity: 0.25,
|
||||
scale: 0.2,
|
||||
padding: 16,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
});
|
||||
const [activeTab, setActiveTab] = React.useState<TabKey>('branding');
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [saving, setSaving] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
@@ -52,6 +90,7 @@ export default function MobileBrandingPage() {
|
||||
const data = await getEvent(slug);
|
||||
setEvent(data);
|
||||
setForm(extractBranding(data));
|
||||
setWatermarkForm(extractWatermark(data));
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
@@ -78,6 +117,9 @@ export default function MobileBrandingPage() {
|
||||
const previewTitle = event ? renderName(event.name) : t('events.placeholders.untitled', 'Unbenanntes Event');
|
||||
const previewHeadingFont = form.headingFont || 'Montserrat';
|
||||
const previewBodyFont = form.bodyFont || 'Montserrat';
|
||||
const watermarkAllowed = event?.package?.watermark_allowed !== false;
|
||||
const brandingAllowed = isBrandingAllowed(event ?? null);
|
||||
const watermarkLocked = watermarkAllowed && !brandingAllowed;
|
||||
|
||||
async function handleSave() {
|
||||
if (!event?.slug) return;
|
||||
@@ -91,6 +133,14 @@ export default function MobileBrandingPage() {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (watermarkAllowed && brandingAllowed && watermarkForm.mode === 'custom' && !watermarkForm.assetDataUrl && !watermarkForm.assetPath) {
|
||||
const msg = t('events.watermark.errors.noAsset', 'Bitte lade zuerst ein Wasserzeichen hoch.');
|
||||
setError(msg);
|
||||
setActiveTab('watermark');
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: typeof event.name === 'string' ? event.name : renderName(event.name),
|
||||
slug: event.slug,
|
||||
@@ -130,6 +180,10 @@ export default function MobileBrandingPage() {
|
||||
}
|
||||
: null,
|
||||
};
|
||||
const watermarkPayload = buildWatermarkPayload(watermarkForm, watermarkAllowed, brandingAllowed);
|
||||
if (watermarkPayload) {
|
||||
settings.watermark = watermarkPayload;
|
||||
}
|
||||
const updated = await updateEvent(event.slug, {
|
||||
...payload,
|
||||
settings,
|
||||
@@ -158,9 +212,191 @@ export default function MobileBrandingPage() {
|
||||
function handleReset() {
|
||||
if (event) {
|
||||
setForm(extractBranding(event));
|
||||
setWatermarkForm(extractWatermark(event));
|
||||
}
|
||||
}
|
||||
|
||||
function renderWatermarkTab() {
|
||||
const policyLabel = watermarkAllowed ? 'basic' : 'none';
|
||||
const disabled = !watermarkAllowed;
|
||||
const controlsLocked = watermarkLocked || disabled;
|
||||
const mode = controlsLocked ? 'base' : watermarkForm.mode;
|
||||
|
||||
return (
|
||||
<>
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||||
{t('events.watermark.previewTitle', 'Watermark Preview')}
|
||||
</Text>
|
||||
<WatermarkPreview
|
||||
position={watermarkForm.position}
|
||||
scale={watermarkForm.scale}
|
||||
opacity={watermarkForm.opacity}
|
||||
padding={watermarkForm.padding}
|
||||
offsetX={watermarkForm.offsetX}
|
||||
offsetY={watermarkForm.offsetY}
|
||||
/>
|
||||
</MobileCard>
|
||||
|
||||
{disabled ? (
|
||||
<InfoBadge
|
||||
icon={<Lock size={16} color="#b91c1c" />}
|
||||
text={t('events.watermark.lockedDisabled', 'Kein Wasserzeichen in diesem Paket.')}
|
||||
tone="danger"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{watermarkLocked ? (
|
||||
<InfoBadge
|
||||
icon={<Lock size={16} color="#111827" />}
|
||||
text={t('events.watermark.lockedBranding', 'Custom-Wasserzeichen ist im aktuellen Paket gesperrt. Standard wird genutzt.')}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color="#111827">
|
||||
{t('events.watermark.title', 'Wasserzeichen')}
|
||||
</Text>
|
||||
|
||||
<InputField
|
||||
label={t('events.watermark.mode', 'Modus')}
|
||||
value={mode}
|
||||
onChange={(value) => {
|
||||
if (controlsLocked) return;
|
||||
if (value === 'custom' || value === 'base' || value === 'off') {
|
||||
setWatermarkForm((prev) => ({ ...prev, mode: value as WatermarkForm['mode'] }));
|
||||
}
|
||||
}}
|
||||
onPicker={() => undefined}
|
||||
>
|
||||
<select
|
||||
value={mode}
|
||||
disabled={controlsLocked}
|
||||
onChange={(event) => setWatermarkForm((prev) => ({ ...prev, mode: event.target.value as WatermarkForm['mode'] }))}
|
||||
style={{ width: '100%', height: 40, border: 'none', outline: 'none', background: 'transparent' }}
|
||||
>
|
||||
<option value="base">{t('events.watermark.modeBase', 'Basis')}</option>
|
||||
<option value="custom" disabled={watermarkLocked}>
|
||||
{t('events.watermark.modeCustom', 'Eigenes Wasserzeichen')}
|
||||
</option>
|
||||
<option value="off" disabled={policyLabel === 'basic'}>
|
||||
{t('events.watermark.modeOff', 'Deaktiviert')}
|
||||
</option>
|
||||
</select>
|
||||
</InputField>
|
||||
|
||||
{mode === 'custom' && !controlsLocked ? (
|
||||
<YStack space="$2">
|
||||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||||
{t('events.watermark.upload', 'Wasserzeichen hochladen')}
|
||||
</Text>
|
||||
<Pressable onPress={() => document.getElementById('watermark-upload-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">
|
||||
{watermarkForm.assetPath
|
||||
? t('events.watermark.replace', 'Wasserzeichen ersetzen')
|
||||
: t('events.watermark.uploadCta', 'PNG/SVG/JPG (max. 3 MB)')}
|
||||
</Text>
|
||||
</XStack>
|
||||
</Pressable>
|
||||
<input
|
||||
id="watermark-upload-input"
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp,image/svg+xml"
|
||||
style={{ display: 'none' }}
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
if (file.size > 3 * 1024 * 1024) {
|
||||
setError(t('events.watermark.errors.fileTooLarge', 'Wasserzeichen muss kleiner als 3 MB sein.'));
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const result = typeof reader.result === 'string' ? reader.result : '';
|
||||
setWatermarkForm((prev) => ({ ...prev, assetDataUrl: result, assetPath: '' }));
|
||||
setError(null);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}}
|
||||
/>
|
||||
<Text fontSize="$xs" color="#6b7280">
|
||||
{t('events.watermark.uploadHint', 'PNG mit transparenter Fläche empfohlen.')}
|
||||
</Text>
|
||||
</YStack>
|
||||
) : null}
|
||||
</MobileCard>
|
||||
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color="#111827">
|
||||
{t('events.watermark.placement', 'Position & Größe')}
|
||||
</Text>
|
||||
<PositionGrid
|
||||
value={watermarkForm.position}
|
||||
onChange={(next) => setWatermarkForm((prev) => ({ ...prev, position: next }))}
|
||||
disabled={controlsLocked}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label={t('events.watermark.size', 'Größe')}
|
||||
value={Math.round(watermarkForm.scale * 100)}
|
||||
min={5}
|
||||
max={60}
|
||||
step={1}
|
||||
onChange={(value) => setWatermarkForm((prev) => ({ ...prev, scale: value / 100 }))}
|
||||
disabled={controlsLocked}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label={t('events.watermark.opacity', 'Transparenz')}
|
||||
value={Math.round(watermarkForm.opacity * 100)}
|
||||
min={10}
|
||||
max={80}
|
||||
step={5}
|
||||
onChange={(value) => setWatermarkForm((prev) => ({ ...prev, opacity: value / 100 }))}
|
||||
disabled={controlsLocked}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label={t('events.watermark.padding', 'Abstand zum Rand')}
|
||||
value={watermarkForm.padding}
|
||||
min={0}
|
||||
max={80}
|
||||
step={2}
|
||||
onChange={(value) => setWatermarkForm((prev) => ({ ...prev, padding: value }))}
|
||||
disabled={controlsLocked}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label={t('events.watermark.offset', 'Feinjustierung')}
|
||||
value={watermarkForm.offsetX}
|
||||
min={-30}
|
||||
max={30}
|
||||
step={1}
|
||||
onChange={(value) => setWatermarkForm((prev) => ({ ...prev, offsetX: value }))}
|
||||
disabled={controlsLocked}
|
||||
suffix={t('events.watermark.offsetX', 'X-Achse')}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label={t('events.watermark.offsetY', 'Y-Achse')}
|
||||
value={watermarkForm.offsetY}
|
||||
min={-30}
|
||||
max={30}
|
||||
step={1}
|
||||
onChange={(value) => setWatermarkForm((prev) => ({ ...prev, offsetY: value }))}
|
||||
disabled={controlsLocked}
|
||||
/>
|
||||
</MobileCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<MobileShell
|
||||
activeTab="home"
|
||||
@@ -180,164 +416,177 @@ export default function MobileBrandingPage() {
|
||||
</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 space="$2">
|
||||
<XStack space="$2">
|
||||
<TabButton label={t('events.branding.titleShort', 'Branding')} active={activeTab === 'branding'} onPress={() => setActiveTab('branding')} />
|
||||
<TabButton label={t('events.watermark.tab', 'Wasserzeichen')} active={activeTab === 'watermark'} onPress={() => setActiveTab('watermark')} />
|
||||
</XStack>
|
||||
</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)')}
|
||||
{activeTab === 'branding' ? (
|
||||
<>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</>
|
||||
) : (
|
||||
renderWatermarkTab()
|
||||
)}
|
||||
|
||||
<YStack space="$2">
|
||||
<CTAButton label={saving ? t('events.branding.saving', 'Saving...') : t('events.branding.save', 'Save Branding')} onPress={() => handleSave()} />
|
||||
@@ -432,6 +681,69 @@ function extractBranding(event: TenantEvent): BrandingForm {
|
||||
};
|
||||
}
|
||||
|
||||
function extractWatermark(event: TenantEvent): WatermarkForm {
|
||||
const settings = (event.settings as Record<string, unknown>) ?? {};
|
||||
const wm = (settings.watermark as Record<string, unknown>) ?? {};
|
||||
const readNumber = (key: string, fallback: number) => {
|
||||
const value = wm[key];
|
||||
return typeof value === 'number' && !Number.isNaN(value) ? value : fallback;
|
||||
};
|
||||
const readString = (key: string, fallback: string) => {
|
||||
const value = wm[key];
|
||||
return typeof value === 'string' && value.trim() ? value : fallback;
|
||||
};
|
||||
|
||||
const mode = (wm.mode === 'custom' || wm.mode === 'off') ? wm.mode : 'base';
|
||||
const position = readString('position', 'bottom-right') as WatermarkPosition;
|
||||
|
||||
return {
|
||||
mode,
|
||||
assetPath: readString('asset', ''),
|
||||
assetDataUrl: '',
|
||||
position,
|
||||
opacity: readNumber('opacity', 0.25),
|
||||
scale: readNumber('scale', 0.2),
|
||||
padding: readNumber('padding', 16),
|
||||
offsetX: readNumber('offset_x', 0),
|
||||
offsetY: readNumber('offset_y', 0),
|
||||
};
|
||||
}
|
||||
|
||||
function buildWatermarkPayload(
|
||||
form: WatermarkForm,
|
||||
watermarkAllowed: boolean,
|
||||
brandingAllowed: boolean
|
||||
): WatermarkSettings | null {
|
||||
if (!watermarkAllowed) {
|
||||
return { mode: 'off' };
|
||||
}
|
||||
|
||||
const policy = watermarkAllowed ? 'basic' : 'none';
|
||||
const desiredMode = brandingAllowed ? form.mode : 'base';
|
||||
const mode = desiredMode === 'off' && policy === 'basic' ? 'base' : desiredMode;
|
||||
|
||||
const payload: WatermarkSettings = {
|
||||
mode,
|
||||
position: form.position,
|
||||
opacity: Math.min(1, Math.max(0, form.opacity)),
|
||||
scale: Math.min(1, Math.max(0.05, form.scale)),
|
||||
padding: Math.max(0, Math.round(form.padding)),
|
||||
offset_x: Math.max(-500, Math.min(500, Math.round(form.offsetX))),
|
||||
offset_y: Math.max(-500, Math.min(500, Math.round(form.offsetY))),
|
||||
};
|
||||
|
||||
if (mode === 'custom' && brandingAllowed) {
|
||||
if (form.assetDataUrl) {
|
||||
payload.asset_data_url = form.assetDataUrl;
|
||||
}
|
||||
if (form.assetPath) {
|
||||
payload.asset = form.assetPath;
|
||||
}
|
||||
}
|
||||
|
||||
return payload;
|
||||
}
|
||||
|
||||
function renderName(name: TenantEvent['name']): string {
|
||||
if (typeof name === 'string') return name;
|
||||
if (name && typeof name === 'object') {
|
||||
@@ -478,12 +790,14 @@ function InputField({
|
||||
placeholder,
|
||||
onChange,
|
||||
onPicker,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
placeholder?: string;
|
||||
onChange: (next: string) => void;
|
||||
onPicker?: () => void;
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<YStack space="$2">
|
||||
@@ -501,21 +815,23 @@ function InputField({
|
||||
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}
|
||||
/>
|
||||
{children ?? (
|
||||
<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" />
|
||||
@@ -525,3 +841,222 @@ function InputField({
|
||||
</YStack>
|
||||
);
|
||||
}
|
||||
|
||||
function LabeledSlider({
|
||||
label,
|
||||
value,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
onChange,
|
||||
disabled,
|
||||
suffix,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
onChange: (value: number) => void;
|
||||
disabled?: boolean;
|
||||
suffix?: string;
|
||||
}) {
|
||||
return (
|
||||
<YStack space="$1.5">
|
||||
<XStack alignItems="center" justifyContent="space-between">
|
||||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||||
{label}
|
||||
</Text>
|
||||
<Text fontSize="$xs" color="#4b5563">
|
||||
{value}
|
||||
{suffix ? ` ${suffix}` : ''}
|
||||
</Text>
|
||||
</XStack>
|
||||
<input
|
||||
type="range"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onChange={(event) => onChange(Number(event.target.value))}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</YStack>
|
||||
);
|
||||
}
|
||||
|
||||
function PositionGrid({
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
value: WatermarkPosition;
|
||||
onChange: (value: WatermarkPosition) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const positions: WatermarkPosition[] = [
|
||||
'top-left',
|
||||
'top-center',
|
||||
'top-right',
|
||||
'middle-left',
|
||||
'center',
|
||||
'middle-right',
|
||||
'bottom-left',
|
||||
'bottom-center',
|
||||
'bottom-right',
|
||||
];
|
||||
|
||||
return (
|
||||
<YStack space="$2">
|
||||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||||
Position
|
||||
</Text>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 8 }}>
|
||||
{positions.map((pos) => (
|
||||
<button
|
||||
key={pos}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onChange(pos)}
|
||||
style={{
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
border: value === pos ? '2px solid #007AFF' : '1px solid #e5e7eb',
|
||||
background: value === pos ? '#eff6ff' : '#fff',
|
||||
}}
|
||||
>
|
||||
<Text fontSize="$xs" color="#0f172a" textAlign="center">
|
||||
{pos.replace('-', ' ')}
|
||||
</Text>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</YStack>
|
||||
);
|
||||
}
|
||||
|
||||
function WatermarkPreview({
|
||||
position,
|
||||
scale,
|
||||
opacity,
|
||||
padding,
|
||||
offsetX,
|
||||
offsetY,
|
||||
}: {
|
||||
position: WatermarkPosition;
|
||||
scale: number;
|
||||
opacity: number;
|
||||
padding: number;
|
||||
offsetX: number;
|
||||
offsetY: number;
|
||||
}) {
|
||||
const width = 280;
|
||||
const height = 180;
|
||||
const wmWidth = Math.max(24, Math.round(width * Math.min(1, Math.max(0.05, scale))));
|
||||
const wmHeight = Math.round(wmWidth * 0.4);
|
||||
|
||||
const baseX = (() => {
|
||||
switch (position) {
|
||||
case 'top-center':
|
||||
case 'center':
|
||||
case 'bottom-center':
|
||||
return (width - wmWidth) / 2;
|
||||
case 'top-right':
|
||||
case 'middle-right':
|
||||
case 'bottom-right':
|
||||
return width - wmWidth - padding;
|
||||
default:
|
||||
return padding;
|
||||
}
|
||||
})();
|
||||
|
||||
const baseY = (() => {
|
||||
switch (position) {
|
||||
case 'middle-left':
|
||||
case 'center':
|
||||
case 'middle-right':
|
||||
return (height - wmHeight) / 2;
|
||||
case 'bottom-left':
|
||||
case 'bottom-center':
|
||||
case 'bottom-right':
|
||||
return height - wmHeight - padding;
|
||||
default:
|
||||
return padding;
|
||||
}
|
||||
})();
|
||||
|
||||
const x = Math.max(0, Math.min(width - wmWidth, baseX + offsetX));
|
||||
const y = Math.max(0, Math.min(height - wmHeight, baseY + offsetY));
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', width: '100%', maxWidth: 320 }}>
|
||||
<div
|
||||
style={{
|
||||
width,
|
||||
height,
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
border: '1px solid #e5e7eb',
|
||||
background: 'linear-gradient(135deg, #e0f2fe, #c7d2fe)',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #0f172a66, transparent)' }} />
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: x,
|
||||
top: y,
|
||||
width: wmWidth,
|
||||
height: wmHeight,
|
||||
background: 'rgba(255,255,255,0.8)',
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
opacity: Math.min(1, Math.max(0, opacity)),
|
||||
border: '1px dashed #64748b',
|
||||
}}
|
||||
>
|
||||
<Droplets size={18} color="#0f172a" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoBadge({ icon, text, tone = 'info' }: { icon?: React.ReactNode; text: string; tone?: 'info' | 'danger' }) {
|
||||
const background = tone === 'danger' ? '#fef2f2' : '#f1f5f9';
|
||||
const color = tone === 'danger' ? '#991b1b' : '#0f172a';
|
||||
|
||||
return (
|
||||
<MobileCard space="$2" backgroundColor={background} borderColor="#e2e8f0">
|
||||
<XStack space="$2" alignItems="center">
|
||||
{icon}
|
||||
<Text fontSize="$sm" color={color}>
|
||||
{text}
|
||||
</Text>
|
||||
</XStack>
|
||||
</MobileCard>
|
||||
);
|
||||
}
|
||||
|
||||
function TabButton({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
|
||||
return (
|
||||
<Pressable onPress={onPress} style={{ flex: 1 }}>
|
||||
<XStack
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
paddingVertical="$2.5"
|
||||
borderRadius={12}
|
||||
backgroundColor={active ? '#0f172a' : '#f1f5f9'}
|
||||
borderWidth={1}
|
||||
borderColor={active ? '#0f172a' : '#e5e7eb'}
|
||||
>
|
||||
<Text fontSize="$sm" color={active ? '#fff' : '#0f172a'} fontWeight="700">
|
||||
{label}
|
||||
</Text>
|
||||
</XStack>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user