Claude/sponsor custom fields (#224)

HugoGresse · claude · Copilot · web-flow · commit a982bd158e06 · 2026-03-10T21:52:05.000+01:00
* Add sponsor custom fields (boolean/text) configurable per event - Add SponsorCustomField type and sponsorCustomFields to Event interface - Add customFields map to Sponsor interface - Add SponsorCustomFieldsFields settings component for defining fields globally - Add collapsible "Sponsor custom fields" section in EventSettings page - Render custom fields (text inputs / switches) in SponsorForm based on event config - Custom fields are included in published JSON via existing sponsor spread https://claude.ai/code/session_01RSsX3a4wrxGfQoVQbGCGxS * Fix sponsor custom fields: type safety, defaults, and duplicate handling - Remove `as any` cast by typing useForm<Sponsor> explicitly - Merge existing sponsor customFields with defaults so new fields appear when editing sponsors created before the field was added - Change debug label `id: autogenerated-...` to proper "Field name" label, showing slug ID only as helper text for saved fields - Deduplicate custom fields by slugified ID to prevent silent data loss - Remove unused MenuItem import https://claude.ai/code/session_01RSsX3a4wrxGfQoVQbGCGxS * Add sponsorCustomFields to new event creation Fixes TS2322 error: the required sponsorCustomFields property was missing from the NewEvent object in NewEventDialog. https://claude.ai/code/session_01RSsX3a4wrxGfQoVQbGCGxS * Add sponsor custom fields with GCP JSON export support (#225) * Initial plan * Include sponsorCustomFields field definitions in GCP storage JSON output Co-authored-by: HugoGresse <662377+HugoGresse@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: HugoGresse <662377+HugoGresse@users.noreply.github.com> --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: HugoGresse <662377+HugoGresse@users.noreply.github.com>
diff --git a/functions/src/api/routes/deploy/updateWebsiteActions/generateStaticJson.ts b/functions/src/api/routes/deploy/updateWebsiteActions/generateStaticJson.ts
@@ -138,6 +138,7 @@ export const generateStaticJson = async (firebaseApp: firebase.app.App, event: E
         logoUrl: event.logoUrl,
         logoUrl2: event.logoUrl2,
         backgroundUrl: event.backgroundUrl,
+        sponsorCustomFields: event.sponsorCustomFields || [],
     }
 
     const outputPublic: JsonPublicOutput = {
diff --git a/functions/src/api/routes/deploy/updateWebsiteActions/jsonTypes.ts b/functions/src/api/routes/deploy/updateWebsiteActions/jsonTypes.ts
@@ -1,4 +1,4 @@
-import { Category, Track, Format, SponsorCategory, TeamMember, FaqCategory, Social } from '../../../../../../src/types'
+import { Category, Track, Format, SponsorCategory, TeamMember, FaqCategory, Social, SponsorCustomField } from '../../../../../../src/types'
 
 export interface JsonSession {
     id: string
@@ -59,6 +59,7 @@ export interface JsonEvent {
     logoUrl: string | null | undefined
     logoUrl2: string | null | undefined
     backgroundUrl: string | null | undefined
+    sponsorCustomFields: SponsorCustomField[]
 }
 
 export interface JsonPublicOutput {
diff --git a/src/events/new/NewEventDialog.tsx b/src/events/new/NewEventDialog.tsx
@@ -85,6 +85,7 @@ export const NewEventDialog = ({ isOpen, onClose }: NewEventDialogProps) => {
                         colorSecondary: null,
                         colorBackground: null,
                         timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                        sponsorCustomFields: [],
                         publicEnabled: false,
                     }
                     mutation
diff --git a/src/events/page/settings/EventSettings.tsx b/src/events/page/settings/EventSettings.tsx
@@ -21,6 +21,7 @@ import { deleteSessionsAndSpeakers } from '../../actions/deleteSessionsAndSpeake
 import { CategoriesFields } from './components/CategoriesFields'
 import { FormatsFields } from './components/FormatsFields'
 import { TrackFields } from './components/TrackFields'
+import { SponsorCustomFieldsFields } from './components/SponsorCustomFieldsFields'
 import { mapEventSettingsFormToMutateObject } from './mapEventSettingsFormToMutateObject'
 import { SaveShortcut } from '../../../components/form/SaveShortcut'
 import { EventSettingsFormatCategoriesGrid } from './EventSettingsFormatCategoriesGrid'
@@ -38,6 +39,7 @@ const schema = yup
 const convertInputEvent = (event: Event): EventForForm => {
     return {
         ...event,
+        sponsorCustomFields: event.sponsorCustomFields || [],
         timezone: event.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
         dates: {
             start: event.dates.start ? DateTime.fromJSDate(event.dates.start).toFormat("kkkk-LL-dd'T'T") : null,
@@ -55,6 +57,7 @@ export const EventSettings = ({ event }: EventSettingsProps) => {
     const [expandedGeneralInfo, setExpandedGeneralInfo] = useState(true)
     const [expandedMoreDetails, setExpandedMoreDetails] = useState(true)
     const [expandedTracks, setExpandedTracks] = useState(true)
+    const [expandedSponsorFields, setExpandedSponsorFields] = useState(true)
     const { createNotification } = useNotification()
     const documentDeletion = useFirestoreDocumentDeletion(doc(collections.events, event.id))
     const mutation = useFirestoreDocumentMutation(doc(collections.events, event.id))
@@ -380,6 +383,39 @@ export const EventSettings = ({ event }: EventSettingsProps) => {
                             </Grid>
                         </Collapse>
                     </Card>
+                    <Card sx={{ paddingX: 2, mt: 4 }}>
+                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', pb: 2 }}>
+                            <Typography fontSize="large" sx={{ mt: 2 }}>
+                                {' '}
+                                Sponsor custom fields{' '}
+                            </Typography>
+                            <IconButton
+                                size="small"
+                                onClick={() => setExpandedSponsorFields(!expandedSponsorFields)}
+                                sx={{
+                                    transform: expandedSponsorFields ? 'rotate(0deg)' : 'rotate(-90deg)',
+                                    transition: '0.3s',
+                                }}>
+                                <ExpandMoreIcon />
+                            </IconButton>
+                        </Box>
+                        <Collapse in={expandedSponsorFields}>
+                            <SponsorCustomFieldsFields control={control} isSubmitting={formState.isSubmitting} />
+
+                            <Grid item xs={12}>
+                                <LoadingButton
+                                    type="submit"
+                                    disabled={formState.isSubmitting}
+                                    loading={formState.isSubmitting}
+                                    fullWidth
+                                    variant="contained"
+                                    sx={{ mt: 2, mb: 2 }}>
+                                    Save
+                                </LoadingButton>
+                                {mutation.error && <Typography color="error">{mutation.error.message}</Typography>}
+                            </Grid>
+                        </Collapse>
+                    </Card>
                     {!deleteOpen && <SaveShortcut />}
                 </FormContainer>
 
diff --git a/src/events/page/settings/components/SponsorCustomFieldsFields.tsx b/src/events/page/settings/components/SponsorCustomFieldsFields.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react'
+import { Box, IconButton, Typography } from '@mui/material'
+import { Control, TextFieldElement, SelectElement, useFieldArray } from 'react-hook-form-mui'
+import { Add, Delete } from '@mui/icons-material'
+import { EventForForm } from '../../../../types'
+
+export type SponsorCustomFieldsFieldsProps = {
+    control: Control<EventForForm, any>
+    isSubmitting: boolean
+}
+
+export const SponsorCustomFieldsFields = ({ control, isSubmitting }: SponsorCustomFieldsFieldsProps) => {
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: 'sponsorCustomFields',
+        keyName: 'key',
+    })
+
+    return (
+        <>
+            <Typography fontWeight="600" mt={2}>
+                Sponsor custom fields
+            </Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                Define custom fields that will be available on every sponsor. These fields will also appear in the
+                published JSON.
+            </Typography>
+
+            <Box paddingLeft={2}>
+                {fields.map((field, index) => (
+                    <Box display="flex" key={field.key} alignItems="center" gap={1}>
+                        <TextFieldElement
+                            label="Field name"
+                            name={`sponsorCustomFields.${index}.name`}
+                            control={control}
+                            variant="filled"
+                            size="small"
+                            margin="dense"
+                            disabled={isSubmitting}
+                            helperText={
+                                !field.id.startsWith('autogenerated-') ? `id: ${field.id}` : undefined
+                            }
+                        />
+                        <SelectElement
+                            label="Type"
+                            name={`sponsorCustomFields.${index}.type`}
+                            control={control}
+                            variant="filled"
+                            size="small"
+                            margin="dense"
+                            disabled={isSubmitting}
+                            options={[
+                                { id: 'text', label: 'Text' },
+                                { id: 'boolean', label: 'Boolean' },
+                            ]}
+                            sx={{ minWidth: 120 }}
+                        />
+                        <IconButton
+                            aria-label="Remove custom field"
+                            onClick={() => {
+                                remove(index)
+                            }}
+                            edge="end">
+                            <Delete />
+                        </IconButton>
+                    </Box>
+                ))}
+                <IconButton
+                    aria-label="Add sponsor custom field"
+                    onClick={() => {
+                        append({
+                            id: `autogenerated-${Date.now()}`,
+                            name: '',
+                            type: 'text',
+                        })
+                    }}>
+                    <Add />
+                </IconButton>
+            </Box>
+        </>
+    )
+}
diff --git a/src/events/page/settings/mapEventSettingsFormToMutateObject.ts b/src/events/page/settings/mapEventSettingsFormToMutateObject.ts
@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon'
-import { Category, Event, EventForForm, EventSettingForForm, Format, Track } from '../../../types'
+import { Category, Event, EventForForm, EventSettingForForm, Format, SponsorCustomField, Track } from '../../../types'
 import { slugify } from '../../../utils/slugify'
 import { DEFAULT_SESSION_CARD_BACKGROUND_COLOR } from '../schedule/scheduleConstants'
 
@@ -36,6 +36,16 @@ export const mapEventSettingsFormToMutateObject = (event: Event, data: EventForF
     const transcriptionPassword = data.transcriptionPassword || ''
     const timezone = data.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone
 
+    const sponsorCustomFieldsRaw: SponsorCustomField[] = (data.sponsorCustomFields || [])
+        .filter((field) => field.name && field.name.trim().length > 0)
+        .map((field) => ({
+            name: field.name.trim(),
+            type: field.type,
+            id: field.id.startsWith('autogenerated-') ? slugify(field.name.trim()) : field.id,
+        }))
+    // Deduplicate by id (last wins) to prevent silent data loss from duplicate names
+    const sponsorCustomFields = [...new Map(sponsorCustomFieldsRaw.map((f) => [f.id, f])).values()]
+
     return {
         ...event,
         name: eventName,
@@ -57,6 +67,7 @@ export const mapEventSettingsFormToMutateObject = (event: Event, data: EventForF
         gladiaAPIKey,
         transcriptionPassword,
         timezone,
+        sponsorCustomFields,
     }
 }
 
diff --git a/src/events/page/sponsors/components/SponsorForm.tsx b/src/events/page/sponsors/components/SponsorForm.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Event, Sponsor } from '../../../../types'
-import { FormContainer, TextFieldElement, useForm } from 'react-hook-form-mui'
-import { Grid } from '@mui/material'
+import { FormContainer, TextFieldElement, SwitchElement, useForm } from 'react-hook-form-mui'
+import { Grid, Typography } from '@mui/material'
 import LoadingButton from '@mui/lab/LoadingButton'
 import { ImageTextFieldElement } from '../../../../components/form/ImageTextFieldElement'
 import { SaveShortcut } from '../../../../components/form/SaveShortcut'
@@ -12,14 +12,24 @@ export type SponsorFormProps = {
     onSubmit: (sponsor: Sponsor) => void
 }
 export const SponsorForm = ({ event, sponsor, onSubmit }: SponsorFormProps) => {
-    const formContext = useForm({
-        defaultValues: sponsor
-            ? sponsor
-            : {
-                  name: '',
-                  logoUrl: '',
-                  website: undefined,
-              },
+    const customFields = event.sponsorCustomFields || []
+
+    const defaultCustomFields = customFields.reduce(
+        (acc, field) => {
+            acc[field.id] = field.type === 'boolean' ? false : ''
+            return acc
+        },
+        {} as { [key: string]: string | boolean }
+    )
+
+    const formContext = useForm<Sponsor>({
+        defaultValues: {
+            id: sponsor?.id || '',
+            name: sponsor?.name || '',
+            logoUrl: sponsor?.logoUrl || '',
+            website: sponsor?.website || undefined,
+            customFields: { ...defaultCustomFields, ...sponsor?.customFields },
+        },
     })
     const { formState } = formContext
 
@@ -29,12 +39,19 @@ export const SponsorForm = ({ event, sponsor, onSubmit }: SponsorFormProps) => {
         <FormContainer
             formContext={formContext}
             onSuccess={async (data) => {
+                const customFieldValues: { [key: string]: string | boolean } = {}
+                for (const field of customFields) {
+                    const value = data.customFields?.[field.id]
+                    customFieldValues[field.id] = field.type === 'boolean' ? !!value : value || ''
+                }
+
                 return onSubmit({
                     ...sponsor,
                     id: sponsor?.id || '',
                     name: data.name,
                     logoUrl: data.logoUrl,
                     website: data.website || null,
+                    customFields: customFieldValues,
                 } as Sponsor)
             }}>
             <Grid container spacing={4}>
@@ -80,6 +97,33 @@ export const SponsorForm = ({ event, sponsor, onSubmit }: SponsorFormProps) => {
                         disabled={isSubmitting}
                         type="url"
                     />
+
+                    {customFields.length > 0 && (
+                        <>
+                            <Typography fontWeight="600" mt={2} mb={1}>
+                                Custom fields
+                            </Typography>
+                            {customFields.map((field) =>
+                                field.type === 'boolean' ? (
+                                    <SwitchElement
+                                        key={field.id}
+                                        label={field.name}
+                                        name={`customFields.${field.id}`}
+                                    />
+                                ) : (
+                                    <TextFieldElement
+                                        key={field.id}
+                                        margin="dense"
+                                        fullWidth
+                                        label={field.name}
+                                        name={`customFields.${field.id}`}
+                                        variant="filled"
+                                        disabled={isSubmitting}
+                                    />
+                                )
+                            )}
+                        </>
+                    )}
                 </Grid>
             </Grid>
 
diff --git a/src/types.ts b/src/types.ts
@@ -117,6 +117,12 @@ export interface EventFiles {
     pdf: string | null
 }
 
+export interface SponsorCustomField {
+    id: string
+    name: string
+    type: 'boolean' | 'text'
+}
+
 export interface EventShortVidSettings {
     template: string | null
     server: string | null
@@ -165,6 +171,7 @@ export interface Event {
     color: string | null
     colorSecondary: string | null
     colorBackground: string | null
+    sponsorCustomFields: SponsorCustomField[]
     bupherSession?: string | null
     bupherOrganizationId?: string | null
     timezone: string | null
@@ -198,6 +205,7 @@ export interface Sponsor {
     logoUrl: string
     website: string | null
     jobPostToken?: string | null // Unique token for sponsor's job management page
+    customFields?: { [key: string]: string | boolean }
 }
 
 export interface SponsorCategory {

Original file line number	Diff line number	Diff line change
`@@ -138,6 +138,7 @@ export const generateStaticJson = async (firebaseApp: firebase.app.App, event: E`
`138`	`138`	`logoUrl: event.logoUrl,`
`139`	`139`	`logoUrl2: event.logoUrl2,`
`140`	`140`	`backgroundUrl: event.backgroundUrl,`
	`141`	`+ sponsorCustomFields: event.sponsorCustomFields \|\| [],`
`141`	`142`	`}`
`142`	`143`
`143`	`144`	`const outputPublic: JsonPublicOutput = {`
Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,7 @@ export const NewEventDialog = ({ isOpen, onClose }: NewEventDialogProps) => {`
`85`	`85`	`colorSecondary: null,`
`86`	`86`	`colorBackground: null,`
`87`	`87`	`timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,`
	`88`	`+ sponsorCustomFields: [],`
`88`	`89`	`publicEnabled: false,`
`89`	`90`	`}`
`90`	`91`	`mutation`