Collapse branding controls on default mode
This commit is contained in:
Codex Agent
@@ -640,340 +640,344 @@ export default function MobileBrandingPage() {
|
|||||||
</Text>
|
</Text>
|
||||||
</MobileCard>
|
</MobileCard>
|
||||||
|
|
||||||
<MobileCard space="$3">
|
{form.useDefaultBranding ? null : (
|
||||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
<>
|
||||||
{t('events.branding.mode', 'Theme')}
|
<MobileCard space="$3">
|
||||||
</Text>
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||||
<XStack space="$2">
|
{t('events.branding.mode', 'Theme')}
|
||||||
<ModeButton
|
</Text>
|
||||||
label={t('events.branding.modeLight', 'Light')}
|
<XStack space="$2">
|
||||||
active={form.mode === 'light'}
|
<ModeButton
|
||||||
onPress={() => setForm((prev) => ({ ...prev, mode: 'light' }))}
|
label={t('events.branding.modeLight', 'Light')}
|
||||||
disabled={brandingDisabled}
|
active={form.mode === 'light'}
|
||||||
/>
|
onPress={() => setForm((prev) => ({ ...prev, mode: 'light' }))}
|
||||||
<ModeButton
|
disabled={brandingDisabled}
|
||||||
label={t('events.branding.modeAuto', 'Auto')}
|
/>
|
||||||
active={form.mode === 'auto'}
|
<ModeButton
|
||||||
onPress={() => setForm((prev) => ({ ...prev, mode: 'auto' }))}
|
label={t('events.branding.modeAuto', 'Auto')}
|
||||||
disabled={brandingDisabled}
|
active={form.mode === 'auto'}
|
||||||
/>
|
onPress={() => setForm((prev) => ({ ...prev, mode: 'auto' }))}
|
||||||
<ModeButton
|
disabled={brandingDisabled}
|
||||||
label={t('events.branding.modeDark', 'Dark')}
|
/>
|
||||||
active={form.mode === 'dark'}
|
<ModeButton
|
||||||
onPress={() => setForm((prev) => ({ ...prev, mode: 'dark' }))}
|
label={t('events.branding.modeDark', 'Dark')}
|
||||||
disabled={brandingDisabled}
|
active={form.mode === 'dark'}
|
||||||
/>
|
onPress={() => setForm((prev) => ({ ...prev, mode: 'dark' }))}
|
||||||
</XStack>
|
disabled={brandingDisabled}
|
||||||
</MobileCard>
|
/>
|
||||||
|
</XStack>
|
||||||
|
</MobileCard>
|
||||||
|
|
||||||
<MobileCard space="$3">
|
<MobileCard space="$3">
|
||||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||||
{t('events.branding.colors', 'Colors')}
|
{t('events.branding.colors', 'Colors')}
|
||||||
</Text>
|
</Text>
|
||||||
<ColorField
|
<ColorField
|
||||||
label={t('events.branding.primary', 'Primary Color')}
|
label={t('events.branding.primary', 'Primary Color')}
|
||||||
value={form.primary}
|
value={form.primary}
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, primary: value }))}
|
onChange={(value) => setForm((prev) => ({ ...prev, primary: value }))}
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
<ColorField
|
|
||||||
label={t('events.branding.accent', 'Accent Color')}
|
|
||||||
value={form.accent}
|
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, accent: value }))}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
<ColorField
|
|
||||||
label={t('events.branding.backgroundColor', 'Background Color')}
|
|
||||||
value={form.background}
|
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, background: value }))}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
<ColorField
|
|
||||||
label={t('events.branding.surfaceColor', 'Surface Color')}
|
|
||||||
value={form.surface}
|
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, surface: value }))}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
</MobileCard>
|
|
||||||
|
|
||||||
<MobileCard space="$3">
|
|
||||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
||||||
{t('events.branding.fonts', 'Fonts')}
|
|
||||||
</Text>
|
|
||||||
<InputField
|
|
||||||
label={t('events.branding.headingFont', 'Headline Font')}
|
|
||||||
value={form.headingFont}
|
|
||||||
placeholder={t('events.branding.headingFontPlaceholder', 'SF Pro Display')}
|
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, headingFont: value }))}
|
|
||||||
onPicker={() => {
|
|
||||||
setFontField('heading');
|
|
||||||
setShowFontsSheet(true);
|
|
||||||
}}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
<InputField
|
|
||||||
label={t('events.branding.bodyFont', 'Body Font')}
|
|
||||||
value={form.bodyFont}
|
|
||||||
placeholder={t('events.branding.bodyFontPlaceholder', 'SF Pro Text')}
|
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, bodyFont: value }))}
|
|
||||||
onPicker={() => {
|
|
||||||
setFontField('body');
|
|
||||||
setShowFontsSheet(true);
|
|
||||||
}}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
|
||||||
{t('events.branding.fontSize', 'Font Size')}
|
|
||||||
</Text>
|
|
||||||
<XStack space="$2">
|
|
||||||
<ModeButton
|
|
||||||
label={t('events.branding.fontSizeSmall', 'S')}
|
|
||||||
active={form.fontSize === 's'}
|
|
||||||
onPress={() => setForm((prev) => ({ ...prev, fontSize: 's' }))}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
<ModeButton
|
|
||||||
label={t('events.branding.fontSizeMedium', 'M')}
|
|
||||||
active={form.fontSize === 'm'}
|
|
||||||
onPress={() => setForm((prev) => ({ ...prev, fontSize: 'm' }))}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
<ModeButton
|
|
||||||
label={t('events.branding.fontSizeLarge', 'L')}
|
|
||||||
active={form.fontSize === 'l'}
|
|
||||||
onPress={() => setForm((prev) => ({ ...prev, fontSize: 'l' }))}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
</XStack>
|
|
||||||
</MobileCard>
|
|
||||||
|
|
||||||
<MobileCard space="$3">
|
|
||||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
||||||
{t('events.branding.logo', 'Logo')}
|
|
||||||
</Text>
|
|
||||||
<Text fontSize="$sm" color={muted}>
|
|
||||||
{t('events.branding.logoHint', 'Upload a logo or use an emoji for the guest header.')}
|
|
||||||
</Text>
|
|
||||||
<XStack space="$2">
|
|
||||||
<ModeButton
|
|
||||||
label={t('events.branding.logoModeUpload', 'Upload')}
|
|
||||||
active={form.logoMode === 'upload'}
|
|
||||||
onPress={() => setForm((prev) => ({ ...prev, logoMode: 'upload' }))}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
<ModeButton
|
|
||||||
label={t('events.branding.logoModeEmoticon', 'Emoticon')}
|
|
||||||
active={form.logoMode === 'emoticon'}
|
|
||||||
onPress={() => setForm((prev) => ({ ...prev, logoMode: 'emoticon' }))}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
</XStack>
|
|
||||||
|
|
||||||
{form.logoMode === 'emoticon' ? (
|
|
||||||
<InputField
|
|
||||||
label={t('events.branding.logoValue', 'Emoticon')}
|
|
||||||
value={form.logoValue}
|
|
||||||
placeholder={t('events.branding.logoValuePlaceholder', '🎉')}
|
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, logoValue: value }))}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<YStack
|
|
||||||
borderRadius={14}
|
|
||||||
borderWidth={1}
|
|
||||||
borderColor={border}
|
|
||||||
backgroundColor={surfaceMuted}
|
|
||||||
padding="$3"
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
space="$2"
|
|
||||||
>
|
|
||||||
{form.logoDataUrl ? (
|
|
||||||
<>
|
|
||||||
<img
|
|
||||||
src={form.logoDataUrl}
|
|
||||||
alt={t('events.branding.logoAlt', '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()}
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
/>
|
|
||||||
<Pressable
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
onPress={() => setForm((prev) => ({ ...prev, logoDataUrl: '' }))}
|
|
||||||
>
|
|
||||||
<XStack
|
|
||||||
alignItems="center"
|
|
||||||
space="$1.5"
|
|
||||||
paddingHorizontal="$3"
|
|
||||||
paddingVertical="$2"
|
|
||||||
borderRadius={12}
|
|
||||||
borderWidth={1}
|
|
||||||
borderColor={border}
|
|
||||||
>
|
|
||||||
<Trash2 size={16} color={danger} />
|
|
||||||
<Text fontSize="$sm" color={danger} fontWeight="700">
|
|
||||||
{t('events.branding.removeLogo', 'Remove')}
|
|
||||||
</Text>
|
|
||||||
</XStack>
|
|
||||||
</Pressable>
|
|
||||||
</XStack>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<ImageIcon size={28} color={subtle} />
|
|
||||||
<Pressable
|
|
||||||
disabled={brandingDisabled}
|
|
||||||
onPress={() => document.getElementById('branding-logo-input')?.click()}
|
|
||||||
>
|
|
||||||
<XStack
|
|
||||||
alignItems="center"
|
|
||||||
space="$2"
|
|
||||||
paddingHorizontal="$3.5"
|
|
||||||
paddingVertical="$2.5"
|
|
||||||
borderRadius={12}
|
|
||||||
borderWidth={1}
|
|
||||||
borderColor={border}
|
|
||||||
backgroundColor={surface}
|
|
||||||
>
|
|
||||||
<UploadCloud size={18} color={primary} />
|
|
||||||
<Text fontSize="$sm" color={primary} 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' }}
|
|
||||||
disabled={brandingDisabled}
|
disabled={brandingDisabled}
|
||||||
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>
|
<ColorField
|
||||||
)}
|
label={t('events.branding.accent', 'Accent Color')}
|
||||||
|
value={form.accent}
|
||||||
|
onChange={(value) => setForm((prev) => ({ ...prev, accent: value }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<ColorField
|
||||||
|
label={t('events.branding.backgroundColor', 'Background Color')}
|
||||||
|
value={form.background}
|
||||||
|
onChange={(value) => setForm((prev) => ({ ...prev, background: value }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<ColorField
|
||||||
|
label={t('events.branding.surfaceColor', 'Surface Color')}
|
||||||
|
value={form.surface}
|
||||||
|
onChange={(value) => setForm((prev) => ({ ...prev, surface: value }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
</MobileCard>
|
||||||
|
|
||||||
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
<MobileCard space="$3">
|
||||||
{t('events.branding.logoPosition', 'Position')}
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||||
</Text>
|
{t('events.branding.fonts', 'Fonts')}
|
||||||
<XStack space="$2">
|
</Text>
|
||||||
<ModeButton
|
<InputField
|
||||||
label={t('events.branding.positionLeft', 'Left')}
|
label={t('events.branding.headingFont', 'Headline Font')}
|
||||||
active={form.logoPosition === 'left'}
|
value={form.headingFont}
|
||||||
onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'left' }))}
|
placeholder={t('events.branding.headingFontPlaceholder', 'SF Pro Display')}
|
||||||
disabled={brandingDisabled}
|
onChange={(value) => setForm((prev) => ({ ...prev, headingFont: value }))}
|
||||||
/>
|
onPicker={() => {
|
||||||
<ModeButton
|
setFontField('heading');
|
||||||
label={t('events.branding.positionCenter', 'Center')}
|
setShowFontsSheet(true);
|
||||||
active={form.logoPosition === 'center'}
|
}}
|
||||||
onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'center' }))}
|
disabled={brandingDisabled}
|
||||||
disabled={brandingDisabled}
|
/>
|
||||||
/>
|
<InputField
|
||||||
<ModeButton
|
label={t('events.branding.bodyFont', 'Body Font')}
|
||||||
label={t('events.branding.positionRight', 'Right')}
|
value={form.bodyFont}
|
||||||
active={form.logoPosition === 'right'}
|
placeholder={t('events.branding.bodyFontPlaceholder', 'SF Pro Text')}
|
||||||
onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'right' }))}
|
onChange={(value) => setForm((prev) => ({ ...prev, bodyFont: value }))}
|
||||||
disabled={brandingDisabled}
|
onPicker={() => {
|
||||||
/>
|
setFontField('body');
|
||||||
</XStack>
|
setShowFontsSheet(true);
|
||||||
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
}}
|
||||||
{t('events.branding.logoSize', 'Size')}
|
disabled={brandingDisabled}
|
||||||
</Text>
|
/>
|
||||||
<XStack space="$2">
|
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
||||||
<ModeButton
|
{t('events.branding.fontSize', 'Font Size')}
|
||||||
label={t('events.branding.logoSizeSmall', 'S')}
|
</Text>
|
||||||
active={form.logoSize === 's'}
|
<XStack space="$2">
|
||||||
onPress={() => setForm((prev) => ({ ...prev, logoSize: 's' }))}
|
<ModeButton
|
||||||
disabled={brandingDisabled}
|
label={t('events.branding.fontSizeSmall', 'S')}
|
||||||
/>
|
active={form.fontSize === 's'}
|
||||||
<ModeButton
|
onPress={() => setForm((prev) => ({ ...prev, fontSize: 's' }))}
|
||||||
label={t('events.branding.logoSizeMedium', 'M')}
|
disabled={brandingDisabled}
|
||||||
active={form.logoSize === 'm'}
|
/>
|
||||||
onPress={() => setForm((prev) => ({ ...prev, logoSize: 'm' }))}
|
<ModeButton
|
||||||
disabled={brandingDisabled}
|
label={t('events.branding.fontSizeMedium', 'M')}
|
||||||
/>
|
active={form.fontSize === 'm'}
|
||||||
<ModeButton
|
onPress={() => setForm((prev) => ({ ...prev, fontSize: 'm' }))}
|
||||||
label={t('events.branding.logoSizeLarge', 'L')}
|
disabled={brandingDisabled}
|
||||||
active={form.logoSize === 'l'}
|
/>
|
||||||
onPress={() => setForm((prev) => ({ ...prev, logoSize: 'l' }))}
|
<ModeButton
|
||||||
disabled={brandingDisabled}
|
label={t('events.branding.fontSizeLarge', 'L')}
|
||||||
/>
|
active={form.fontSize === 'l'}
|
||||||
</XStack>
|
onPress={() => setForm((prev) => ({ ...prev, fontSize: 'l' }))}
|
||||||
</MobileCard>
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
</XStack>
|
||||||
|
</MobileCard>
|
||||||
|
|
||||||
<MobileCard space="$3">
|
<MobileCard space="$3">
|
||||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||||
{t('events.branding.buttons', 'Buttons & Links')}
|
{t('events.branding.logo', 'Logo')}
|
||||||
</Text>
|
</Text>
|
||||||
<Text fontSize="$sm" color={muted}>
|
<Text fontSize="$sm" color={muted}>
|
||||||
{t('events.branding.buttonsHint', 'Style, radius, and link color for CTA buttons.')}
|
{t('events.branding.logoHint', 'Upload a logo or use an emoji for the guest header.')}
|
||||||
</Text>
|
</Text>
|
||||||
<XStack space="$2">
|
<XStack space="$2">
|
||||||
<ModeButton
|
<ModeButton
|
||||||
label={t('events.branding.buttonFilled', 'Filled')}
|
label={t('events.branding.logoModeUpload', 'Upload')}
|
||||||
active={form.buttonStyle === 'filled'}
|
active={form.logoMode === 'upload'}
|
||||||
onPress={() => setForm((prev) => ({ ...prev, buttonStyle: 'filled' }))}
|
onPress={() => setForm((prev) => ({ ...prev, logoMode: 'upload' }))}
|
||||||
disabled={brandingDisabled}
|
disabled={brandingDisabled}
|
||||||
/>
|
/>
|
||||||
<ModeButton
|
<ModeButton
|
||||||
label={t('events.branding.buttonOutline', 'Outline')}
|
label={t('events.branding.logoModeEmoticon', 'Emoticon')}
|
||||||
active={form.buttonStyle === 'outline'}
|
active={form.logoMode === 'emoticon'}
|
||||||
onPress={() => setForm((prev) => ({ ...prev, buttonStyle: 'outline' }))}
|
onPress={() => setForm((prev) => ({ ...prev, logoMode: 'emoticon' }))}
|
||||||
disabled={brandingDisabled}
|
disabled={brandingDisabled}
|
||||||
/>
|
/>
|
||||||
</XStack>
|
</XStack>
|
||||||
<LabeledSlider
|
|
||||||
label={t('events.branding.buttonRadius', 'Radius')}
|
{form.logoMode === 'emoticon' ? (
|
||||||
value={form.buttonRadius}
|
<InputField
|
||||||
min={0}
|
label={t('events.branding.logoValue', 'Emoticon')}
|
||||||
max={32}
|
value={form.logoValue}
|
||||||
step={1}
|
placeholder={t('events.branding.logoValuePlaceholder', '🎉')}
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, buttonRadius: value }))}
|
onChange={(value) => setForm((prev) => ({ ...prev, logoValue: value }))}
|
||||||
disabled={brandingDisabled}
|
disabled={brandingDisabled}
|
||||||
/>
|
/>
|
||||||
<ColorField
|
) : (
|
||||||
label={t('events.branding.buttonPrimary', 'Button Primary')}
|
<YStack
|
||||||
value={form.buttonPrimary}
|
borderRadius={14}
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, buttonPrimary: value }))}
|
borderWidth={1}
|
||||||
disabled={brandingDisabled}
|
borderColor={border}
|
||||||
/>
|
backgroundColor={surfaceMuted}
|
||||||
<ColorField
|
padding="$3"
|
||||||
label={t('events.branding.buttonSecondary', 'Button Secondary')}
|
alignItems="center"
|
||||||
value={form.buttonSecondary}
|
justifyContent="center"
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, buttonSecondary: value }))}
|
space="$2"
|
||||||
disabled={brandingDisabled}
|
>
|
||||||
/>
|
{form.logoDataUrl ? (
|
||||||
<ColorField
|
<>
|
||||||
label={t('events.branding.linkColor', 'Link Color')}
|
<img
|
||||||
value={form.linkColor}
|
src={form.logoDataUrl}
|
||||||
onChange={(value) => setForm((prev) => ({ ...prev, linkColor: value }))}
|
alt={t('events.branding.logoAlt', 'Logo')}
|
||||||
disabled={brandingDisabled}
|
style={{ maxHeight: 80, maxWidth: '100%', objectFit: 'contain' }}
|
||||||
/>
|
/>
|
||||||
</MobileCard>
|
<XStack space="$2">
|
||||||
|
<CTAButton
|
||||||
|
label={t('events.branding.replaceLogo', 'Replace logo')}
|
||||||
|
onPress={() => document.getElementById('branding-logo-input')?.click()}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<Pressable
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
onPress={() => setForm((prev) => ({ ...prev, logoDataUrl: '' }))}
|
||||||
|
>
|
||||||
|
<XStack
|
||||||
|
alignItems="center"
|
||||||
|
space="$1.5"
|
||||||
|
paddingHorizontal="$3"
|
||||||
|
paddingVertical="$2"
|
||||||
|
borderRadius={12}
|
||||||
|
borderWidth={1}
|
||||||
|
borderColor={border}
|
||||||
|
>
|
||||||
|
<Trash2 size={16} color={danger} />
|
||||||
|
<Text fontSize="$sm" color={danger} fontWeight="700">
|
||||||
|
{t('events.branding.removeLogo', 'Remove')}
|
||||||
|
</Text>
|
||||||
|
</XStack>
|
||||||
|
</Pressable>
|
||||||
|
</XStack>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<ImageIcon size={28} color={subtle} />
|
||||||
|
<Pressable
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
onPress={() => document.getElementById('branding-logo-input')?.click()}
|
||||||
|
>
|
||||||
|
<XStack
|
||||||
|
alignItems="center"
|
||||||
|
space="$2"
|
||||||
|
paddingHorizontal="$3.5"
|
||||||
|
paddingVertical="$2.5"
|
||||||
|
borderRadius={12}
|
||||||
|
borderWidth={1}
|
||||||
|
borderColor={border}
|
||||||
|
backgroundColor={surface}
|
||||||
|
>
|
||||||
|
<UploadCloud size={18} color={primary} />
|
||||||
|
<Text fontSize="$sm" color={primary} 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' }}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
||||||
|
{t('events.branding.logoPosition', 'Position')}
|
||||||
|
</Text>
|
||||||
|
<XStack space="$2">
|
||||||
|
<ModeButton
|
||||||
|
label={t('events.branding.positionLeft', 'Left')}
|
||||||
|
active={form.logoPosition === 'left'}
|
||||||
|
onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'left' }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<ModeButton
|
||||||
|
label={t('events.branding.positionCenter', 'Center')}
|
||||||
|
active={form.logoPosition === 'center'}
|
||||||
|
onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'center' }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<ModeButton
|
||||||
|
label={t('events.branding.positionRight', 'Right')}
|
||||||
|
active={form.logoPosition === 'right'}
|
||||||
|
onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'right' }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
</XStack>
|
||||||
|
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
||||||
|
{t('events.branding.logoSize', 'Size')}
|
||||||
|
</Text>
|
||||||
|
<XStack space="$2">
|
||||||
|
<ModeButton
|
||||||
|
label={t('events.branding.logoSizeSmall', 'S')}
|
||||||
|
active={form.logoSize === 's'}
|
||||||
|
onPress={() => setForm((prev) => ({ ...prev, logoSize: 's' }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<ModeButton
|
||||||
|
label={t('events.branding.logoSizeMedium', 'M')}
|
||||||
|
active={form.logoSize === 'm'}
|
||||||
|
onPress={() => setForm((prev) => ({ ...prev, logoSize: 'm' }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<ModeButton
|
||||||
|
label={t('events.branding.logoSizeLarge', 'L')}
|
||||||
|
active={form.logoSize === 'l'}
|
||||||
|
onPress={() => setForm((prev) => ({ ...prev, logoSize: 'l' }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
</XStack>
|
||||||
|
</MobileCard>
|
||||||
|
|
||||||
|
<MobileCard space="$3">
|
||||||
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||||
|
{t('events.branding.buttons', 'Buttons & Links')}
|
||||||
|
</Text>
|
||||||
|
<Text fontSize="$sm" color={muted}>
|
||||||
|
{t('events.branding.buttonsHint', 'Style, radius, and link color for CTA buttons.')}
|
||||||
|
</Text>
|
||||||
|
<XStack space="$2">
|
||||||
|
<ModeButton
|
||||||
|
label={t('events.branding.buttonFilled', 'Filled')}
|
||||||
|
active={form.buttonStyle === 'filled'}
|
||||||
|
onPress={() => setForm((prev) => ({ ...prev, buttonStyle: 'filled' }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<ModeButton
|
||||||
|
label={t('events.branding.buttonOutline', 'Outline')}
|
||||||
|
active={form.buttonStyle === 'outline'}
|
||||||
|
onPress={() => setForm((prev) => ({ ...prev, buttonStyle: 'outline' }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
</XStack>
|
||||||
|
<LabeledSlider
|
||||||
|
label={t('events.branding.buttonRadius', 'Radius')}
|
||||||
|
value={form.buttonRadius}
|
||||||
|
min={0}
|
||||||
|
max={32}
|
||||||
|
step={1}
|
||||||
|
onChange={(value) => setForm((prev) => ({ ...prev, buttonRadius: value }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<ColorField
|
||||||
|
label={t('events.branding.buttonPrimary', 'Button Primary')}
|
||||||
|
value={form.buttonPrimary}
|
||||||
|
onChange={(value) => setForm((prev) => ({ ...prev, buttonPrimary: value }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<ColorField
|
||||||
|
label={t('events.branding.buttonSecondary', 'Button Secondary')}
|
||||||
|
value={form.buttonSecondary}
|
||||||
|
onChange={(value) => setForm((prev) => ({ ...prev, buttonSecondary: value }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
<ColorField
|
||||||
|
label={t('events.branding.linkColor', 'Link Color')}
|
||||||
|
value={form.linkColor}
|
||||||
|
onChange={(value) => setForm((prev) => ({ ...prev, linkColor: value }))}
|
||||||
|
disabled={brandingDisabled}
|
||||||
|
/>
|
||||||
|
</MobileCard>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
renderWatermarkTab()
|
renderWatermarkTab()
|
||||||
|
|||||||
166
resources/js/admin/mobile/__tests__/BrandingPage.test.tsx
Normal file
166
resources/js/admin/mobile/__tests__/BrandingPage.test.tsx
Normal file
@@ -0,0 +1,166 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||||
|
import { render, screen, waitFor } from '@testing-library/react';
|
||||||
|
|
||||||
|
const navigateMock = vi.fn();
|
||||||
|
const backMock = vi.fn();
|
||||||
|
|
||||||
|
vi.mock('react-router-dom', () => ({
|
||||||
|
useNavigate: () => navigateMock,
|
||||||
|
useParams: () => ({ slug: 'demo-event' }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('react-i18next', () => ({
|
||||||
|
useTranslation: () => ({
|
||||||
|
t: (key: string, fallback?: string) => fallback ?? key,
|
||||||
|
}),
|
||||||
|
initReactI18next: {
|
||||||
|
type: '3rdParty',
|
||||||
|
init: () => undefined,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('react-hot-toast', () => ({
|
||||||
|
default: {
|
||||||
|
error: vi.fn(),
|
||||||
|
success: vi.fn(),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('../components/MobileShell', () => ({
|
||||||
|
MobileShell: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||||
|
HeaderActionButton: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('../components/Primitives', () => ({
|
||||||
|
MobileCard: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||||
|
CTAButton: ({ label }: { label: string }) => <button type="button">{label}</button>,
|
||||||
|
SkeletonCard: () => <div>Loading...</div>,
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('../components/Sheet', () => ({
|
||||||
|
MobileSheet: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('../hooks/useBackNavigation', () => ({
|
||||||
|
useBackNavigation: () => backMock,
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('../theme', () => ({
|
||||||
|
ADMIN_COLORS: {
|
||||||
|
primary: '#ff5a5f',
|
||||||
|
accent: '#6d28d9',
|
||||||
|
},
|
||||||
|
ADMIN_GRADIENTS: { softCard: 'linear-gradient(180deg, #fff, #f3f4f6)' },
|
||||||
|
useAdminTheme: () => ({
|
||||||
|
textStrong: '#0f172a',
|
||||||
|
muted: '#64748b',
|
||||||
|
subtle: '#94a3b8',
|
||||||
|
border: '#e2e8f0',
|
||||||
|
primary: '#ff5a5f',
|
||||||
|
accentSoft: '#f5f3ff',
|
||||||
|
danger: '#dc2626',
|
||||||
|
surfaceMuted: '#f8fafc',
|
||||||
|
surface: '#ffffff',
|
||||||
|
backdrop: '#0f172a',
|
||||||
|
dangerBg: '#fee2e2',
|
||||||
|
dangerText: '#b91c1c',
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('@tamagui/stacks', () => ({
|
||||||
|
YStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||||
|
XStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('@tamagui/text', () => ({
|
||||||
|
SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('@tamagui/react-native-web-lite', () => ({
|
||||||
|
Pressable: ({ children, onPress }: { children: React.ReactNode; onPress?: () => void }) => (
|
||||||
|
<button type="button" onClick={onPress}>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('tamagui', () => ({
|
||||||
|
Slider: Object.assign(
|
||||||
|
({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||||
|
{
|
||||||
|
Track: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||||
|
TrackActive: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
|
||||||
|
Thumb: () => <div />,
|
||||||
|
}
|
||||||
|
),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const getEventMock = vi.fn();
|
||||||
|
const updateEventMock = vi.fn();
|
||||||
|
const getTenantFontsMock = vi.fn();
|
||||||
|
const getTenantSettingsMock = vi.fn();
|
||||||
|
const trackOnboardingMock = vi.fn();
|
||||||
|
|
||||||
|
vi.mock('../../api', () => ({
|
||||||
|
TenantEvent: {},
|
||||||
|
TenantFont: {},
|
||||||
|
WatermarkSettings: {},
|
||||||
|
getEvent: (...args: unknown[]) => getEventMock(...args),
|
||||||
|
updateEvent: (...args: unknown[]) => updateEventMock(...args),
|
||||||
|
getTenantFonts: (...args: unknown[]) => getTenantFontsMock(...args),
|
||||||
|
getTenantSettings: (...args: unknown[]) => getTenantSettingsMock(...args),
|
||||||
|
trackOnboarding: (...args: unknown[]) => trackOnboardingMock(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import MobileBrandingPage from '../BrandingPage';
|
||||||
|
|
||||||
|
const baseEvent = {
|
||||||
|
id: 9,
|
||||||
|
name: 'Demo Event',
|
||||||
|
slug: 'demo-event',
|
||||||
|
event_date: null,
|
||||||
|
event_type_id: 1,
|
||||||
|
event_type: null,
|
||||||
|
status: 'draft' as const,
|
||||||
|
settings: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('MobileBrandingPage', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
getTenantFontsMock.mockResolvedValue([]);
|
||||||
|
getTenantSettingsMock.mockResolvedValue({ settings: {} });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('hides custom branding controls when default branding is active', async () => {
|
||||||
|
getEventMock.mockResolvedValueOnce({
|
||||||
|
...baseEvent,
|
||||||
|
settings: { branding: { use_default_branding: true } },
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<MobileBrandingPage />);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('Branding Source')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(screen.queryByText('Theme')).toBeNull();
|
||||||
|
expect(screen.queryByText('Colors')).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows custom branding controls when event branding is active', async () => {
|
||||||
|
getEventMock.mockResolvedValueOnce({
|
||||||
|
...baseEvent,
|
||||||
|
settings: { branding: { use_default_branding: false } },
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<MobileBrandingPage />);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('Branding Source')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(screen.getByText('Theme')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('Colors')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user