Collapse branding controls on default mode
This commit is contained in:
Codex Agent
@@ -640,340 +640,344 @@ export default function MobileBrandingPage() {
|
||||
</Text>
|
||||
</MobileCard>
|
||||
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||
{t('events.branding.mode', 'Theme')}
|
||||
</Text>
|
||||
<XStack space="$2">
|
||||
<ModeButton
|
||||
label={t('events.branding.modeLight', 'Light')}
|
||||
active={form.mode === 'light'}
|
||||
onPress={() => setForm((prev) => ({ ...prev, mode: 'light' }))}
|
||||
disabled={brandingDisabled}
|
||||
/>
|
||||
<ModeButton
|
||||
label={t('events.branding.modeAuto', 'Auto')}
|
||||
active={form.mode === 'auto'}
|
||||
onPress={() => setForm((prev) => ({ ...prev, mode: 'auto' }))}
|
||||
disabled={brandingDisabled}
|
||||
/>
|
||||
<ModeButton
|
||||
label={t('events.branding.modeDark', 'Dark')}
|
||||
active={form.mode === 'dark'}
|
||||
onPress={() => setForm((prev) => ({ ...prev, mode: 'dark' }))}
|
||||
disabled={brandingDisabled}
|
||||
/>
|
||||
</XStack>
|
||||
</MobileCard>
|
||||
{form.useDefaultBranding ? null : (
|
||||
<>
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||
{t('events.branding.mode', 'Theme')}
|
||||
</Text>
|
||||
<XStack space="$2">
|
||||
<ModeButton
|
||||
label={t('events.branding.modeLight', 'Light')}
|
||||
active={form.mode === 'light'}
|
||||
onPress={() => setForm((prev) => ({ ...prev, mode: 'light' }))}
|
||||
disabled={brandingDisabled}
|
||||
/>
|
||||
<ModeButton
|
||||
label={t('events.branding.modeAuto', 'Auto')}
|
||||
active={form.mode === 'auto'}
|
||||
onPress={() => setForm((prev) => ({ ...prev, mode: 'auto' }))}
|
||||
disabled={brandingDisabled}
|
||||
/>
|
||||
<ModeButton
|
||||
label={t('events.branding.modeDark', 'Dark')}
|
||||
active={form.mode === 'dark'}
|
||||
onPress={() => setForm((prev) => ({ ...prev, mode: 'dark' }))}
|
||||
disabled={brandingDisabled}
|
||||
/>
|
||||
</XStack>
|
||||
</MobileCard>
|
||||
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||
{t('events.branding.colors', 'Colors')}
|
||||
</Text>
|
||||
<ColorField
|
||||
label={t('events.branding.primary', 'Primary Color')}
|
||||
value={form.primary}
|
||||
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' }}
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||
{t('events.branding.colors', 'Colors')}
|
||||
</Text>
|
||||
<ColorField
|
||||
label={t('events.branding.primary', 'Primary Color')}
|
||||
value={form.primary}
|
||||
onChange={(value) => setForm((prev) => ({ ...prev, primary: value }))}
|
||||
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}>
|
||||
{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.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.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>
|
||||
<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}
|
||||
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()
|
||||
|
||||
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