Add dynamic apply wizard customization with admin settings UI
- Create wizard config types, utilities, and defaults (wizard-config.ts) - Add admin apply settings page with drag-and-drop step ordering, dropdown option management, feature toggles, welcome message customization, and custom field builder with select/multiselect options editor - Build dynamic apply wizard component with animated step transitions, mobile-first responsive design, and config-driven form validation - Update step components to accept dynamic config (categories, ocean issues, field visibility, feature flags) - Replace hardcoded enum validation with string-based validation for admin-configurable dropdown values, with safe enum casting at storage layer - Add wizard template system (model, router, admin UI) with built-in MOPC Classic preset - Add program wizard config CRUD procedures to program router - Update application router getConfig to return wizardConfig, submit handler to store custom field data in metadataJson - Add edition-based apply page, project pool page, and supporting routers - Fix CSS (invalid sm:fixed-none), Enter key handler (skip textarea), safe area insets for notched phones, buildStepsArray field visibility Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
155
src/types/wizard-config.ts
Normal file
155
src/types/wizard-config.ts
Normal file
@@ -0,0 +1,155 @@
|
||||
import { z } from 'zod'
|
||||
|
||||
// --- Step Configuration ---
|
||||
|
||||
export const WIZARD_STEP_IDS = ['welcome', 'contact', 'project', 'team', 'additional', 'review'] as const
|
||||
export type WizardStepId = (typeof WIZARD_STEP_IDS)[number]
|
||||
|
||||
export const wizardStepSchema = z.object({
|
||||
id: z.enum(WIZARD_STEP_IDS),
|
||||
enabled: z.boolean().default(true),
|
||||
order: z.number().int().min(0),
|
||||
title: z.string().optional(),
|
||||
conditionalOn: z
|
||||
.object({
|
||||
field: z.string(),
|
||||
operator: z.enum(['equals', 'notEquals', 'in', 'notIn']),
|
||||
value: z.union([z.string(), z.array(z.string())]),
|
||||
})
|
||||
.optional(),
|
||||
})
|
||||
|
||||
// --- Field Configuration ---
|
||||
|
||||
export const wizardFieldValidationSchema = z.object({
|
||||
min: z.number().optional(),
|
||||
max: z.number().optional(),
|
||||
pattern: z.string().optional(),
|
||||
patternMessage: z.string().optional(),
|
||||
})
|
||||
|
||||
export const wizardFieldConfigSchema = z.object({
|
||||
required: z.boolean().optional(),
|
||||
visible: z.boolean().optional(),
|
||||
label: z.string().optional(),
|
||||
helpText: z.string().optional(),
|
||||
placeholder: z.string().optional(),
|
||||
validation: wizardFieldValidationSchema.optional(),
|
||||
})
|
||||
|
||||
// --- Dropdown Option ---
|
||||
|
||||
export const dropdownOptionSchema = z.object({
|
||||
value: z.string().min(1),
|
||||
label: z.string().min(1).max(100),
|
||||
description: z.string().max(300).optional(),
|
||||
icon: z.string().optional(),
|
||||
})
|
||||
|
||||
// --- Custom Field ---
|
||||
|
||||
export const customFieldSchema = z.object({
|
||||
id: z.string().min(1),
|
||||
type: z.enum(['text', 'textarea', 'number', 'select', 'multiselect', 'checkbox', 'date']),
|
||||
label: z.string().min(1).max(100),
|
||||
placeholder: z.string().optional(),
|
||||
helpText: z.string().optional(),
|
||||
required: z.boolean().default(false),
|
||||
options: z.array(z.string()).optional(),
|
||||
validation: wizardFieldValidationSchema.optional(),
|
||||
stepId: z.enum(WIZARD_STEP_IDS),
|
||||
order: z.number().int().default(0),
|
||||
})
|
||||
|
||||
// --- Welcome Message ---
|
||||
|
||||
export const welcomeMessageSchema = z.object({
|
||||
title: z.string().max(200).optional(),
|
||||
description: z.string().max(1000).optional(),
|
||||
imageUrl: z.string().url().optional(),
|
||||
})
|
||||
|
||||
// --- Feature Flags ---
|
||||
|
||||
export const wizardFeaturesSchema = z.object({
|
||||
enableWhatsApp: z.boolean().optional(),
|
||||
enableMentorship: z.boolean().optional(),
|
||||
enableTeamMembers: z.boolean().optional(),
|
||||
requireInstitution: z.boolean().optional(),
|
||||
})
|
||||
|
||||
// --- Main Config Schema ---
|
||||
|
||||
export const wizardConfigSchema = z.object({
|
||||
steps: z.array(wizardStepSchema).default([]),
|
||||
fields: z.record(z.string(), wizardFieldConfigSchema).default({}),
|
||||
competitionCategories: z.array(dropdownOptionSchema).optional(),
|
||||
oceanIssues: z.array(dropdownOptionSchema).optional(),
|
||||
features: wizardFeaturesSchema.optional(),
|
||||
welcomeMessage: welcomeMessageSchema.optional(),
|
||||
customFields: z.array(customFieldSchema).optional(),
|
||||
})
|
||||
|
||||
// --- Exported Types ---
|
||||
|
||||
export type WizardStep = z.infer<typeof wizardStepSchema>
|
||||
export type WizardFieldConfig = z.infer<typeof wizardFieldConfigSchema>
|
||||
export type WizardFieldValidation = z.infer<typeof wizardFieldValidationSchema>
|
||||
export type DropdownOption = z.infer<typeof dropdownOptionSchema>
|
||||
export type CustomField = z.infer<typeof customFieldSchema>
|
||||
export type WizardFeatures = z.infer<typeof wizardFeaturesSchema>
|
||||
export type WelcomeMessage = z.infer<typeof welcomeMessageSchema>
|
||||
export type WizardConfig = z.infer<typeof wizardConfigSchema>
|
||||
|
||||
// --- Default Configuration ---
|
||||
// Must match current hardcoded behavior exactly for backward compatibility
|
||||
|
||||
export const DEFAULT_COMPETITION_CATEGORIES: DropdownOption[] = [
|
||||
{
|
||||
value: 'BUSINESS_CONCEPT',
|
||||
label: 'Business Concepts',
|
||||
description: 'For students and recent graduates with innovative ocean-focused business ideas',
|
||||
icon: 'GraduationCap',
|
||||
},
|
||||
{
|
||||
value: 'STARTUP',
|
||||
label: 'Start-ups',
|
||||
description: 'For established companies working on ocean protection solutions',
|
||||
icon: 'Rocket',
|
||||
},
|
||||
]
|
||||
|
||||
export const DEFAULT_OCEAN_ISSUES: DropdownOption[] = [
|
||||
{ value: 'POLLUTION_REDUCTION', label: 'Reduction of pollution (plastics, chemicals, noise, light,...)' },
|
||||
{ value: 'CLIMATE_MITIGATION', label: 'Mitigation of climate change and sea-level rise' },
|
||||
{ value: 'TECHNOLOGY_INNOVATION', label: 'Technology & innovations' },
|
||||
{ value: 'SUSTAINABLE_SHIPPING', label: 'Sustainable shipping & yachting' },
|
||||
{ value: 'BLUE_CARBON', label: 'Blue carbon' },
|
||||
{ value: 'HABITAT_RESTORATION', label: 'Restoration of marine habitats & ecosystems' },
|
||||
{ value: 'COMMUNITY_CAPACITY', label: 'Capacity building for coastal communities' },
|
||||
{ value: 'SUSTAINABLE_FISHING', label: 'Sustainable fishing and aquaculture & blue food' },
|
||||
{ value: 'CONSUMER_AWARENESS', label: 'Consumer awareness and education' },
|
||||
{ value: 'OCEAN_ACIDIFICATION', label: 'Mitigation of ocean acidification' },
|
||||
{ value: 'OTHER', label: 'Other' },
|
||||
]
|
||||
|
||||
export const DEFAULT_WIZARD_CONFIG: WizardConfig = {
|
||||
steps: [
|
||||
{ id: 'welcome', enabled: true, order: 0, title: 'Category' },
|
||||
{ id: 'contact', enabled: true, order: 1, title: 'Contact' },
|
||||
{ id: 'project', enabled: true, order: 2, title: 'Project' },
|
||||
{ id: 'team', enabled: true, order: 3, title: 'Team' },
|
||||
{ id: 'additional', enabled: true, order: 4, title: 'Details' },
|
||||
{ id: 'review', enabled: true, order: 5, title: 'Review' },
|
||||
],
|
||||
fields: {},
|
||||
competitionCategories: DEFAULT_COMPETITION_CATEGORIES,
|
||||
oceanIssues: DEFAULT_OCEAN_ISSUES,
|
||||
features: {
|
||||
enableWhatsApp: false,
|
||||
enableMentorship: true,
|
||||
enableTeamMembers: true,
|
||||
requireInstitution: false,
|
||||
},
|
||||
customFields: [],
|
||||
}
|
||||
Reference in New Issue
Block a user