first commit
This commit is contained in:
Ravi Gulhane
commit
4bfc64f56d
|
|
@ -0,0 +1,181 @@
|
|||
#!/usr/bin/env bash
|
||||
#
|
||||
# EventBuzz production deploy
|
||||
#
|
||||
# Usage:
|
||||
# ./deploy.sh # backend + dashboard + visitor website + public web
|
||||
# ./deploy.sh backend
|
||||
# ./deploy.sh frontend
|
||||
# ./deploy.sh website
|
||||
# ./deploy.sh web
|
||||
# ./deploy.sh all
|
||||
#
|
||||
# Requirements: ssh, rsync, npm, aws CLI (profile stratawiztech)
|
||||
#
|
||||
set -euo pipefail
|
||||
|
||||
ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
SSH_KEY="${SSH_KEY:-$HOME/Documents/Keys/ravimac}"
|
||||
SSH_HOST="${SSH_HOST:-root@168.144.70.247}"
|
||||
BACKEND_REMOTE="${BACKEND_REMOTE:-/var/www/backend}"
|
||||
AWS_PROFILE="${AWS_PROFILE:-stratawiztech}"
|
||||
|
||||
FRONTEND_DIR="$ROOT/frontend"
|
||||
EVENTBUZZ_DIR="$ROOT/eventbuzz"
|
||||
WEB_DIR="$ROOT/web"
|
||||
BACKEND_DIR="$ROOT/backend"
|
||||
|
||||
S3_CONSOLE="s3://eventbuzzlive/console/"
|
||||
S3_WEBSITE="s3://eventbuzzlive/website/"
|
||||
S3_WEB="s3://eventbuzzlive/web/"
|
||||
|
||||
# CloudFront distributions (console dashboard + visitor website + public web)
|
||||
CF_CONSOLE="${CF_CONSOLE:-E1QQM75X0JF0IU}"
|
||||
CF_WEBSITE="${CF_WEBSITE:-E3ORUQT7269RIM}"
|
||||
CF_WEB="${CF_WEB:-ETZS6Z42DG7I6}"
|
||||
|
||||
log() { printf '\n\033[1;36m==>\033[0m %s\n' "$*"; }
|
||||
die() { printf '\033[1;31merror:\033[0m %s\n' "$*" >&2; exit 1; }
|
||||
|
||||
ssh_cmd() {
|
||||
ssh -i "$SSH_KEY" -o StrictHostKeyChecking=accept-new "$SSH_HOST" "$@"
|
||||
}
|
||||
|
||||
rsync_ssh() {
|
||||
rsync -avz -e "ssh -i $SSH_KEY -o StrictHostKeyChecking=accept-new" "$@"
|
||||
}
|
||||
|
||||
invalidate_cloudfront() {
|
||||
local distribution_id="$1"
|
||||
local label="$2"
|
||||
log "CloudFront invalidation ($label) → $distribution_id /*"
|
||||
aws cloudfront create-invalidation \
|
||||
--distribution-id "$distribution_id" \
|
||||
--paths "/*" \
|
||||
--profile "$AWS_PROFILE" \
|
||||
--output text \
|
||||
--query 'Invalidation.Id'
|
||||
}
|
||||
|
||||
# Ensure dashboard / visitor builds use production API URLs (not localhost).
|
||||
apply_production_env() {
|
||||
log "Applying production env for dashboard (frontend/.env.production)"
|
||||
if [[ ! -f "$FRONTEND_DIR/.env.production" ]]; then
|
||||
die "Missing $FRONTEND_DIR/.env.production — create it with production VITE_* URLs."
|
||||
fi
|
||||
# If a local .env exists, show what we're overriding for clarity
|
||||
if [[ -f "$FRONTEND_DIR/.env" ]]; then
|
||||
grep -E '^VITE_API_URL=' "$FRONTEND_DIR/.env.production" || true
|
||||
fi
|
||||
|
||||
log "Applying production env for visitor site (eventbuzz/.env.production)"
|
||||
if [[ ! -f "$EVENTBUZZ_DIR/.env.production" ]]; then
|
||||
die "Missing $EVENTBUZZ_DIR/.env.production — create it with production VITE_* URLs."
|
||||
fi
|
||||
grep -E '^VITE_API_BASE_URL=' "$EVENTBUZZ_DIR/.env.production" || true
|
||||
|
||||
log "Applying production env for public web (web/.env.production)"
|
||||
if [[ ! -f "$WEB_DIR/.env.production" ]]; then
|
||||
die "Missing $WEB_DIR/.env.production — create it with production VITE_* URLs."
|
||||
fi
|
||||
grep -E '^VITE_(API_BASE_URL|PUBLIC_WEB_BASE)=' "$WEB_DIR/.env.production" || true
|
||||
}
|
||||
|
||||
deploy_backend() {
|
||||
log "Deploying backend → $SSH_HOST:$BACKEND_REMOTE/"
|
||||
[[ -d "$BACKEND_DIR/src" ]] || die "Backend src folder not found at $BACKEND_DIR/src"
|
||||
[[ -f "$BACKEND_DIR/package.json" ]] || die "Backend package.json not found"
|
||||
[[ -f "$SSH_KEY" ]] || die "SSH key not found: $SSH_KEY"
|
||||
|
||||
rsync_ssh --delete \
|
||||
"$BACKEND_DIR/src/" \
|
||||
"$SSH_HOST:$BACKEND_REMOTE/src/"
|
||||
|
||||
log "Syncing package.json + package-lock.json"
|
||||
rsync_ssh \
|
||||
"$BACKEND_DIR/package.json" \
|
||||
"$BACKEND_DIR/package-lock.json" \
|
||||
"$SSH_HOST:$BACKEND_REMOTE/"
|
||||
|
||||
log "Installing dependencies + reloading API on server (pm2)"
|
||||
ssh_cmd "cd '$BACKEND_REMOTE' && npm ci --omit=dev && (pm2 reload all || pm2 restart all || echo 'pm2 reload skipped — run manually on server')"
|
||||
}
|
||||
|
||||
deploy_frontend() {
|
||||
log "Building dashboard (console) for production"
|
||||
apply_production_env
|
||||
cd "$FRONTEND_DIR"
|
||||
npm run build
|
||||
|
||||
log "Uploading dashboard dist → $S3_CONSOLE"
|
||||
aws s3 rm "$S3_CONSOLE" --recursive --profile "$AWS_PROFILE"
|
||||
aws s3 sync "$FRONTEND_DIR/dist" "$S3_CONSOLE" --profile "$AWS_PROFILE"
|
||||
|
||||
invalidate_cloudfront "$CF_CONSOLE" "console"
|
||||
|
||||
log "Dashboard deploy complete"
|
||||
}
|
||||
|
||||
deploy_website() {
|
||||
log "Building visitor website for production"
|
||||
apply_production_env
|
||||
cd "$EVENTBUZZ_DIR"
|
||||
npm run build
|
||||
|
||||
log "Uploading visitor site dist → $S3_WEBSITE"
|
||||
aws s3 rm "$S3_WEBSITE" --recursive --profile "$AWS_PROFILE"
|
||||
aws s3 sync "$EVENTBUZZ_DIR/dist" "$S3_WEBSITE" --profile "$AWS_PROFILE"
|
||||
|
||||
invalidate_cloudfront "$CF_WEBSITE" "website"
|
||||
|
||||
log "Visitor website deploy complete"
|
||||
}
|
||||
|
||||
deploy_web() {
|
||||
log "Building public web app for production"
|
||||
apply_production_env
|
||||
cd "$WEB_DIR"
|
||||
npm run build
|
||||
|
||||
log "Uploading public web dist → $S3_WEB"
|
||||
aws s3 rm "$S3_WEB" --recursive --profile "$AWS_PROFILE"
|
||||
aws s3 sync "$WEB_DIR/dist" "$S3_WEB" --profile "$AWS_PROFILE"
|
||||
|
||||
invalidate_cloudfront "$CF_WEB" "web"
|
||||
|
||||
log "Public web deploy complete"
|
||||
}
|
||||
|
||||
usage() {
|
||||
cat <<EOF
|
||||
Usage: $(basename "$0") [backend|frontend|website|web|all]
|
||||
|
||||
backend rsync backend/src + package files, npm ci on server, pm2 reload
|
||||
frontend production build + S3 sync to $S3_CONSOLE + CF invalidation
|
||||
website production build + S3 sync to $S3_WEBSITE + CF invalidation
|
||||
web production build + S3 sync to $S3_WEB + CF invalidation
|
||||
all run all four (default)
|
||||
|
||||
Environment overrides:
|
||||
SSH_KEY, SSH_HOST, BACKEND_REMOTE, AWS_PROFILE, CF_CONSOLE, CF_WEBSITE, CF_WEB
|
||||
EOF
|
||||
}
|
||||
|
||||
TARGET="${1:-all}"
|
||||
|
||||
case "$TARGET" in
|
||||
backend) deploy_backend ;;
|
||||
frontend) deploy_frontend ;;
|
||||
website) deploy_website ;;
|
||||
web) deploy_web ;;
|
||||
all)
|
||||
deploy_backend
|
||||
deploy_frontend
|
||||
deploy_website
|
||||
deploy_web
|
||||
;;
|
||||
-h|--help|help) usage ;;
|
||||
*) die "Unknown target: $TARGET (use backend|frontend|website|web|all)" ;;
|
||||
esac
|
||||
|
||||
log "Done."
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>EventBuzz</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
# nginx example for web.eventbuzz.live
|
||||
#
|
||||
# Deploy the Vite build output from `web/dist` and keep custom microsites on disk
|
||||
# at MICROSITE_STATIC_ROOT (same layout as today).
|
||||
#
|
||||
# Order matters: slug-based static locations must not capture /event/... paths.
|
||||
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
server_name web.eventbuzz.live;
|
||||
|
||||
# ssl_certificate ...
|
||||
# ssl_certificate_key ...
|
||||
|
||||
# Custom static microsites (publishFolder slugs, optional _draft suffix)
|
||||
location ~ ^/[a-z0-9-]+(_draft)?/ {
|
||||
root /var/www/microsites;
|
||||
try_files $uri $uri/ $uri/index.html =404;
|
||||
}
|
||||
|
||||
# React SPA — event-centric routes and assets
|
||||
root /var/www/eventbuzz-web/dist;
|
||||
index index.html;
|
||||
|
||||
location /event/ {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location /assets/ {
|
||||
try_files $uri =404;
|
||||
expires 7d;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
|
||||
# Local development
|
||||
# - API: http://localhost:3001/api
|
||||
# - Web SPA: cd web && npm run dev (port 5175)
|
||||
# - Dashboard: cd frontend && npm run dev
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "eventbuzz-web",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port 5175",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview --port 5175"
|
||||
},
|
||||
"dependencies": {
|
||||
"flatpickr": "^4.6.13",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.28.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^6.0.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import { EventMicrositePage } from './pages/EventMicrositePage';
|
||||
import { RegisterPage } from './pages/RegisterPage';
|
||||
import { FormPage } from './pages/FormPage';
|
||||
import { NotFoundPage } from './pages/NotFoundPage';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/event/:eventId" element={<EventMicrositePage />} />
|
||||
<Route path="/event/:eventId/register" element={<RegisterPage />} />
|
||||
<Route path="/event/:eventId/form/:formId" element={<FormPage />} />
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
const configuredApiBase = (import.meta.env.VITE_API_BASE_URL as string | undefined)?.trim();
|
||||
|
||||
function resolveApiBaseUrl(): string {
|
||||
if (configuredApiBase) {
|
||||
// Relative /api only works in dev (Vite proxy). In production it hits the web host.
|
||||
if (import.meta.env.PROD && configuredApiBase === '/api') {
|
||||
return 'https://api.eventbuzz.live/api';
|
||||
}
|
||||
return configuredApiBase.replace(/\/$/, '');
|
||||
}
|
||||
return import.meta.env.DEV ? '/api' : 'https://api.eventbuzz.live/api';
|
||||
}
|
||||
|
||||
export const API_BASE_URL = resolveApiBaseUrl();
|
||||
|
||||
export const PUBLIC_WEB_BASE =
|
||||
(import.meta.env.VITE_PUBLIC_WEB_BASE as string | undefined)?.replace(/\/$/, '') ||
|
||||
(typeof window !== 'undefined' ? window.location.origin : 'http://localhost:5175');
|
||||
|
||||
type ApiEnvelope<T> = {
|
||||
success?: boolean;
|
||||
data?: T;
|
||||
error?: { message?: string; code?: string };
|
||||
};
|
||||
|
||||
export async function apiGet<T>(path: string): Promise<T> {
|
||||
const url = path.startsWith('http') ? path : `${API_BASE_URL}${path.startsWith('/') ? path : `/${path}`}`;
|
||||
let res: Response;
|
||||
try {
|
||||
res = await fetch(url);
|
||||
} catch {
|
||||
throw new Error('Could not reach the API. If this persists, the server may be down or blocking cross-origin requests.');
|
||||
}
|
||||
let body: ApiEnvelope<T>;
|
||||
try {
|
||||
body = await res.json();
|
||||
} catch {
|
||||
if (res.status === 502 || res.status === 503 || res.status === 504) {
|
||||
throw new Error('The API is temporarily unavailable. Please try again in a few minutes.');
|
||||
}
|
||||
throw new Error(`Unexpected server response (${res.status}).`);
|
||||
}
|
||||
if (!body.success || body.data === undefined) {
|
||||
throw new Error(body.error?.message || 'Request failed');
|
||||
}
|
||||
return body.data;
|
||||
}
|
||||
|
||||
export async function apiPost<T>(path: string, payload: unknown): Promise<T> {
|
||||
const url = path.startsWith('http') ? path : `${API_BASE_URL}${path.startsWith('/') ? path : `/${path}`}`;
|
||||
let res: Response;
|
||||
try {
|
||||
res = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
} catch {
|
||||
throw new Error('Could not reach the API. If this persists, the server may be down or blocking cross-origin requests.');
|
||||
}
|
||||
let body: ApiEnvelope<T>;
|
||||
try {
|
||||
body = await res.json();
|
||||
} catch {
|
||||
if (res.status === 502 || res.status === 503 || res.status === 504) {
|
||||
throw new Error('The API is temporarily unavailable. Please try again in a few minutes.');
|
||||
}
|
||||
throw new Error(`Unexpected server response (${res.status}).`);
|
||||
}
|
||||
if (!body.success) {
|
||||
throw new Error(body.error?.message || 'Request failed');
|
||||
}
|
||||
return body.data as T;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { apiGet, apiPost } from './client';
|
||||
import type { PublicFormDefinition } from '../types';
|
||||
|
||||
export type CaptchaChallenge = {
|
||||
question: string;
|
||||
captchaToken: string;
|
||||
};
|
||||
|
||||
export const formsApi = {
|
||||
getEventForm(eventId: string, formId: string): Promise<PublicFormDefinition> {
|
||||
return apiGet<PublicFormDefinition>(`/public/events/${eventId}/forms/${formId}`);
|
||||
},
|
||||
|
||||
getCaptchaChallenge(): Promise<CaptchaChallenge> {
|
||||
return apiGet<CaptchaChallenge>('/public/captcha/challenge');
|
||||
},
|
||||
|
||||
submit(
|
||||
formId: string,
|
||||
payload: {
|
||||
data: Record<string, unknown>;
|
||||
participantId?: string;
|
||||
captchaToken?: string;
|
||||
captchaAnswer?: string;
|
||||
},
|
||||
): Promise<unknown> {
|
||||
return apiPost(`/forms/${formId}/submit`, payload);
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { apiGet } from './client';
|
||||
import type { PublicMicrositePayload, RegistrationInfo } from '../types';
|
||||
|
||||
export const micrositeApi = {
|
||||
get(eventId: string): Promise<PublicMicrositePayload> {
|
||||
return apiGet<PublicMicrositePayload>(`/public/events/${eventId}/microsite`);
|
||||
},
|
||||
|
||||
getRegistration(eventId: string): Promise<RegistrationInfo> {
|
||||
return apiGet<RegistrationInfo>(`/public/events/${eventId}/registration`);
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { apiPost } from './client';
|
||||
|
||||
export type MicrositeContactPayload = {
|
||||
eventId: string;
|
||||
notifyEmail: string;
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
email: string;
|
||||
message?: string;
|
||||
_gotcha?: string;
|
||||
};
|
||||
|
||||
export const visitorApi = {
|
||||
submitMicrositeContact(payload: MicrositeContactPayload): Promise<{ sent?: boolean }> {
|
||||
return apiPost('/visitor/microsite/contact', payload);
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,397 @@
|
|||
import type { FormField } from '../../types';
|
||||
import { FormDatePicker } from './FormDatePicker';
|
||||
import { FormTimePicker } from './FormTimePicker';
|
||||
import { FormSelectField } from './FormSelectField';
|
||||
import { FormCountryStateField } from './FormCountryStateField';
|
||||
import { FormFieldRemarks } from './FormFieldRemarks';
|
||||
import { fieldDataKey, fieldDisplayLabel, countryStateKeys, isCountryStateField } from '../../utils/formFieldNames';
|
||||
import { statesForCountry } from '../../data/countryStates';
|
||||
|
||||
/** @deprecated use fieldDataKey */
|
||||
export function dataKey(label?: string) {
|
||||
return (label || '').trim();
|
||||
}
|
||||
|
||||
export function fieldValueToData(field: FormField, values: Record<string, unknown>): Record<string, unknown> {
|
||||
if (field.type === 'section') return {};
|
||||
if (isCountryStateField(field)) {
|
||||
const { country, state } = countryStateKeys(field);
|
||||
return { [country]: values[country] ?? '', [state]: values[state] ?? '' };
|
||||
}
|
||||
const k = fieldDataKey(field);
|
||||
if (!k) return {};
|
||||
const value = values[k];
|
||||
if (field.type === 'checkboxes' && Array.isArray(value)) return { [k]: value };
|
||||
if (field.type === 'checkbox') return { [k]: value === true || value === 'true' ? 'Yes' : '' };
|
||||
return { [k]: value };
|
||||
}
|
||||
|
||||
export function isStarRatingField(field: FormField): boolean {
|
||||
if (field.type === 'stars') return true;
|
||||
if (field.type !== 'select' || !field.options?.length) return false;
|
||||
const o = field.options.map((x) => String(x));
|
||||
return o.length === 5 && o.every((v, i) => v === String(i + 1));
|
||||
}
|
||||
|
||||
export function isTextareaField(field: FormField): boolean {
|
||||
const normalized = String(field.type || '')
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/[\s_-]+/g, '');
|
||||
return normalized === 'textarea' || normalized === 'longtext';
|
||||
}
|
||||
|
||||
export function starRatingMax(field: FormField): number {
|
||||
if (field.type === 'stars') {
|
||||
const n = field.options?.length;
|
||||
return n && n > 0 ? n : 5;
|
||||
}
|
||||
return 5;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
fields: FormField[];
|
||||
values: Record<string, unknown>;
|
||||
fileNames: Record<string, string>;
|
||||
onChange: (key: string, value: unknown) => void;
|
||||
onFileNamesChange: (key: string, name: string) => void;
|
||||
};
|
||||
|
||||
export function DynamicFormFields({ fields, values, fileNames, onChange, onFileNamesChange }: Props) {
|
||||
return (
|
||||
<>
|
||||
{fields.map((field, index) => {
|
||||
if (field.type === 'section') {
|
||||
const title = (field.label || '').trim();
|
||||
if (!title) return null;
|
||||
return (
|
||||
<div key={`section-${index}`} className="form-section-divider" role="separator" aria-label={title}>
|
||||
{index > 0 ? <hr className="form-section-rule" /> : null}
|
||||
<h3 className="form-section-title">{title}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const k = fieldDataKey(field);
|
||||
const display = fieldDisplayLabel(field);
|
||||
if (!k) return null;
|
||||
const req = field.required;
|
||||
|
||||
if (field.type === 'text' || field.type === 'email' || field.type === 'phone') {
|
||||
return (
|
||||
<div key={`field-${index}-${k}`}>
|
||||
<label className="form-label">
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</label>
|
||||
<input
|
||||
className="form-input"
|
||||
type={field.type === 'email' ? 'email' : field.type === 'phone' ? 'tel' : 'text'}
|
||||
value={String(values[k] ?? '')}
|
||||
onChange={(e) => onChange(k, e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
required={!!req}
|
||||
/>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (field.type === 'date') {
|
||||
return (
|
||||
<div key={`field-${index}-${k}`}>
|
||||
<label className="form-label" htmlFor={`field-${k}-date`}>
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</label>
|
||||
<FormDatePicker
|
||||
id={`field-${k}-date`}
|
||||
value={String(values[k] ?? '')}
|
||||
onChange={(v) => onChange(k, v)}
|
||||
required={!!req}
|
||||
/>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (field.type === 'time') {
|
||||
return (
|
||||
<div key={`field-${index}-${k}`}>
|
||||
<label className="form-label" htmlFor={`field-${k}-time`}>
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</label>
|
||||
<FormTimePicker
|
||||
id={`field-${k}-time`}
|
||||
value={String(values[k] ?? '')}
|
||||
onChange={(v) => onChange(k, v)}
|
||||
required={!!req}
|
||||
/>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isTextareaField(field)) {
|
||||
return (
|
||||
<div key={`field-${index}-${k}`}>
|
||||
<label className="form-label">
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</label>
|
||||
<textarea
|
||||
className="form-input form-textarea"
|
||||
value={String(values[k] ?? '')}
|
||||
onChange={(e) => onChange(k, e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
required={!!req}
|
||||
rows={4}
|
||||
/>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isStarRatingField(field)) {
|
||||
const max = starRatingMax(field);
|
||||
const raw = values[k];
|
||||
const v = raw != null && raw !== '' ? parseInt(String(raw), 10) : 0;
|
||||
const selected = !Number.isNaN(v) && v >= 1 && v <= max ? v : 0;
|
||||
return (
|
||||
<div key={`field-${index}-${k}`}>
|
||||
<div className="form-label" id={`star-legend-${k}`}>
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</div>
|
||||
<div role="radiogroup" aria-labelledby={`star-legend-${k}`} style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
|
||||
{Array.from({ length: max }, (_, i) => {
|
||||
const starN = i + 1;
|
||||
const filled = selected >= starN;
|
||||
return (
|
||||
<button
|
||||
key={starN}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={selected === starN}
|
||||
aria-label={`${starN} of ${max} stars`}
|
||||
onClick={() => onChange(k, String(starN))}
|
||||
style={{
|
||||
fontSize: '2rem',
|
||||
lineHeight: 1,
|
||||
width: 44,
|
||||
height: 44,
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
cursor: 'pointer',
|
||||
padding: 0,
|
||||
color: filled ? '#ca8a04' : '#e2e8f0',
|
||||
}}
|
||||
>
|
||||
★
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (field.type === 'select' && (field.options?.length ?? 0) > 0) {
|
||||
return (
|
||||
<div key={`field-${index}-${k}`}>
|
||||
<label className="form-label">
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</label>
|
||||
<FormSelectField
|
||||
value={String(values[k] ?? '')}
|
||||
options={field.options!}
|
||||
onChange={(v) => onChange(k, v)}
|
||||
allowOther={field.allowOther}
|
||||
otherLabel={field.otherLabel}
|
||||
required={!!req}
|
||||
/>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (field.type === 'radio' && (field.options?.length ?? 0) > 0) {
|
||||
return (
|
||||
<fieldset key={`field-${index}-${k}`} style={{ border: 'none', padding: 0, margin: 0 }}>
|
||||
<legend className="form-label" style={{ marginBottom: 8 }}>
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</legend>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{field.options!.map((o) => (
|
||||
<label key={o} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.9rem', cursor: 'pointer' }}>
|
||||
<input type="radio" name={k} value={o} checked={values[k] === o} onChange={() => onChange(k, o)} />
|
||||
{o}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</fieldset>
|
||||
);
|
||||
}
|
||||
|
||||
if (field.type === 'checkboxes' && (field.options?.length ?? 0) > 0) {
|
||||
const cur = (values[k] as string[]) || [];
|
||||
return (
|
||||
<fieldset key={`field-${index}-${k}`} style={{ border: 'none', padding: 0, margin: 0 }}>
|
||||
<legend className="form-label" style={{ marginBottom: 8 }}>
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</legend>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{field.options!.map((o) => {
|
||||
const checked = cur.includes(o);
|
||||
return (
|
||||
<label key={o} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.9rem', cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => onChange(k, checked ? cur.filter((x) => x !== o) : [...cur, o])}
|
||||
/>
|
||||
{o}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</fieldset>
|
||||
);
|
||||
}
|
||||
|
||||
if (field.type === 'checkbox') {
|
||||
return (
|
||||
<div key={`field-${index}-${k}`}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '0.9rem', cursor: 'pointer' }}>
|
||||
<input type="checkbox" checked={!!values[k]} onChange={(e) => onChange(k, e.target.checked)} />
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</label>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (field.type === 'file') {
|
||||
return (
|
||||
<div key={`field-${index}-${k}`}>
|
||||
<span className="form-label">
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</span>
|
||||
<input
|
||||
type="file"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) {
|
||||
onChange(k, '');
|
||||
onFileNamesChange(k, '');
|
||||
return;
|
||||
}
|
||||
onFileNamesChange(k, file.name);
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => onChange(k, String(reader.result || ''));
|
||||
reader.onerror = () => onChange(k, '');
|
||||
reader.readAsDataURL(file);
|
||||
}}
|
||||
style={{ fontSize: '0.85rem' }}
|
||||
/>
|
||||
{fileNames[k] ? <p style={{ margin: '6px 0 0', fontSize: '0.8rem', color: '#64748b' }}>{fileNames[k]}</p> : null}
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isCountryStateField(field)) {
|
||||
const { country: countryKey, state: stateKey } = countryStateKeys(field);
|
||||
return (
|
||||
<div key={`field-${index}-${k}`}>
|
||||
<div className="form-label">
|
||||
{display}
|
||||
{req ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</div>
|
||||
<FormCountryStateField
|
||||
country={String(values[countryKey] ?? '')}
|
||||
state={String(values[stateKey] ?? '')}
|
||||
onCountryChange={(v) => onChange(countryKey, v)}
|
||||
onStateChange={(v) => onChange(stateKey, v)}
|
||||
required={!!req}
|
||||
/>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={`field-${index}-${k}`}>
|
||||
<label className="form-label">{display}</label>
|
||||
<input
|
||||
className="form-input"
|
||||
type="text"
|
||||
value={String(values[k] ?? '')}
|
||||
onChange={(e) => onChange(k, e.target.value)}
|
||||
/>
|
||||
<FormFieldRemarks text={field.remarks} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function validateFormFields(fields: FormField[], values: Record<string, unknown>): string | null {
|
||||
for (const field of fields) {
|
||||
if (field.type === 'section') continue;
|
||||
const display = fieldDisplayLabel(field);
|
||||
if (!field.required) continue;
|
||||
|
||||
if (isCountryStateField(field)) {
|
||||
const { country, state } = countryStateKeys(field);
|
||||
const countryVal = values[country];
|
||||
const stateVal = values[state];
|
||||
if (countryVal == null || (typeof countryVal === 'string' && countryVal.trim() === '')) {
|
||||
return `“${display}” country is required.`;
|
||||
}
|
||||
const stateOptions = statesForCountry(String(countryVal));
|
||||
if (
|
||||
stateOptions.length > 0 &&
|
||||
(stateVal == null || (typeof stateVal === 'string' && stateVal.trim() === ''))
|
||||
) {
|
||||
return `“${display}” state is required.`;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
const k = fieldDataKey(field);
|
||||
if (!k) continue;
|
||||
const t = field.type;
|
||||
if (t === 'checkboxes') {
|
||||
const arr = values[k];
|
||||
if (!Array.isArray(arr) || arr.length === 0) return `“${display}” is required.`;
|
||||
continue;
|
||||
}
|
||||
if (t === 'checkbox') {
|
||||
if (!values[k]) return `“${display}” is required.`;
|
||||
continue;
|
||||
}
|
||||
const v = values[k];
|
||||
if (v == null || (typeof v === 'string' && v.trim() === '')) return `“${display}” is required.`;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function buildSubmitData(fields: FormField[], values: Record<string, unknown>): Record<string, unknown> {
|
||||
const data: Record<string, unknown> = {};
|
||||
for (const field of fields) {
|
||||
if (field.type === 'section') continue;
|
||||
Object.assign(data, fieldValueToData(field, values));
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { formsApi } from '../../api/forms';
|
||||
|
||||
type CaptchaMode = 'server' | 'local';
|
||||
|
||||
type Props = {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
onTokenChange: (token: string) => void;
|
||||
onModeChange?: (mode: CaptchaMode, localExpectedAnswer: string | null) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
function createLocalChallenge() {
|
||||
const a = Math.floor(Math.random() * 9) + 1;
|
||||
const b = Math.floor(Math.random() * 9) + 1;
|
||||
return {
|
||||
question: `${a} + ${b} = ?`,
|
||||
answer: String(a + b),
|
||||
};
|
||||
}
|
||||
|
||||
export function FormCaptchaField({ value, onChange, onTokenChange, onModeChange, disabled }: Props) {
|
||||
const [question, setQuestion] = useState('Loading…');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const onChangeRef = useRef(onChange);
|
||||
const onTokenChangeRef = useRef(onTokenChange);
|
||||
const onModeChangeRef = useRef(onModeChange);
|
||||
|
||||
useEffect(() => {
|
||||
onChangeRef.current = onChange;
|
||||
onTokenChangeRef.current = onTokenChange;
|
||||
onModeChangeRef.current = onModeChange;
|
||||
});
|
||||
|
||||
const applyLocalCaptcha = useCallback(() => {
|
||||
const challenge = createLocalChallenge();
|
||||
setQuestion(challenge.question);
|
||||
onTokenChangeRef.current('');
|
||||
onModeChangeRef.current?.('local', challenge.answer);
|
||||
onChangeRef.current('');
|
||||
}, []);
|
||||
|
||||
const reload = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const challenge = await formsApi.getCaptchaChallenge();
|
||||
setQuestion(challenge.question);
|
||||
onTokenChangeRef.current(challenge.captchaToken);
|
||||
onModeChangeRef.current?.('server', null);
|
||||
onChangeRef.current('');
|
||||
} catch {
|
||||
applyLocalCaptcha();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [applyLocalCaptcha]);
|
||||
|
||||
const reloadRef = useRef(reload);
|
||||
reloadRef.current = reload;
|
||||
|
||||
useEffect(() => {
|
||||
void reloadRef.current();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="form-captcha-answer">
|
||||
Security check
|
||||
</label>
|
||||
<div className="form-captcha-row">
|
||||
<span className="form-captcha-question" aria-live="polite">
|
||||
{question}
|
||||
</span>
|
||||
<input
|
||||
id="form-captcha-answer"
|
||||
className="form-input form-captcha-input"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="off"
|
||||
placeholder="Answer"
|
||||
value={value}
|
||||
disabled={disabled || loading}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="form-captcha-reload"
|
||||
onClick={() => void reload()}
|
||||
disabled={disabled || loading}
|
||||
aria-label="Reload captcha"
|
||||
>
|
||||
↻
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function validateCaptchaAnswer(
|
||||
mode: CaptchaMode,
|
||||
answer: string,
|
||||
token: string,
|
||||
localExpectedAnswer: string | null,
|
||||
): string | null {
|
||||
const trimmed = answer.trim();
|
||||
if (!trimmed) {
|
||||
return 'Please solve the captcha.';
|
||||
}
|
||||
if (mode === 'server') {
|
||||
if (!token) {
|
||||
return 'Captcha is not ready. Please reload and try again.';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
if (trimmed !== localExpectedAnswer) {
|
||||
return 'Incorrect captcha answer. Please try again.';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import { useEffect } from 'react';
|
||||
import { COUNTRY_NAMES, DEFAULT_COUNTRY, statesForCountry } from '../../data/countryStates';
|
||||
import { FormSelectField } from './FormSelectField';
|
||||
|
||||
type Props = {
|
||||
country: string;
|
||||
state: string;
|
||||
onCountryChange: (value: string) => void;
|
||||
onStateChange: (value: string) => void;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
export function FormCountryStateField({
|
||||
country,
|
||||
state,
|
||||
onCountryChange,
|
||||
onStateChange,
|
||||
required,
|
||||
}: Props) {
|
||||
useEffect(() => {
|
||||
if (!country) onCountryChange(DEFAULT_COUNTRY);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- default once on mount
|
||||
}, []);
|
||||
|
||||
const effectiveCountry = country || DEFAULT_COUNTRY;
|
||||
const stateOptions = statesForCountry(effectiveCountry);
|
||||
|
||||
const handleCountryChange = (next: string) => {
|
||||
onCountryChange(next);
|
||||
const nextStates = statesForCountry(next);
|
||||
if (state && !nextStates.includes(state)) onStateChange('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-country-state">
|
||||
<div className="form-country-state-row">
|
||||
<label className="form-label form-country-state-label">
|
||||
Country
|
||||
{required ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</label>
|
||||
<FormSelectField
|
||||
value={effectiveCountry}
|
||||
options={COUNTRY_NAMES}
|
||||
onChange={handleCountryChange}
|
||||
required={!!required}
|
||||
placeholder="Select country…"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-country-state-row">
|
||||
<label className="form-label form-country-state-label">
|
||||
State
|
||||
{required ? <span style={{ color: '#dc2626' }}> *</span> : null}
|
||||
</label>
|
||||
<FormSelectField
|
||||
value={state}
|
||||
options={stateOptions}
|
||||
onChange={onStateChange}
|
||||
required={!!required && stateOptions.length > 0}
|
||||
placeholder={stateOptions.length ? 'Select state…' : 'No states available'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
import { useEffect, useRef } from 'react';
|
||||
import flatpickr from 'flatpickr';
|
||||
import type { Instance } from 'flatpickr/dist/types/instance';
|
||||
import 'flatpickr/dist/flatpickr.min.css';
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
required?: boolean;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
export function FormDatePicker({ id, value, onChange, required, placeholder = 'Select date' }: Props) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const fpRef = useRef<Instance | null>(null);
|
||||
const onChangeRef = useRef(onChange);
|
||||
onChangeRef.current = onChange;
|
||||
|
||||
useEffect(() => {
|
||||
const el = inputRef.current;
|
||||
if (!el) return;
|
||||
|
||||
fpRef.current = flatpickr(el, {
|
||||
dateFormat: 'Y-m-d',
|
||||
altInput: true,
|
||||
altFormat: 'M j, Y',
|
||||
altInputClass: 'form-input form-picker-input',
|
||||
defaultDate: value || undefined,
|
||||
disableMobile: true,
|
||||
onChange: (_dates, dateStr) => {
|
||||
onChangeRef.current(dateStr);
|
||||
},
|
||||
});
|
||||
|
||||
return () => {
|
||||
fpRef.current?.destroy();
|
||||
fpRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fp = fpRef.current;
|
||||
if (!fp) return;
|
||||
const current = fp.selectedDates.length ? fp.formatDate(fp.selectedDates[0], 'Y-m-d') : '';
|
||||
if (current !== value) {
|
||||
fp.setDate(value || '', false);
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
id={id}
|
||||
type="text"
|
||||
className="form-picker-source"
|
||||
readOnly
|
||||
required={required}
|
||||
placeholder={placeholder}
|
||||
aria-required={required || undefined}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
type Props = {
|
||||
text?: string;
|
||||
};
|
||||
|
||||
export function FormFieldRemarks({ text }: Props) {
|
||||
const trimmed = text?.trim();
|
||||
if (!trimmed) return null;
|
||||
return <p className="form-field-remarks">{trimmed}</p>;
|
||||
}
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
import { useEffect, useId, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
SELECT_OTHER_VALUE,
|
||||
normalizeSelectOptions,
|
||||
otherTextFromValue,
|
||||
selectControlValue,
|
||||
type SelectOptionItem,
|
||||
} from './selectWithOtherUtils';
|
||||
|
||||
type Props = {
|
||||
value: string;
|
||||
options: string[] | SelectOptionItem[];
|
||||
onChange: (value: string) => void;
|
||||
required?: boolean;
|
||||
placeholder?: string;
|
||||
allowOther?: boolean;
|
||||
otherLabel?: string;
|
||||
otherInputPlaceholder?: string;
|
||||
};
|
||||
|
||||
export function FormSelectField({
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
required,
|
||||
placeholder = 'Select…',
|
||||
allowOther,
|
||||
otherLabel = 'Other',
|
||||
otherInputPlaceholder = 'Please specify',
|
||||
}: Props) {
|
||||
const normalized = useMemo(() => normalizeSelectOptions(options), [options]);
|
||||
const optionValues = useMemo(() => normalized.map((o) => o.value), [normalized]);
|
||||
const otherValue = SELECT_OTHER_VALUE;
|
||||
const stored = String(value ?? '');
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [menuValue, setMenuValue] = useState(() =>
|
||||
selectControlValue(stored, optionValues, allowOther, otherValue),
|
||||
);
|
||||
const [otherText, setOtherText] = useState(() => otherTextFromValue(stored, optionValues, allowOther));
|
||||
|
||||
const wrapRef = useRef<HTMLDivElement>(null);
|
||||
const listId = useId();
|
||||
|
||||
useEffect(() => {
|
||||
setMenuValue(selectControlValue(stored, optionValues, allowOther, otherValue));
|
||||
setOtherText(otherTextFromValue(stored, optionValues, allowOther));
|
||||
}, [stored, allowOther, otherValue, optionValues]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onDoc = (e: MouseEvent) => {
|
||||
if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') setOpen(false);
|
||||
};
|
||||
document.addEventListener('mousedown', onDoc);
|
||||
document.addEventListener('keydown', onKey);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', onDoc);
|
||||
document.removeEventListener('keydown', onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const pick = (next: string) => {
|
||||
setMenuValue(next);
|
||||
setOpen(false);
|
||||
if (next === otherValue) {
|
||||
onChange(otherText.trim());
|
||||
} else {
|
||||
setOtherText('');
|
||||
onChange(next);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOtherTextChange = (text: string) => {
|
||||
setOtherText(text);
|
||||
if (menuValue === otherValue) {
|
||||
onChange(text);
|
||||
}
|
||||
};
|
||||
|
||||
const triggerLabel =
|
||||
menuValue === otherValue ? otherLabel || 'Other'
|
||||
: stored ? stored
|
||||
: placeholder;
|
||||
const isPlaceholder = !stored && menuValue !== otherValue;
|
||||
|
||||
const requiredValue = menuValue === otherValue ? otherText.trim() : stored;
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<div ref={wrapRef} className={`form-select-wrap${open ? ' form-select-wrap--open' : ''}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="form-input form-select-trigger"
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open}
|
||||
aria-controls={listId}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
<span className={`form-select-value${isPlaceholder ? ' form-select-value--placeholder' : ''}`}>
|
||||
{triggerLabel}
|
||||
</span>
|
||||
<span className="form-select-chevron" aria-hidden>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M4 6l4 4 4-4"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
{required ? (
|
||||
<input
|
||||
tabIndex={-1}
|
||||
aria-hidden
|
||||
className="form-select-native-required"
|
||||
value={requiredValue}
|
||||
required
|
||||
onChange={() => {}}
|
||||
/>
|
||||
) : null}
|
||||
{open ? (
|
||||
<ul id={listId} className="form-select-menu" role="listbox">
|
||||
{!required ? (
|
||||
<li role="option" aria-selected={!stored && menuValue !== otherValue}>
|
||||
<button
|
||||
type="button"
|
||||
className={`form-select-option${!stored && menuValue !== otherValue ? ' form-select-option--active' : ''}`}
|
||||
onClick={() => pick('')}
|
||||
>
|
||||
{placeholder}
|
||||
</button>
|
||||
</li>
|
||||
) : null}
|
||||
{normalized.map((o) => (
|
||||
<li key={o.value} role="option" aria-selected={menuValue === o.value}>
|
||||
<button
|
||||
type="button"
|
||||
className={`form-select-option${menuValue === o.value ? ' form-select-option--active' : ''}`}
|
||||
onClick={() => pick(o.value)}
|
||||
>
|
||||
{o.label}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{allowOther ? (
|
||||
<li role="option" aria-selected={menuValue === otherValue}>
|
||||
<button
|
||||
type="button"
|
||||
className={`form-select-option${menuValue === otherValue ? ' form-select-option--active' : ''}`}
|
||||
onClick={() => pick(otherValue)}
|
||||
>
|
||||
{otherLabel || 'Other'}
|
||||
</button>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
{allowOther && menuValue === otherValue ? (
|
||||
<input
|
||||
type="text"
|
||||
className="form-input"
|
||||
value={otherText}
|
||||
onChange={(e) => handleOtherTextChange(e.target.value)}
|
||||
placeholder={otherInputPlaceholder}
|
||||
required={!!required}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { formsApi } from '../../api/forms';
|
||||
import type { PublicFormDefinition } from '../../types';
|
||||
import { PublicFormEventHeader } from './PublicFormEventHeader';
|
||||
import { DynamicFormFields, buildSubmitData, validateFormFields } from './DynamicFormFields';
|
||||
import { FormCaptchaField, validateCaptchaAnswer } from './FormCaptchaField';
|
||||
import { assignUniqueFieldNames } from '../../utils/formFieldNames';
|
||||
import { ensureRegistrationCoreFields } from '../../utils/registrationFormFields';
|
||||
|
||||
type Props = {
|
||||
eventId: string;
|
||||
formId: string;
|
||||
titleOverride?: string;
|
||||
};
|
||||
|
||||
export function FormShell({ eventId, formId, titleOverride }: Props) {
|
||||
const embed = useMemo(
|
||||
() => typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('embed') === '1',
|
||||
[],
|
||||
);
|
||||
const [form, setForm] = useState<PublicFormDefinition | null>(null);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [values, setValues] = useState<Record<string, unknown>>({});
|
||||
const [fileNames, setFileNames] = useState<Record<string, string>>({});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
const [done, setDone] = useState(false);
|
||||
const [captchaAnswer, setCaptchaAnswer] = useState('');
|
||||
const [captchaToken, setCaptchaToken] = useState('');
|
||||
const [captchaMode, setCaptchaMode] = useState<'server' | 'local'>('server');
|
||||
const [localCaptchaAnswer, setLocalCaptchaAnswer] = useState<string | null>(null);
|
||||
|
||||
const handleCaptchaModeChange = useCallback((mode: 'server' | 'local', localAnswer: string | null) => {
|
||||
setCaptchaMode(mode);
|
||||
setLocalCaptchaAnswer(localAnswer);
|
||||
}, []);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!eventId || !formId) return;
|
||||
setLoadError(null);
|
||||
try {
|
||||
const f = await formsApi.getEventForm(eventId, formId);
|
||||
const rawFields = f.type === 'registration' ? ensureRegistrationCoreFields(f.fields || []) : f.fields || [];
|
||||
setForm({ ...f, fields: assignUniqueFieldNames(rawFields) });
|
||||
} catch (e) {
|
||||
setLoadError(e instanceof Error ? e.message : 'Could not load form.');
|
||||
}
|
||||
}, [eventId, formId]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const onSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!formId || !form) return;
|
||||
setSubmitError(null);
|
||||
const err = validateFormFields(form.fields || [], values);
|
||||
if (err) {
|
||||
setSubmitError(err);
|
||||
return;
|
||||
}
|
||||
if (!captchaAnswer.trim()) {
|
||||
setSubmitError('Please solve the captcha.');
|
||||
return;
|
||||
}
|
||||
const captchaErr = validateCaptchaAnswer(captchaMode, captchaAnswer, captchaToken, localCaptchaAnswer);
|
||||
if (captchaErr) {
|
||||
setSubmitError(captchaErr);
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await formsApi.submit(formId, {
|
||||
data: buildSubmitData(form.fields || [], values),
|
||||
...(captchaMode === 'server' && captchaToken
|
||||
? { captchaToken, captchaAnswer: captchaAnswer.trim() }
|
||||
: {}),
|
||||
});
|
||||
setDone(true);
|
||||
} catch (e) {
|
||||
setSubmitError(e instanceof Error ? e.message : 'Submit failed.');
|
||||
setCaptchaAnswer('');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loadError) {
|
||||
return (
|
||||
<div className="form-page-center">
|
||||
<p style={{ margin: 0 }}>{loadError}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!form) {
|
||||
return (
|
||||
<div className="form-page-center">
|
||||
<p style={{ margin: 0, color: '#64748b' }}>Loading…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (done) {
|
||||
const msg = form.settings?.thankYouMessage?.trim() || 'Thank you for your response.';
|
||||
const ev = form.event;
|
||||
return (
|
||||
<div className={embed ? 'form-page-center form-page-center--embed' : 'form-page-center'}>
|
||||
<div className="form-panel" style={{ maxWidth: 520 }}>
|
||||
{ev ? <PublicFormEventHeader event={ev} variant="embedded" /> : null}
|
||||
<h1 className="form-title" style={{ fontSize: '1.2rem' }}>
|
||||
{titleOverride || form.name}
|
||||
</h1>
|
||||
<p style={{ margin: 0, fontSize: '0.95rem', lineHeight: 1.5 }}>{msg}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ev = form.event;
|
||||
const pageTitle = titleOverride || form.name;
|
||||
|
||||
return (
|
||||
<div className={embed ? 'form-page form-page--embed' : 'form-page'}>
|
||||
<div className="form-card">
|
||||
{ev ? <PublicFormEventHeader event={ev} /> : null}
|
||||
<h1 className="form-title" style={{ fontSize: ev ? '1.25rem' : '1.5rem' }}>
|
||||
{pageTitle}
|
||||
</h1>
|
||||
{form.description ? <p className="form-desc">{form.description}</p> : <div style={{ marginBottom: 24 }} />}
|
||||
|
||||
<form className="form-panel" onSubmit={(e) => void onSubmit(e)}>
|
||||
<DynamicFormFields
|
||||
fields={form.fields || []}
|
||||
values={values}
|
||||
fileNames={fileNames}
|
||||
onChange={(key, v) => setValues((prev) => ({ ...prev, [key]: v }))}
|
||||
onFileNamesChange={(key, name) => setFileNames((prev) => ({ ...prev, [key]: name }))}
|
||||
/>
|
||||
<FormCaptchaField
|
||||
value={captchaAnswer}
|
||||
onChange={setCaptchaAnswer}
|
||||
onTokenChange={setCaptchaToken}
|
||||
onModeChange={handleCaptchaModeChange}
|
||||
disabled={submitting}
|
||||
/>
|
||||
{submitError ? <p className="form-error">{submitError}</p> : null}
|
||||
<button type="submit" className="form-submit" disabled={submitting}>
|
||||
{submitting ? 'Submitting…' : 'Submit'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { useEffect, useRef } from 'react';
|
||||
import flatpickr from 'flatpickr';
|
||||
import type { Instance } from 'flatpickr/dist/types/instance';
|
||||
import 'flatpickr/dist/flatpickr.min.css';
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
required?: boolean;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
export function FormTimePicker({ id, value, onChange, required, placeholder = 'Select time' }: Props) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const fpRef = useRef<Instance | null>(null);
|
||||
const onChangeRef = useRef(onChange);
|
||||
onChangeRef.current = onChange;
|
||||
|
||||
useEffect(() => {
|
||||
const el = inputRef.current;
|
||||
if (!el) return;
|
||||
|
||||
fpRef.current = flatpickr(el, {
|
||||
enableTime: true,
|
||||
noCalendar: true,
|
||||
dateFormat: 'H:i',
|
||||
altInput: true,
|
||||
altFormat: 'h:i K',
|
||||
altInputClass: 'form-input form-picker-input form-picker-input--time',
|
||||
time_24hr: false,
|
||||
defaultDate: value || undefined,
|
||||
disableMobile: true,
|
||||
onChange: (_dates, timeStr) => {
|
||||
onChangeRef.current(timeStr);
|
||||
},
|
||||
});
|
||||
|
||||
return () => {
|
||||
fpRef.current?.destroy();
|
||||
fpRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fp = fpRef.current;
|
||||
if (!fp) return;
|
||||
const current = fp.selectedDates.length ? fp.formatDate(fp.selectedDates[0], 'H:i') : '';
|
||||
if (current !== value) {
|
||||
fp.setDate(value || '', false);
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
id={id}
|
||||
type="text"
|
||||
className="form-picker-source"
|
||||
readOnly
|
||||
required={required}
|
||||
placeholder={placeholder}
|
||||
aria-required={required || undefined}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import type { PublicFormEventSummary } from '../../types';
|
||||
|
||||
const EVENT_TYPE_LABEL: Record<string, string> = {
|
||||
conference: 'Conference',
|
||||
workshop: 'Workshop',
|
||||
summit: 'Summit',
|
||||
cme: 'CME',
|
||||
webinar: 'Webinar',
|
||||
};
|
||||
|
||||
function formatEventType(t?: string): string {
|
||||
if (!t) return '';
|
||||
return EVENT_TYPE_LABEL[t] || t.replace(/^\w/, (c) => c.toUpperCase());
|
||||
}
|
||||
|
||||
function formatLocationKind(locationType?: string): string {
|
||||
if (locationType === 'virtual') return 'Virtual';
|
||||
if (locationType === 'hybrid') return 'Hybrid';
|
||||
return 'In person';
|
||||
}
|
||||
|
||||
function formatEventDateRange(ev: PublicFormEventSummary): string {
|
||||
const { startDate, endDate } = ev;
|
||||
if (!startDate) return '—';
|
||||
const s = new Date(startDate);
|
||||
const e = endDate ? new Date(endDate) : s;
|
||||
if (Number.isNaN(s.getTime())) return '—';
|
||||
const sameDay = !Number.isNaN(e.getTime()) && s.toDateString() === e.toDateString();
|
||||
const dOpt: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' };
|
||||
if (sameDay) return s.toLocaleDateString(undefined, { weekday: 'short', ...dOpt });
|
||||
return `${s.toLocaleDateString(undefined, dOpt)} – ${e.toLocaleDateString(undefined, dOpt)}`;
|
||||
}
|
||||
|
||||
function shouldShowLocation(ev: PublicFormEventSummary): boolean {
|
||||
const loc = ev.location?.trim();
|
||||
if (!loc) return false;
|
||||
return ev.locationType === 'physical' || ev.locationType === 'hybrid';
|
||||
}
|
||||
|
||||
function locationKindClass(locationType?: string): string {
|
||||
if (locationType === 'virtual') return 'form-event-meta-kind--virtual';
|
||||
if (locationType === 'hybrid') return 'form-event-meta-kind--hybrid';
|
||||
return 'form-event-meta-kind--physical';
|
||||
}
|
||||
|
||||
export function PublicFormEventHeader({
|
||||
event,
|
||||
variant = 'default',
|
||||
}: {
|
||||
event: PublicFormEventSummary;
|
||||
variant?: 'default' | 'embedded';
|
||||
}) {
|
||||
const typeLabel = formatEventType(event.eventType);
|
||||
const dateLine = formatEventDateRange(event);
|
||||
const kind = formatLocationKind(event.locationType);
|
||||
const showLoc = shouldShowLocation(event);
|
||||
const embedded = variant === 'embedded';
|
||||
|
||||
return (
|
||||
<div className={`form-event-header${embedded ? ' form-event-header--embedded' : ''}`}>
|
||||
{event.imageUrl && !event.logoUrl ? (
|
||||
<div className="form-event-banner">
|
||||
<img src={event.imageUrl} alt="" />
|
||||
</div>
|
||||
) : null}
|
||||
{event.logoUrl ? <img src={event.logoUrl} alt={event.name} className="form-event-logo" /> : null}
|
||||
<div>
|
||||
<h1 className="form-event-name">{event.name}</h1>
|
||||
{event.subtitle ? <p className="form-event-subtitle">{event.subtitle}</p> : null}
|
||||
<div className="form-event-meta">
|
||||
<span className="form-event-meta-date">{dateLine}</span>
|
||||
{typeLabel ? (
|
||||
<>
|
||||
<span aria-hidden="true" style={{ opacity: 0.5 }}>
|
||||
·
|
||||
</span>
|
||||
<span>{typeLabel}</span>
|
||||
</>
|
||||
) : null}
|
||||
<span aria-hidden="true" style={{ opacity: 0.5 }}>
|
||||
·
|
||||
</span>
|
||||
<span className={`form-event-meta-kind ${locationKindClass(event.locationType)}`}>{kind}</span>
|
||||
{showLoc ? (
|
||||
<>
|
||||
<span aria-hidden="true" style={{ opacity: 0.5 }}>
|
||||
·
|
||||
</span>
|
||||
<span className="form-event-meta-location">{event.location!.trim()}</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/** Internal select value when respondent picks the configurable Other option. Never stored in submissions. */
|
||||
export const SELECT_OTHER_VALUE = '__other__';
|
||||
|
||||
export type SelectOptionItem = string | { value: string; label: string };
|
||||
|
||||
export function normalizeSelectOptions(options: SelectOptionItem[] | undefined): { value: string; label: string }[] {
|
||||
return (options ?? []).map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
|
||||
}
|
||||
|
||||
export function isCustomSelectValue(
|
||||
value: unknown,
|
||||
optionValues: string[],
|
||||
allowOther?: boolean,
|
||||
): boolean {
|
||||
if (!allowOther) return false;
|
||||
const stored = String(value ?? '').trim();
|
||||
if (!stored) return false;
|
||||
return !optionValues.includes(stored);
|
||||
}
|
||||
|
||||
export function selectControlValue(
|
||||
value: unknown,
|
||||
optionValues: string[],
|
||||
allowOther?: boolean,
|
||||
otherValue = SELECT_OTHER_VALUE,
|
||||
): string {
|
||||
const stored = String(value ?? '');
|
||||
if (isCustomSelectValue(stored, optionValues, allowOther)) return otherValue;
|
||||
return stored;
|
||||
}
|
||||
|
||||
export function otherTextFromValue(
|
||||
value: unknown,
|
||||
optionValues: string[],
|
||||
allowOther?: boolean,
|
||||
): string {
|
||||
if (!isCustomSelectValue(value, optionValues, allowOther)) return '';
|
||||
return String(value ?? '');
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { useEffect, type CSSProperties, type ReactNode } from 'react';
|
||||
import { conferenceCssVars, loadConferenceFont } from '../../theme/conferenceTheme';
|
||||
import type { PublicMicrositePayload } from '../../types';
|
||||
|
||||
type Props = {
|
||||
data: PublicMicrositePayload;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export function MicrositeLayout({ data, children }: Props) {
|
||||
useEffect(() => {
|
||||
loadConferenceFont(data.website.fontPair);
|
||||
const title = data.website.title || data.event.name || 'Event';
|
||||
document.title = title;
|
||||
if (data.website.favicon) {
|
||||
let link = document.querySelector<HTMLLinkElement>("link[rel='icon']");
|
||||
if (!link) {
|
||||
link = document.createElement('link');
|
||||
link.rel = 'icon';
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
link.href = data.website.favicon;
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const style = conferenceCssVars(data.website) as CSSProperties;
|
||||
|
||||
return (
|
||||
<div className="eb-microsite-root" style={style}>
|
||||
{children}
|
||||
<footer className="eb-static-footer">
|
||||
Powered by <strong>EventBuzz</strong>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,567 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import type { AgendaItem, MicrositeSection, MicrositeSpeaker, PublicMicrositePayload } from '../../types';
|
||||
import { visitorApi } from '../../api/visitor';
|
||||
|
||||
type Ctx = {
|
||||
data: PublicMicrositePayload;
|
||||
eventId: string;
|
||||
registrationUrl: string;
|
||||
};
|
||||
|
||||
function str(v: unknown, fallback = ''): string {
|
||||
return v != null ? String(v).trim() : fallback;
|
||||
}
|
||||
|
||||
function HeaderSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
|
||||
const c = section.config;
|
||||
const logoText = str(c.logoText, ctx.data.event.name);
|
||||
const logoUrl = str(c.logoUrl, ctx.data.website.logo || ctx.data.event.logoUrl || '');
|
||||
const menuItems = (Array.isArray(c.menuItems) ? c.menuItems : []) as { label?: string; url?: string }[];
|
||||
|
||||
return (
|
||||
<header className="eb-conference-header fixed-top">
|
||||
<nav className="navbar navbar-expand-lg navbar-dark">
|
||||
<div className="container-fluid px-3 px-lg-4" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<a className="navbar-brand" href="#hero" style={{ textDecoration: 'none', color: '#fff' }}>
|
||||
{logoUrl ? <img src={logoUrl} alt={logoText} className="eb-header-logo" /> : <span>{logoText}</span>}
|
||||
</a>
|
||||
<ul className="navbar-nav" style={{ display: 'flex', gap: '0.75rem', listStyle: 'none', margin: 0, padding: 0, flexWrap: 'wrap' }}>
|
||||
{menuItems.map((item, i) => {
|
||||
const label = str(item.label);
|
||||
const url = str(item.url, '#');
|
||||
const isReg = label.toLowerCase() === 'register';
|
||||
return (
|
||||
<li key={i}>
|
||||
<a
|
||||
className={isReg ? 'nav-link btn btn-sm btn-outline-light' : 'nav-link'}
|
||||
href={isReg ? ctx.registrationUrl : url}
|
||||
style={{ textDecoration: 'none', color: '#fff' }}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function BannerSection({ section }: { section: MicrositeSection }) {
|
||||
const c = section.config;
|
||||
const headline = str(c.headline, 'Welcome');
|
||||
const subtext = str(c.subtext);
|
||||
const heroMetaLine = str(c.heroMetaLine);
|
||||
const ctaText = str(c.ctaText);
|
||||
const ctaUrl = str(c.ctaUrl, '#');
|
||||
const bgImage = str(c.backgroundImage);
|
||||
const secText = str(c.secondaryCtaText);
|
||||
const secUrl = str(c.secondaryCtaUrl, '#schedule');
|
||||
|
||||
return (
|
||||
<section id="hero" className={`eb-hero-block position-relative text-white text-center overflow-hidden${bgImage ? ' eb-hero-has-image' : ''}`}>
|
||||
{bgImage ? <div className="eb-hero-bg" style={{ backgroundImage: `url(${bgImage})` }} /> : null}
|
||||
<div className="eb-hero-mask" />
|
||||
<div className="container eb-hero-inner">
|
||||
<h1 className="eb-hero-heading mb-4">{headline}</h1>
|
||||
{heroMetaLine ? <div className="eb-hero-meta mb-3">{heroMetaLine}</div> : null}
|
||||
{subtext ? <p className="eb-hero-intro mb-4">{subtext}</p> : null}
|
||||
{(ctaText || secText) && (
|
||||
<div className="eb-hero-cta">
|
||||
{ctaText ? (
|
||||
<a className="btn btn-primary btn-lg" href={ctaUrl}>
|
||||
{ctaText}
|
||||
</a>
|
||||
) : null}
|
||||
{secText ? (
|
||||
<a className="btn btn-outline-light btn-lg" href={secUrl}>
|
||||
{secText}
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CountdownSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
|
||||
const headingLine = str(section.config.headingLine);
|
||||
const start = ctx.data.event.startDate ? new Date(ctx.data.event.startDate).getTime() : NaN;
|
||||
const [phrase, setPhrase] = useState('…');
|
||||
|
||||
useEffect(() => {
|
||||
const eventName = ctx.data.event.name || 'Event';
|
||||
const tick = () => {
|
||||
if (!Number.isFinite(start)) {
|
||||
setPhrase('');
|
||||
return;
|
||||
}
|
||||
const t = start - Date.now();
|
||||
if (t <= 0) {
|
||||
setPhrase(`We're live — welcome to ${eventName}!`);
|
||||
return;
|
||||
}
|
||||
const sec = Math.floor(t / 1000);
|
||||
const days = Math.floor(sec / 86400);
|
||||
const hours = Math.floor((sec % 86400) / 3600);
|
||||
const mins = Math.floor((sec % 3600) / 60);
|
||||
const toGo = (n: number, unit: string) => (n === 1 ? `1 ${unit} to go` : `${n} ${unit}s to go`);
|
||||
if (days >= 1) setPhrase(toGo(days, 'day'));
|
||||
else if (hours >= 1) setPhrase(toGo(hours, 'hour'));
|
||||
else if (mins >= 1) setPhrase(toGo(mins, 'minute'));
|
||||
else setPhrase('Starting soon');
|
||||
};
|
||||
tick();
|
||||
const id = window.setInterval(tick, 1000);
|
||||
return () => window.clearInterval(id);
|
||||
}, [start, ctx.data.event.name]);
|
||||
|
||||
return (
|
||||
<section className="eb-static-stats py-5 text-center" aria-label="Countdown to event">
|
||||
<div className="container">
|
||||
{headingLine ? <p className="eb-countdown-heading small text-uppercase mb-3">{headingLine}</p> : null}
|
||||
<p className="eb-countdown-phrase mb-0" role="status" aria-live="polite">
|
||||
{phrase}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function AboutSection({ section }: { section: MicrositeSection }) {
|
||||
const c = section.config;
|
||||
const title = str(c.title, 'About');
|
||||
const body = str(c.body);
|
||||
const bullets = Array.isArray(c.bullets) ? (c.bullets as string[]) : [];
|
||||
const ctaText = str(c.ctaText);
|
||||
const ctaUrl = str(c.ctaUrl, '#');
|
||||
|
||||
return (
|
||||
<section id="about" className="py-5 eb-section-light">
|
||||
<div className="container" style={{ maxWidth: 820 }}>
|
||||
<h2 className="eb-section-heading text-center mb-4">{title}</h2>
|
||||
{body ? <p style={{ lineHeight: 1.7, color: '#475569' }}>{body}</p> : null}
|
||||
{bullets.length > 0 ? (
|
||||
<ul style={{ lineHeight: 1.8, color: '#475569' }}>
|
||||
{bullets.map((b, i) => (
|
||||
<li key={i}>{b}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
{ctaText ? (
|
||||
<div className="text-center mt-4">
|
||||
<a className="btn btn-primary btn-lg" href={ctaUrl}>
|
||||
{ctaText}
|
||||
</a>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function AgendaSection({ section, items }: { section: MicrositeSection; items: AgendaItem[] }) {
|
||||
const title = str(section.config.title, 'Schedule');
|
||||
const list = items.length ? items : [{ title: 'Session 1', time: '9:00 AM', track: 'Main' }];
|
||||
|
||||
return (
|
||||
<section id="schedule" className="eb-schedule-section section py-5">
|
||||
<div className="container">
|
||||
<h2 className="eb-section-heading text-center mb-5">{title}</h2>
|
||||
<div className="eb-schedule-list mx-auto" style={{ maxWidth: 820 }}>
|
||||
{list.map((item, i) => {
|
||||
const hasSp = !!str(item.speakerName);
|
||||
return (
|
||||
<div key={i} className={`eb-schedule-item py-3 ${hasSp ? 'item-talk' : 'item-other'}`}>
|
||||
<div className="row align-items-start">
|
||||
<div className="col-md-3">
|
||||
<div className="eb-schedule-time">{item.time || ''}</div>
|
||||
{hasSp && item.speakerPhotoUrl ? (
|
||||
<img src={item.speakerPhotoUrl} className="rounded-circle mt-2" width={56} height={56} alt="" />
|
||||
) : null}
|
||||
{hasSp ? <div className="small text-muted mt-1">{item.speakerName}</div> : null}
|
||||
</div>
|
||||
<div className="col-md-9">
|
||||
<h3 className="eb-schedule-title h5">{item.title || ''}</h3>
|
||||
{item.track ? <div className="eb-schedule-track text-muted mb-2">{item.track}</div> : null}
|
||||
{item.description ? <p className="mb-0 text-muted small">{item.description}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="text-center mt-4">
|
||||
<a className="btn btn-primary btn-lg me-2" href="#register">
|
||||
Register
|
||||
</a>
|
||||
<a className="btn btn-outline-secondary btn-lg" href="#hero">
|
||||
Back to top
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SpeakersSection({ section, speakers }: { section: MicrositeSection; speakers: MicrositeSpeaker[] }) {
|
||||
const title = str(section.config.title, 'Speakers');
|
||||
const limit = Number(section.config.limit) || 12;
|
||||
const list = speakers.slice(0, limit);
|
||||
|
||||
return (
|
||||
<section id="speakers" className="eb-speakers-section section py-5">
|
||||
<div className="container">
|
||||
<h2 className="eb-section-heading text-center mb-5">{title}</h2>
|
||||
<div className="row">
|
||||
{list.length ? (
|
||||
list.map((s, i) => (
|
||||
<div key={i} className="col-6 col-lg-3 mb-4">
|
||||
<div className="card h-100 shadow-sm">
|
||||
{s.photoUrl ? (
|
||||
<img src={s.photoUrl} className="card-img-top" alt={s.name} />
|
||||
) : (
|
||||
<div className="card-img-top" style={{ background: '#cbd5e1', minHeight: 120 }} />
|
||||
)}
|
||||
<div className="card-body">
|
||||
<h5 className="card-title">{s.name}</h5>
|
||||
{s.designation ? <p className="card-text text-muted small">{s.designation}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-12 text-center text-muted py-4">No speakers added yet.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function RegisterLinksSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
|
||||
const c = section.config;
|
||||
const title = str(c.title, 'Register');
|
||||
const primaryLabel = str(c.primaryLabel, 'Register Now');
|
||||
const primaryUrl = str(c.primaryUrl, ctx.registrationUrl);
|
||||
const secondaryLabel = str(c.secondaryLabel);
|
||||
const secondaryUrl = str(c.secondaryUrl, '#');
|
||||
|
||||
return (
|
||||
<section id="register" className="py-5">
|
||||
<div className="container text-center">
|
||||
<h2 className="eb-section-heading mb-4">{title}</h2>
|
||||
<a className="btn btn-primary btn-lg" href={primaryUrl}>
|
||||
{primaryLabel}
|
||||
</a>
|
||||
{secondaryLabel ? (
|
||||
<a className="btn btn-outline-secondary btn-lg ms-2" href={secondaryUrl} style={{ marginLeft: '0.5rem' }}>
|
||||
{secondaryLabel}
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ContactFormSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
|
||||
const c = section.config;
|
||||
const title = str(c.title, 'Contact Us');
|
||||
const submitLabel = str(c.submitLabel, 'Send');
|
||||
const notifyEmail = str(c.notifyEmail);
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const onSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!notifyEmail) {
|
||||
setError('Contact form is not configured.');
|
||||
setStatus('error');
|
||||
return;
|
||||
}
|
||||
setStatus('sending');
|
||||
setError('');
|
||||
try {
|
||||
await visitorApi.submitMicrositeContact({
|
||||
eventId: ctx.eventId,
|
||||
notifyEmail,
|
||||
firstName,
|
||||
lastName,
|
||||
email,
|
||||
message,
|
||||
_gotcha: '',
|
||||
});
|
||||
setStatus('sent');
|
||||
setFirstName('');
|
||||
setLastName('');
|
||||
setEmail('');
|
||||
setMessage('');
|
||||
} catch (err) {
|
||||
setStatus('error');
|
||||
setError(err instanceof Error ? err.message : 'Could not send message.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-5 eb-section-contact">
|
||||
<div className="container">
|
||||
<h2 className="eb-section-heading text-center mb-4">{title}</h2>
|
||||
<form className="g-3 mx-auto" style={{ maxWidth: 600 }} onSubmit={(e) => void onSubmit(e)}>
|
||||
<div className="g-3">
|
||||
<label className="form-label" htmlFor="contact-name">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="contact-name"
|
||||
className="form-control"
|
||||
value={`${firstName}${lastName ? ` ${lastName}` : ''}`.trim()}
|
||||
onChange={(e) => {
|
||||
const parts = e.target.value.split(' ');
|
||||
setFirstName(parts[0] || '');
|
||||
setLastName(parts.slice(1).join(' '));
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="g-3">
|
||||
<label className="form-label" htmlFor="contact-email">
|
||||
Email
|
||||
</label>
|
||||
<input id="contact-email" type="email" className="form-control" value={email} onChange={(e) => setEmail(e.target.value)} required />
|
||||
</div>
|
||||
<div className="g-3">
|
||||
<label className="form-label" htmlFor="contact-message">
|
||||
Message
|
||||
</label>
|
||||
<textarea id="contact-message" className="form-control" rows={4} value={message} onChange={(e) => setMessage(e.target.value)} required />
|
||||
</div>
|
||||
{status === 'sent' ? <p style={{ color: '#15803d' }}>Message sent. Thank you!</p> : null}
|
||||
{status === 'error' && error ? <p className="form-error">{error}</p> : null}
|
||||
<button type="submit" className="btn btn-primary" disabled={status === 'sending'}>
|
||||
{status === 'sending' ? 'Sending…' : submitLabel}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function FooterSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
|
||||
const c = section.config;
|
||||
const copyrightText = str(c.copyrightText, `© ${new Date().getFullYear()} ${ctx.data.event.name}. All rights reserved.`);
|
||||
const links = (Array.isArray(c.links) ? c.links : []) as { label?: string; url?: string }[];
|
||||
|
||||
return (
|
||||
<footer id="footer" className="py-4 mt-5" style={{ background: 'var(--eb-conf-footer-bg)', color: '#fff' }}>
|
||||
<div className="container" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: '1rem' }}>
|
||||
<span style={{ opacity: 0.85 }}>{copyrightText}</span>
|
||||
<div>
|
||||
{links.map((link, i) => (
|
||||
<a key={i} href={str(link.url, '#')} style={{ color: 'rgba(255,255,255,0.8)', marginRight: '1rem' }}>
|
||||
{str(link.label)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
function SponsorsSection({ section }: { section: MicrositeSection }) {
|
||||
const c = section.config;
|
||||
const title = str(c.title, 'Sponsors');
|
||||
const sponsors = (Array.isArray(c.sponsors) ? c.sponsors : []) as { name?: string; logoUrl?: string; url?: string }[];
|
||||
const cells =
|
||||
sponsors.length > 0
|
||||
? sponsors
|
||||
: Array.from({ length: 6 }, (_, i) => ({ name: `Sponsor ${String.fromCharCode(65 + i)}` }));
|
||||
|
||||
return (
|
||||
<section id="sponsors" className="eb-static-sponsors section py-5">
|
||||
<div className="container">
|
||||
<h2 className="eb-section-heading text-center mb-5">{title}</h2>
|
||||
<div className="row g-3 justify-content-center">
|
||||
{cells.map((s, i) => (
|
||||
<div key={i} className="col-6 col-md-4 col-lg-2 text-center">
|
||||
<a href={str(s.url, '#')} style={{ textDecoration: 'none', color: '#475569' }}>
|
||||
{s.logoUrl ? <img src={s.logoUrl} alt={str(s.name)} style={{ maxHeight: 48 }} className="img-fluid" /> : str(s.name)}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CtaSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
|
||||
const c = section.config;
|
||||
const headline = str(c.headline, 'Join us');
|
||||
const subtext = str(c.subtext);
|
||||
const buttonLabel = str(c.buttonLabel, 'Register');
|
||||
const buttonUrl = str(c.buttonUrl, ctx.registrationUrl);
|
||||
|
||||
return (
|
||||
<section id="cta" className="py-5 text-white text-center" style={{ background: 'var(--eb-conf-primary)' }}>
|
||||
<div className="container">
|
||||
<h2 className="eb-section-heading text-white mb-3">{headline}</h2>
|
||||
{subtext ? <p className="lead mb-4">{subtext}</p> : null}
|
||||
<a className="btn btn-light btn-lg" href={buttonUrl}>
|
||||
{buttonLabel}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function VenueSection({ section }: { section: MicrositeSection }) {
|
||||
const c = section.config;
|
||||
const title = str(c.title, 'Venue');
|
||||
const body = str(c.body);
|
||||
const mapEmbedUrl = str(c.mapEmbedUrl);
|
||||
|
||||
return (
|
||||
<section id="venue" className="py-5 eb-section-light">
|
||||
<div className="container">
|
||||
<h2 className="eb-section-heading text-center mb-4">{title}</h2>
|
||||
{body ? <p style={{ maxWidth: 720, margin: '0 auto 1.5rem', lineHeight: 1.7 }}>{body}</p> : null}
|
||||
{mapEmbedUrl ? (
|
||||
<div style={{ maxWidth: 900, margin: '0 auto' }}>
|
||||
<iframe title="Venue map" src={mapEmbedUrl} width="100%" height="360" style={{ border: 0, borderRadius: 8 }} loading="lazy" />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function FaqSection({ section }: { section: MicrositeSection }) {
|
||||
const c = section.config;
|
||||
const title = str(c.title, 'FAQ');
|
||||
const items = (Array.isArray(c.items) ? c.items : []) as { question?: string; answer?: string }[];
|
||||
|
||||
return (
|
||||
<section id="faq" className="py-5">
|
||||
<div className="container" style={{ maxWidth: 760 }}>
|
||||
<h2 className="eb-section-heading text-center mb-4">{title}</h2>
|
||||
{items.map((item, i) => (
|
||||
<details key={i} style={{ marginBottom: '1rem', borderBottom: '1px solid #e2e8f0', paddingBottom: '0.75rem' }}>
|
||||
<summary style={{ fontWeight: 600, cursor: 'pointer' }}>{str(item.question)}</summary>
|
||||
<p style={{ marginTop: '0.5rem', color: '#475569', lineHeight: 1.6 }}>{str(item.answer)}</p>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function GallerySection({ section }: { section: MicrositeSection }) {
|
||||
const c = section.config;
|
||||
const title = str(c.title, 'Gallery');
|
||||
const images = (Array.isArray(c.images) ? c.images : []) as string[];
|
||||
|
||||
return (
|
||||
<section id="gallery" className="py-5 eb-section-light">
|
||||
<div className="container">
|
||||
<h2 className="eb-section-heading text-center mb-4">{title}</h2>
|
||||
<div className="row">
|
||||
{images.length ? (
|
||||
images.map((src, i) => (
|
||||
<div key={i} className="col-6 col-md-4 mb-3">
|
||||
<img src={src} alt="" style={{ width: '100%', borderRadius: 8, objectFit: 'cover', aspectRatio: '4/3' }} />
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-12 text-center text-muted">No gallery images yet.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CustomHtmlSection({ section }: { section: MicrositeSection }) {
|
||||
const html = str(section.config.html);
|
||||
if (!html) return null;
|
||||
return (
|
||||
<section id="custom-html" className="py-5 eb-section-light">
|
||||
<div className="container">
|
||||
<div className="custom-section" dangerouslySetInnerHTML={{ __html: html }} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function TicketsSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
|
||||
const c = section.config;
|
||||
const title = str(c.title, 'Tickets');
|
||||
const tiers = (Array.isArray(c.tiers) ? c.tiers : []) as { name?: string; price?: string; description?: string }[];
|
||||
|
||||
return (
|
||||
<section id="tickets" className="py-5">
|
||||
<div className="container">
|
||||
<h2 className="eb-section-heading text-center mb-5">{title}</h2>
|
||||
<div className="row justify-content-center">
|
||||
{(tiers.length ? tiers : [{ name: 'General Admission', price: 'Free', description: 'Register to attend.' }]).map((tier, i) => (
|
||||
<div key={i} className="col-md-4 mb-4">
|
||||
<div className="card h-100 shadow-sm" style={{ padding: '1.25rem' }}>
|
||||
<h3 style={{ marginTop: 0 }}>{str(tier.name)}</h3>
|
||||
<p style={{ fontSize: '1.5rem', fontWeight: 700, color: 'var(--eb-conf-primary)' }}>{str(tier.price)}</p>
|
||||
{tier.description ? <p className="text-muted">{tier.description}</p> : null}
|
||||
<a className="btn btn-primary" href={ctx.registrationUrl}>
|
||||
Register
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function SectionRenderer({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
|
||||
switch (section.type) {
|
||||
case 'header':
|
||||
return <HeaderSection section={section} ctx={ctx} />;
|
||||
case 'banner':
|
||||
return <BannerSection section={section} />;
|
||||
case 'countdown':
|
||||
return <CountdownSection section={section} ctx={ctx} />;
|
||||
case 'about':
|
||||
return <AboutSection section={section} />;
|
||||
case 'agenda':
|
||||
return <AgendaSection section={section} items={ctx.data.agenda} />;
|
||||
case 'speakers':
|
||||
return <SpeakersSection section={section} speakers={ctx.data.speakers} />;
|
||||
case 'register_links':
|
||||
return <RegisterLinksSection section={section} ctx={ctx} />;
|
||||
case 'contact_form':
|
||||
return <ContactFormSection section={section} ctx={ctx} />;
|
||||
case 'footer':
|
||||
return <FooterSection section={section} ctx={ctx} />;
|
||||
case 'sponsors':
|
||||
return <SponsorsSection section={section} />;
|
||||
case 'cta':
|
||||
return <CtaSection section={section} ctx={ctx} />;
|
||||
case 'venue':
|
||||
return <VenueSection section={section} />;
|
||||
case 'faq':
|
||||
return <FaqSection section={section} />;
|
||||
case 'gallery':
|
||||
return <GallerySection section={section} />;
|
||||
case 'custom_html':
|
||||
return <CustomHtmlSection section={section} />;
|
||||
case 'tickets':
|
||||
return <TicketsSection section={section} ctx={ctx} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,13 @@
|
|||
import countriesData from './country-states.json';
|
||||
|
||||
export type CountryStatesMap = Record<string, string[]>;
|
||||
|
||||
export const COUNTRY_STATES = countriesData as CountryStatesMap;
|
||||
|
||||
export const DEFAULT_COUNTRY = 'India';
|
||||
|
||||
export const COUNTRY_NAMES = Object.keys(COUNTRY_STATES).sort((a, b) => a.localeCompare(b));
|
||||
|
||||
export function statesForCountry(country: string): string[] {
|
||||
return COUNTRY_STATES[country] ?? [];
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './styles/conference.css';
|
||||
import './styles/forms.css';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { micrositeApi } from '../api/microsite';
|
||||
import { PUBLIC_WEB_BASE } from '../api/client';
|
||||
import type { PublicMicrositePayload } from '../types';
|
||||
import { MicrositeLayout } from '../components/microsite/MicrositeLayout';
|
||||
import { SectionRenderer } from '../components/microsite/SectionRenderer';
|
||||
|
||||
export function EventMicrositePage() {
|
||||
const { eventId = '' } = useParams();
|
||||
const [data, setData] = useState<PublicMicrositePayload | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!eventId) return;
|
||||
setError(null);
|
||||
try {
|
||||
const payload = await micrositeApi.get(eventId);
|
||||
setData(payload);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Could not load event microsite.');
|
||||
}
|
||||
}, [eventId]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="form-page-center">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="form-page-center">
|
||||
<p style={{ color: '#64748b' }}>Loading…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const registrationUrl = data.registrationUrl || `${PUBLIC_WEB_BASE}/event/${eventId}/register`;
|
||||
const ctx = { data, eventId, registrationUrl };
|
||||
|
||||
if (data.micrositeHtml) {
|
||||
return (
|
||||
<MicrositeLayout data={data}>
|
||||
<div dangerouslySetInnerHTML={{ __html: data.micrositeHtml }} />
|
||||
</MicrositeLayout>
|
||||
);
|
||||
}
|
||||
|
||||
const sections = [...(data.sections || [])].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
|
||||
|
||||
return (
|
||||
<MicrositeLayout data={data}>
|
||||
{sections.map((section) => (
|
||||
<SectionRenderer key={section.id || section.type} section={section} ctx={ctx} />
|
||||
))}
|
||||
</MicrositeLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { useParams } from 'react-router-dom';
|
||||
import { FormShell } from '../components/forms/FormShell';
|
||||
|
||||
export function FormPage() {
|
||||
const { eventId = '', formId = '' } = useParams();
|
||||
return <FormShell eventId={eventId} formId={formId} />;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
|
||||
export function NotFoundPage() {
|
||||
return (
|
||||
<div className="form-page-center">
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<h1 style={{ margin: '0 0 8px' }}>Page not found</h1>
|
||||
<p style={{ color: '#64748b' }}>The page you are looking for does not exist.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { micrositeApi } from '../api/microsite';
|
||||
import { FormShell } from '../components/forms/FormShell';
|
||||
|
||||
export function RegisterPage() {
|
||||
const { eventId = '' } = useParams();
|
||||
const [formId, setFormId] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!eventId) return;
|
||||
setError(null);
|
||||
try {
|
||||
const info = await micrositeApi.getRegistration(eventId);
|
||||
setFormId(info.formId);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Registration is not available for this event.');
|
||||
}
|
||||
}, [eventId]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="form-page-center">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!formId) {
|
||||
return (
|
||||
<div className="form-page-center">
|
||||
<p style={{ color: '#64748b' }}>Loading…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <FormShell eventId={eventId} formId={formId} titleOverride="Register" />;
|
||||
}
|
||||
|
|
@ -0,0 +1,354 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--eb-conf-body-font, system-ui, sans-serif);
|
||||
color: #0f172a;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.eb-microsite-root {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.eb-conference-header {
|
||||
background: var(--eb-conf-nav-bg);
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.eb-conference-header .navbar {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.eb-conference-header .navbar-brand {
|
||||
color: #fff !important;
|
||||
font-family: var(--eb-conf-heading-font);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.eb-conference-header .nav-link {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
.eb-header-logo {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.eb-hero-block {
|
||||
min-height: 420px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6rem 1rem 4rem;
|
||||
background: var(--eb-conf-hero-gradient);
|
||||
}
|
||||
|
||||
.eb-hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.eb-hero-has-image .eb-hero-bg {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.eb-hero-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
|
||||
}
|
||||
|
||||
.eb-hero-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.eb-hero-heading {
|
||||
font-family: var(--eb-conf-heading-font);
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.eb-hero-intro {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.95;
|
||||
max-width: 640px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.eb-hero-meta {
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.eb-hero-cta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.eb-section-heading {
|
||||
font-family: var(--eb-conf-heading-font);
|
||||
font-weight: 700;
|
||||
color: var(--eb-conf-primary-dark);
|
||||
}
|
||||
|
||||
.eb-section-light {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.eb-static-stats {
|
||||
background: var(--eb-conf-primary-dark);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.eb-countdown-heading {
|
||||
letter-spacing: 0.08em;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.eb-countdown-phrase {
|
||||
font-family: var(--eb-conf-heading-font);
|
||||
font-size: clamp(1.25rem, 3vw, 1.75rem);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.eb-schedule-section {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.eb-schedule-time {
|
||||
font-weight: 700;
|
||||
color: var(--eb-conf-primary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.eb-schedule-title {
|
||||
font-family: var(--eb-conf-heading-font);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.eb-schedule-item {
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.eb-speakers-section .card {
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px var(--eb-conf-card-glow);
|
||||
}
|
||||
|
||||
.eb-static-footer {
|
||||
background: var(--eb-static-footer-bg);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
padding: 1.5rem 0;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--eb-conf-accent) !important;
|
||||
border-color: var(--eb-conf-accent) !important;
|
||||
color: var(--eb-conf-accent-foreground) !important;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--eb-conf-accent-hover) !important;
|
||||
border-color: var(--eb-conf-accent-hover) !important;
|
||||
}
|
||||
|
||||
.btn-outline-light:hover {
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.px-lg-4 {
|
||||
padding-left: 1.5rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.py-5 {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -0.75rem;
|
||||
}
|
||||
|
||||
.col-6,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-9,
|
||||
.col-md-3,
|
||||
.col-lg-3 {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col-md-3 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-md-4 {
|
||||
flex: 0 0 33.333%;
|
||||
max-width: 33.333%;
|
||||
}
|
||||
.col-md-9 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.col-lg-3 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-img-top {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 0.25rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid transparent;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
background: transparent;
|
||||
border-color: #94a3b8;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.g-3 > * {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.custom-section :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,470 @@
|
|||
.form-page {
|
||||
min-height: 100vh;
|
||||
padding: 32px 16px 48px;
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
font-family: var(--font-body, system-ui, sans-serif);
|
||||
}
|
||||
|
||||
.form-page--embed {
|
||||
min-height: 0;
|
||||
padding: 16px 12px 24px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-page-center--embed {
|
||||
min-height: 0;
|
||||
padding: 16px 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-page-center {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
margin-bottom: 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.form-field-remarks {
|
||||
margin: 6px 0 0;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.45;
|
||||
color: #64748b;
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 112px;
|
||||
resize: vertical;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-section-divider {
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.form-section-rule {
|
||||
border: none;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.form-section-title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #0f3072;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* Flatpickr: hide source input; visible alt input uses .form-picker-input */
|
||||
.form-picker-source {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.form-picker-input {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.form-picker-input--time {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.form-picker-input.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #0f3072;
|
||||
box-shadow: 0 0 0 3px rgba(15, 48, 114, 0.12);
|
||||
}
|
||||
|
||||
/* Custom select — matches .form-input */
|
||||
.form-select-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-select-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-select-trigger:focus {
|
||||
outline: none;
|
||||
border-color: #0f3072;
|
||||
box-shadow: 0 0 0 3px rgba(15, 48, 114, 0.12);
|
||||
}
|
||||
|
||||
.form-select-value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.form-select-value--placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.form-select-chevron {
|
||||
flex-shrink: 0;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.form-select-wrap--open .form-select-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.form-select-menu {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
list-style: none;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-select-option {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #0f172a;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select-option:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.form-select-option--active {
|
||||
background: rgba(15, 48, 114, 0.08);
|
||||
color: #0f3072;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-select-native-required {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.form-country-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-country-state-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-country-state-label {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.8125rem;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Flatpickr calendar theme */
|
||||
.flatpickr-calendar {
|
||||
font-family: var(--font-body, system-ui, sans-serif);
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-month {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months,
|
||||
.flatpickr-current-month input.cur-year {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.flatpickr-day.selected,
|
||||
.flatpickr-day.startRange,
|
||||
.flatpickr-day.endRange,
|
||||
.flatpickr-day.selected.inRange,
|
||||
.flatpickr-day.startRange.inRange,
|
||||
.flatpickr-day.endRange.inRange {
|
||||
background: #0f3072;
|
||||
border-color: #0f3072;
|
||||
}
|
||||
|
||||
.flatpickr-day.selected:hover,
|
||||
.flatpickr-day.startRange:hover,
|
||||
.flatpickr-day.endRange:hover {
|
||||
background: #1e40af;
|
||||
border-color: #1e40af;
|
||||
}
|
||||
|
||||
.flatpickr-day.today {
|
||||
border-color: #0f3072;
|
||||
}
|
||||
|
||||
.flatpickr-time input:hover,
|
||||
.flatpickr-time .flatpickr-am-pm:hover,
|
||||
.flatpickr-time input:focus,
|
||||
.flatpickr-time .flatpickr-am-pm:focus {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
margin-top: 8px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #0f3072;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-submit:disabled {
|
||||
opacity: 0.75;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.form-event-header + .form-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-desc {
|
||||
margin: 0 0 24px;
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-event-header {
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-event-header--embedded {
|
||||
margin-bottom: 18px;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-event-banner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
max-height: 120px;
|
||||
}
|
||||
|
||||
.form-event-banner img {
|
||||
height: auto;
|
||||
max-height: 120px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-event-logo {
|
||||
display: block;
|
||||
max-height: 120px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
.form-event-name {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 6px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.form-event-subtitle {
|
||||
margin: 0 0 10px;
|
||||
font-size: 0.95rem;
|
||||
color: #64748b;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.form-event-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px 10px;
|
||||
font-size: 0.8125rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.form-event-meta-date {
|
||||
color: #334155;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-event-meta-location {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.form-event-meta-kind {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.form-event-meta-kind--virtual {
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.form-event-meta-kind--hybrid {
|
||||
background: rgba(147, 51, 234, 0.12);
|
||||
color: #7e22ce;
|
||||
}
|
||||
|
||||
.form-event-meta-kind--physical {
|
||||
background: rgba(22, 163, 74, 0.12);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.form-captcha-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-captcha-question {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 96px;
|
||||
min-height: 44px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
background: #f1f5f9;
|
||||
border: 1px solid #cbd5e1;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.form-captcha-input {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.form-captcha-reload {
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-captcha-reload:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
const DEFAULT_PRIMARY = '#5c6ac4';
|
||||
const DEFAULT_ACCENT = '#00c2d1';
|
||||
const DEFAULT_FONT_PAIR = 'Montserrat + Roboto';
|
||||
|
||||
export const FONT_SPECS: Record<string, { href: string; heading: string; body: string }> = {
|
||||
'Montserrat + Roboto': {
|
||||
href: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Roboto:wght@300;400;700&display=swap',
|
||||
heading: '"Montserrat", system-ui, sans-serif',
|
||||
body: '"Roboto", system-ui, sans-serif',
|
||||
},
|
||||
'Inter + Noto Sans': {
|
||||
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Noto+Sans:wght@300;400;700&display=swap',
|
||||
heading: '"Inter", system-ui, sans-serif',
|
||||
body: '"Noto Sans", system-ui, sans-serif',
|
||||
},
|
||||
'Playfair + Source Sans': {
|
||||
href: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Source+Sans+3:wght@300;400;700&display=swap',
|
||||
heading: '"Playfair Display", Georgia, serif',
|
||||
body: '"Source Sans 3", system-ui, sans-serif',
|
||||
},
|
||||
'Poppins + Open Sans': {
|
||||
href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Open+Sans:wght@300;400;700&display=swap',
|
||||
heading: '"Poppins", system-ui, sans-serif',
|
||||
body: '"Open Sans", system-ui, sans-serif',
|
||||
},
|
||||
'Raleway + Lato': {
|
||||
href: 'https://fonts.googleapis.com/css2?family=Raleway:wght@600;700;800&family=Lato:wght@300;400;700&display=swap',
|
||||
heading: '"Raleway", system-ui, sans-serif',
|
||||
body: '"Lato", system-ui, sans-serif',
|
||||
},
|
||||
};
|
||||
|
||||
function normalizeHex(input?: string | null): string | null {
|
||||
if (input == null) return null;
|
||||
let s = String(input).trim();
|
||||
if (!s) return null;
|
||||
if (!s.startsWith('#')) s = `#${s}`;
|
||||
if (/^#([0-9a-fA-F]{3})$/.test(s)) {
|
||||
const x = s.slice(1);
|
||||
s = `#${x[0]}${x[0]}${x[1]}${x[1]}${x[2]}${x[2]}`;
|
||||
}
|
||||
if (!/^#([0-9a-fA-F]{6})$/.test(s)) return null;
|
||||
return s;
|
||||
}
|
||||
|
||||
function hexToRgb(hex: string) {
|
||||
const n = parseInt(hex.slice(1), 16);
|
||||
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
|
||||
}
|
||||
|
||||
function rgbToHex(r: number, g: number, b: number) {
|
||||
const c = (n: number) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
|
||||
return `#${c(r)}${c(g)}${c(b)}`;
|
||||
}
|
||||
|
||||
function darken(hex: string, amount: number) {
|
||||
const rgb = hexToRgb(hex);
|
||||
const f = 1 - amount;
|
||||
return rgbToHex(rgb.r * f, rgb.g * f, rgb.b * f);
|
||||
}
|
||||
|
||||
function lighten(hex: string, amount: number) {
|
||||
const rgb = hexToRgb(hex);
|
||||
return rgbToHex(rgb.r + (255 - rgb.r) * amount, rgb.g + (255 - rgb.g) * amount, rgb.b + (255 - rgb.b) * amount);
|
||||
}
|
||||
|
||||
function relativeLuminance(hex: string) {
|
||||
const { r, g, b } = hexToRgb(hex);
|
||||
const lin = (c: number) => {
|
||||
const v = c / 255;
|
||||
return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
|
||||
};
|
||||
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
|
||||
}
|
||||
|
||||
function accentForeground(accentHex: string) {
|
||||
return relativeLuminance(accentHex) > 0.45 ? '#0d2137' : '#ffffff';
|
||||
}
|
||||
|
||||
function hexToRgba(hex: string, alpha: number) {
|
||||
const { r, g, b } = hexToRgb(hex);
|
||||
return `rgba(${r},${g},${b},${alpha})`;
|
||||
}
|
||||
|
||||
export function fontSpec(fontPair?: string) {
|
||||
const key = (fontPair && fontPair.trim()) || DEFAULT_FONT_PAIR;
|
||||
return FONT_SPECS[key] || FONT_SPECS[DEFAULT_FONT_PAIR];
|
||||
}
|
||||
|
||||
export function conferenceCssVars(website: { primaryColor?: string; accentColor?: string; fontPair?: string }) {
|
||||
const primary = normalizeHex(website.primaryColor) || DEFAULT_PRIMARY;
|
||||
const accent = normalizeHex(website.accentColor) || DEFAULT_ACCENT;
|
||||
const primaryDark = darken(primary, 0.22);
|
||||
const accentHover = lighten(accent, 0.12);
|
||||
const gradStop1 = darken(primary, 0.35);
|
||||
const gradStop2 = primaryDark;
|
||||
const navBg = darken(primary, 0.42);
|
||||
const footerBg = darken(primary, 0.48);
|
||||
const spec = fontSpec(website.fontPair);
|
||||
|
||||
return {
|
||||
'--eb-conf-primary': primary,
|
||||
'--eb-conf-primary-dark': primaryDark,
|
||||
'--eb-conf-accent': accent,
|
||||
'--eb-conf-accent-hover': accentHover,
|
||||
'--eb-conf-accent-foreground': accentForeground(accent),
|
||||
'--eb-conf-hero-gradient': `linear-gradient(135deg, ${gradStop1} 0%, ${gradStop2} 45%, ${primary} 100%)`,
|
||||
'--eb-conf-heading-font': spec.heading,
|
||||
'--eb-conf-body-font': spec.body,
|
||||
'--eb-conf-nav-bg': navBg,
|
||||
'--eb-conf-footer-bg': footerBg,
|
||||
'--eb-static-footer-bg': darken(primary, 0.52),
|
||||
'--eb-conf-card-glow': hexToRgba(primary, 0.28),
|
||||
} as Record<string, string>;
|
||||
}
|
||||
|
||||
export function loadConferenceFont(fontPair?: string) {
|
||||
const spec = fontSpec(fontPair);
|
||||
const id = 'eb-conf-fonts';
|
||||
if (document.getElementById(id)) return;
|
||||
const link = document.createElement('link');
|
||||
link.id = id;
|
||||
link.rel = 'stylesheet';
|
||||
link.href = spec.href;
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
export interface FormField {
|
||||
label?: string;
|
||||
/** Unique key for submission data; auto-suffixed when labels duplicate. */
|
||||
name?: string;
|
||||
type?: string;
|
||||
required?: boolean;
|
||||
options?: string[];
|
||||
/** Dropdown only: include an Other option; submitted value is the custom text. */
|
||||
allowOther?: boolean;
|
||||
otherLabel?: string;
|
||||
placeholder?: string;
|
||||
remarks?: string;
|
||||
mapsTo?: string;
|
||||
customMapsKey?: string;
|
||||
isFixed?: boolean;
|
||||
}
|
||||
|
||||
export interface PublicFormEventSummary {
|
||||
name: string;
|
||||
subtitle?: string;
|
||||
eventType?: string;
|
||||
startDate?: string | null;
|
||||
endDate?: string | null;
|
||||
location?: string;
|
||||
locationType?: string;
|
||||
logoUrl?: string | null;
|
||||
imageUrl?: string | null;
|
||||
}
|
||||
|
||||
export interface PublicFormDefinition {
|
||||
_id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
type?: string;
|
||||
event?: PublicFormEventSummary | null;
|
||||
fields?: FormField[];
|
||||
settings?: {
|
||||
thankYouMessage?: string;
|
||||
showThankYou?: boolean;
|
||||
collectEmail?: boolean;
|
||||
allowAnonymous?: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export interface MicrositeSection {
|
||||
id: string;
|
||||
type: string;
|
||||
order: number;
|
||||
config: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface MicrositeSpeaker {
|
||||
name: string;
|
||||
designation?: string;
|
||||
photoUrl?: string;
|
||||
bio?: string;
|
||||
}
|
||||
|
||||
export interface AgendaItem {
|
||||
title?: string;
|
||||
time?: string;
|
||||
track?: string;
|
||||
description?: string;
|
||||
speakerName?: string;
|
||||
speakerPhotoUrl?: string;
|
||||
}
|
||||
|
||||
export interface PublicMicrositePayload {
|
||||
event: PublicFormEventSummary & { _id: string };
|
||||
website: {
|
||||
enabled: boolean;
|
||||
title: string;
|
||||
description: string;
|
||||
logo: string;
|
||||
banners: string[];
|
||||
favicon: string;
|
||||
primaryColor: string;
|
||||
accentColor: string;
|
||||
fontPair: string;
|
||||
layoutTemplate: string;
|
||||
seoDescription: string;
|
||||
};
|
||||
title: string;
|
||||
sections: MicrositeSection[];
|
||||
agenda: AgendaItem[];
|
||||
speakers: MicrositeSpeaker[];
|
||||
registrationFormId: string | null;
|
||||
registrationUrl: string;
|
||||
micrositeHtml?: string;
|
||||
}
|
||||
|
||||
export interface RegistrationInfo {
|
||||
eventId: string;
|
||||
formId: string;
|
||||
registrationUrl: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import type { FormField } from '../types';
|
||||
|
||||
function isNonInputField(field: FormField): boolean {
|
||||
return field.type === 'section';
|
||||
}
|
||||
|
||||
/** Recompute unique `name` from each field's `label` (display text unchanged). */
|
||||
export function assignUniqueFieldNames(fields: FormField[]): FormField[] {
|
||||
const used = new Set<string>();
|
||||
return fields.map((field) => {
|
||||
if (isNonInputField(field)) return field;
|
||||
const base = (field.label || '').trim();
|
||||
if (!base) return { ...field, name: '' };
|
||||
if (!used.has(base)) {
|
||||
used.add(base);
|
||||
return { ...field, name: base };
|
||||
}
|
||||
let n = 1;
|
||||
while (used.has(`${base}-${n}`)) n += 1;
|
||||
const name = `${base}-${n}`;
|
||||
used.add(name);
|
||||
return { ...field, name };
|
||||
});
|
||||
}
|
||||
|
||||
export function fieldDataKey(field: FormField): string {
|
||||
return (field.name || field.label || '').trim();
|
||||
}
|
||||
|
||||
export function fieldDisplayLabel(field: FormField): string {
|
||||
return (field.label || field.name || '').trim();
|
||||
}
|
||||
|
||||
export function isCountryStateField(field: FormField): boolean {
|
||||
return field.type === 'country_state';
|
||||
}
|
||||
|
||||
export function countryStateKeys(field: FormField): { country: string; state: string } {
|
||||
const base = fieldDataKey(field);
|
||||
return { country: `${base} - Country`, state: `${base} - State` };
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import type { FormField } from '../types';
|
||||
|
||||
const CORE_DEFS: FormField[] = [
|
||||
{ label: 'First name', name: 'First name', type: 'text', required: true, mapsTo: 'firstName', isFixed: true },
|
||||
{ label: 'Last name', name: 'Last name', type: 'text', required: true, mapsTo: 'lastName', isFixed: true },
|
||||
{ label: 'Email', name: 'Email', type: 'email', required: true, mapsTo: 'email', isFixed: true },
|
||||
];
|
||||
|
||||
export function ensureRegistrationCoreFields(fields: FormField[]): FormField[] {
|
||||
const list = [...fields];
|
||||
const missing = CORE_DEFS.filter((def) => !list.some((f) => f.mapsTo === def.mapsTo));
|
||||
if (!missing.length) return list;
|
||||
return [...missing, ...list];
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_BASE_URL: string;
|
||||
readonly VITE_PUBLIC_WEB_BASE: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler"
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { defineConfig, loadEnv } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd(), '');
|
||||
const apiProxyTarget = (env.VITE_API_PROXY_TARGET || 'http://localhost:3001').replace(/\/$/, '');
|
||||
|
||||
return {
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 5175,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: apiProxyTarget,
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
Loading…
Reference in New Issue