added more translations and added the new layout wizard
This commit is contained in:
Codex Agent
@@ -4,9 +4,10 @@ import { useTranslation } from 'react-i18next';
|
||||
import { CalendarDays, ChevronDown, MapPin } from 'lucide-react';
|
||||
import { YStack, XStack } from '@tamagui/stacks';
|
||||
import { SizableText as Text } from '@tamagui/text';
|
||||
import { Switch } from '@tamagui/switch';
|
||||
import { MobileShell } from './components/MobileShell';
|
||||
import { MobileCard, CTAButton } from './components/Primitives';
|
||||
import { createEvent, getEvent, updateEvent, TenantEvent } from '../api';
|
||||
import { createEvent, getEvent, updateEvent, getEventTypes, TenantEvent, TenantEventType } from '../api';
|
||||
import { adminPath } from '../constants';
|
||||
import { isAuthError } from '../auth/tokens';
|
||||
import { getApiErrorMessage } from '../lib/apiError';
|
||||
@@ -14,14 +15,13 @@ import { getApiErrorMessage } from '../lib/apiError';
|
||||
type FormState = {
|
||||
name: string;
|
||||
date: string;
|
||||
eventType: string;
|
||||
eventTypeId: number | null;
|
||||
description: string;
|
||||
location: string;
|
||||
enableBranding: boolean;
|
||||
published: boolean;
|
||||
};
|
||||
|
||||
const EVENT_TYPES = ['Wedding', 'Corporate', 'Party', 'Other'];
|
||||
|
||||
export default function MobileEventFormPage() {
|
||||
const { slug: slugParam } = useParams<{ slug?: string }>();
|
||||
const slug = slugParam ?? null;
|
||||
@@ -32,11 +32,14 @@ export default function MobileEventFormPage() {
|
||||
const [form, setForm] = React.useState<FormState>({
|
||||
name: '',
|
||||
date: '',
|
||||
eventType: EVENT_TYPES[0],
|
||||
eventTypeId: null,
|
||||
description: '',
|
||||
location: '',
|
||||
enableBranding: false,
|
||||
published: false,
|
||||
});
|
||||
const [eventTypes, setEventTypes] = React.useState<TenantEventType[]>([]);
|
||||
const [typesLoading, setTypesLoading] = React.useState(false);
|
||||
const [loading, setLoading] = React.useState(isEdit);
|
||||
const [saving, setSaving] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
@@ -49,11 +52,12 @@ export default function MobileEventFormPage() {
|
||||
const data = await getEvent(slug);
|
||||
setForm({
|
||||
name: renderName(data.name),
|
||||
date: data.event_date ?? '',
|
||||
eventType: data.event_type?.name ?? EVENT_TYPES[0],
|
||||
date: toDateTimeLocal(data.event_date),
|
||||
eventTypeId: data.event_type_id ?? data.event_type?.id ?? null,
|
||||
description: typeof data.description === 'string' ? data.description : '',
|
||||
location: resolveLocation(data),
|
||||
enableBranding: Boolean((data.settings as Record<string, unknown>)?.branding_allowed ?? true),
|
||||
published: data.status === 'published',
|
||||
});
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
@@ -66,6 +70,24 @@ export default function MobileEventFormPage() {
|
||||
})();
|
||||
}, [slug, t, isEdit]);
|
||||
|
||||
React.useEffect(() => {
|
||||
(async () => {
|
||||
setTypesLoading(true);
|
||||
try {
|
||||
const types = await getEventTypes();
|
||||
setEventTypes(types);
|
||||
// Default to first type if none set
|
||||
if (!form.eventTypeId && types.length) {
|
||||
setForm((prev) => ({ ...prev, eventTypeId: types[0].id }));
|
||||
}
|
||||
} catch {
|
||||
// silently ignore; fallback to null
|
||||
} finally {
|
||||
setTypesLoading(false);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
async function handleSubmit() {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
@@ -74,6 +96,8 @@ export default function MobileEventFormPage() {
|
||||
await updateEvent(slug, {
|
||||
name: form.name,
|
||||
event_date: form.date || undefined,
|
||||
event_type_id: form.eventTypeId ?? undefined,
|
||||
status: form.published ? 'published' : 'draft',
|
||||
settings: { branding_allowed: form.enableBranding, location: form.location },
|
||||
});
|
||||
navigate(adminPath(`/mobile/events/${slug}`));
|
||||
@@ -81,9 +105,9 @@ export default function MobileEventFormPage() {
|
||||
const payload = {
|
||||
name: form.name || 'Event',
|
||||
slug: `${Date.now()}`,
|
||||
event_type_id: 1,
|
||||
event_type_id: form.eventTypeId ?? undefined,
|
||||
event_date: form.date || undefined,
|
||||
status: 'draft' as const,
|
||||
status: form.published ? 'published' : 'draft' as const,
|
||||
settings: { branding_allowed: form.enableBranding, location: form.location },
|
||||
};
|
||||
const { event } = await createEvent(payload as any);
|
||||
@@ -135,31 +159,25 @@ export default function MobileEventFormPage() {
|
||||
</XStack>
|
||||
</Field>
|
||||
|
||||
<Field label={t('events.form.type', 'Event Type')}>
|
||||
<XStack space="$1" flexWrap="wrap">
|
||||
{EVENT_TYPES.map((type) => {
|
||||
const active = form.eventType === type;
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
onClick={() => setForm((prev) => ({ ...prev, eventType: type }))}
|
||||
style={{
|
||||
padding: '10px 12px',
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${active ? '#007AFF' : '#e5e7eb'}`,
|
||||
background: active ? '#e8f1ff' : 'white',
|
||||
color: active ? '#0f172a' : '#111827',
|
||||
fontWeight: 700,
|
||||
minWidth: 90,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{type}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</XStack>
|
||||
<Field label={t('eventForm.fields.type.label', 'Event type')}>
|
||||
{typesLoading ? (
|
||||
<Text fontSize="$sm" color="#6b7280">{t('eventForm.fields.type.loading', 'Loading event types…')}</Text>
|
||||
) : eventTypes.length === 0 ? (
|
||||
<Text fontSize="$sm" color="#6b7280">{t('eventForm.fields.type.empty', 'No event types available yet. Please add one in the admin area.')}</Text>
|
||||
) : (
|
||||
<select
|
||||
value={form.eventTypeId ?? ''}
|
||||
onChange={(e) => setForm((prev) => ({ ...prev, eventTypeId: Number(e.target.value) }))}
|
||||
style={{ ...inputStyle, height: 44 }}
|
||||
>
|
||||
<option value="">{t('eventForm.fields.type.placeholder', 'Select event type')}</option>
|
||||
{eventTypes.map((type) => (
|
||||
<option key={type.id} value={type.id}>
|
||||
{renderName(type.name as any) || type.slug}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field label={t('events.form.description', 'Optional Details')}>
|
||||
@@ -185,16 +203,40 @@ export default function MobileEventFormPage() {
|
||||
</Field>
|
||||
|
||||
<Field label={t('events.form.enableBranding', 'Enable Branding & Moderation')}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
<XStack alignItems="center" space="$2">
|
||||
<Switch
|
||||
checked={form.enableBranding}
|
||||
onChange={(e) => setForm((prev) => ({ ...prev, enableBranding: e.target.checked }))}
|
||||
/>
|
||||
onCheckedChange={(checked) =>
|
||||
setForm((prev) => ({ ...prev, enableBranding: Boolean(checked) }))
|
||||
}
|
||||
size="$3"
|
||||
aria-label={t('events.form.enableBranding', 'Enable Branding & Moderation')}
|
||||
>
|
||||
<Switch.Thumb />
|
||||
</Switch>
|
||||
<Text fontSize="$sm" color="#111827">
|
||||
{form.enableBranding ? t('common.enabled', 'Enabled') : t('common.disabled', 'Disabled')}
|
||||
</Text>
|
||||
</label>
|
||||
</XStack>
|
||||
</Field>
|
||||
|
||||
<Field label={t('eventForm.fields.publish.label', 'Publish immediately')}>
|
||||
<XStack alignItems="center" space="$2">
|
||||
<Switch
|
||||
checked={form.published}
|
||||
onCheckedChange={(checked) =>
|
||||
setForm((prev) => ({ ...prev, published: Boolean(checked) }))
|
||||
}
|
||||
size="$3"
|
||||
aria-label={t('eventForm.fields.publish.label', 'Publish immediately')}
|
||||
>
|
||||
<Switch.Thumb />
|
||||
</Switch>
|
||||
<Text fontSize="$sm" color="#111827">
|
||||
{form.published ? t('common.enabled', 'Enabled') : t('common.disabled', 'Disabled')}
|
||||
</Text>
|
||||
</XStack>
|
||||
<Text fontSize="$xs" color="#6b7280">{t('eventForm.fields.publish.help', 'Enable if guests should see the event right away. You can change the status later.')}</Text>
|
||||
</Field>
|
||||
</MobileCard>
|
||||
|
||||
@@ -250,6 +292,16 @@ function renderName(name: TenantEvent['name']): string {
|
||||
return '';
|
||||
}
|
||||
|
||||
function toDateTimeLocal(value?: string | null): string {
|
||||
if (!value) return '';
|
||||
const parsed = new Date(value);
|
||||
if (!Number.isNaN(parsed.getTime())) {
|
||||
return parsed.toISOString().slice(0, 16);
|
||||
}
|
||||
const fallback = value.replace(' ', 'T');
|
||||
return fallback.length >= 16 ? fallback.slice(0, 16) : '';
|
||||
}
|
||||
|
||||
function resolveLocation(event: TenantEvent): string {
|
||||
const settings = (event.settings ?? {}) as Record<string, unknown>;
|
||||
const candidate =
|
||||
|
||||
Reference in New Issue
Block a user