From d9270632dce11184155645c11b93d1dc4f8d94c5 Mon Sep 17 00:00:00 2001 From: Ravi Gulhane <> Date: Mon, 13 Jul 2026 15:11:22 +0530 Subject: [PATCH] Update microsite rendering and add environment example. Co-authored-by: Cursor --- .env.example | 8 ++ package-lock.json | 17 ++++ package.json | 1 + src/components/microsite/SectionRenderer.tsx | 93 +++++++++++--------- src/pages/EventMicrositePage.tsx | 8 +- 5 files changed, 84 insertions(+), 43 deletions(-) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..4d9c8ae --- /dev/null +++ b/.env.example @@ -0,0 +1,8 @@ +# Local development — Vite proxies /api to VITE_API_PROXY_TARGET +VITE_API_BASE_URL=/api +VITE_API_PROXY_TARGET=http://localhost:3001 +VITE_PUBLIC_WEB_BASE=http://localhost:5175 + +# Production (see .env.production — used automatically by `npm run build`) +# VITE_API_BASE_URL=https://api.eventbuzz.live/api +# VITE_PUBLIC_WEB_BASE=https://web.eventbuzz.live diff --git a/package-lock.json b/package-lock.json index 359e45d..e6d4bea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "eventbuzz-web", "version": "0.0.1", "dependencies": { + "bootstrap-icons": "^1.13.1", "flatpickr": "^4.6.13", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -1275,6 +1276,22 @@ "node": ">=6.0.0" } }, + "node_modules/bootstrap-icons": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz", + "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT" + }, "node_modules/browserslist": { "version": "4.28.4", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.4.tgz", diff --git a/package.json b/package.json index 6a03224..3536389 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview --port 5175" }, "dependencies": { + "bootstrap-icons": "^1.13.1", "flatpickr": "^4.6.13", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/components/microsite/SectionRenderer.tsx b/src/components/microsite/SectionRenderer.tsx index 79f7b7b..eb46c48 100644 --- a/src/components/microsite/SectionRenderer.tsx +++ b/src/components/microsite/SectionRenderer.tsx @@ -12,6 +12,21 @@ function str(v: unknown, fallback = ''): string { return v != null ? String(v).trim() : fallback; } +function isRegisterLabel(label: string): boolean { + return /\bregister\b/i.test(label); +} + +function looksLikeRegistrationUrl(url: string): boolean { + return /\/register\/?$/i.test(url) || /\/form\/[a-f0-9]{24}\/?$/i.test(url); +} + +function resolveRegistrationCtaUrl(label: string, configuredUrl: unknown, registrationUrl: string): string { + const configured = str(configuredUrl); + const wantsRegistration = isRegisterLabel(label) || looksLikeRegistrationUrl(configured); + if (wantsRegistration) return registrationUrl; + return configured || '#'; +} + function HeaderSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) { const c = section.config; const logoText = str(c.logoText, ctx.data.event.name); @@ -40,6 +55,7 @@ function HeaderSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx } const label = str(item.label); const url = str(item.url, '#'); const isReg = label.toLowerCase() === 'register'; + if (isReg && !ctx.registrationUrl) return null; return (
  • {subtext}

    : null} {(ctaText || secText) && (
    - {ctaText ? ( + {ctaText && ctaUrl ? ( {ctaText} @@ -141,13 +157,13 @@ function CountdownSection({ section, ctx }: { section: MicrositeSection; ctx: Ct ); } -function AboutSection({ section }: { section: MicrositeSection }) { +function AboutSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) { const c = section.config; const title = str(c.title, 'About'); - const body = str(c.body); + const body = str(c.body) || str(c.lead); const bullets = Array.isArray(c.bullets) ? (c.bullets as string[]) : []; - const ctaText = str(c.ctaText); - const ctaUrl = str(c.ctaUrl, '#'); + const ctaText = str(c.ctaText) || str(c.ctaLabel); + const ctaUrl = resolveRegistrationCtaUrl(ctaText, c.ctaUrl, ctx.registrationUrl); return (
    @@ -161,7 +177,7 @@ function AboutSection({ section }: { section: MicrositeSection }) { ))} ) : null} - {ctaText ? ( + {ctaText && ctaUrl ? (
    {ctaText} @@ -427,40 +443,27 @@ function AboutSection({ section }: { section: MicrositeSection }) { // ); // } function AgendaSection({ - section, items, + ctx, }: { - section: MicrositeSection; items: AgendaItem[]; + ctx: Ctx; }) { - console.log("Items:",items); - - - const title = str(section.config.title, "Schedule"); + const title = str(section.config.title, 'Schedule'); const list = items.length ? items - : [{ title: "Session 1", time: "9:00 AM", track: "Main", date: "" }]; + : [{ title: 'Session 1', time: '9:00 AM', track: 'Main', date: '' }]; - // Get unique dates const dates = [...new Set(list.map((item) => item.date).filter(Boolean))]; - // Selected day - const [selectedDate, setSelectedDate] = useState( - dates.length ? dates[0] : "" - ); + const [selectedDate, setSelectedDate] = useState(dates.length ? dates[0]! : ''); - // Expanded accordion const [expandedIndex, setExpandedIndex] = useState(null); - // Filter sessions according to selected date - const filteredList = list.filter((item) => item.date === selectedDate); - console.log("dates:", dates); -console.log("selectedDate:", selectedDate); -console.log("filteredList:", filteredList); -console.log("list:", list); + const filteredList = dates.length ? list.filter((item) => item.date === selectedDate) : list; return (
    @@ -728,9 +731,11 @@ console.log("list:", list); {/* Action Buttons */}
    - - Register - + {ctx.registrationUrl ? ( + + Register + + ) : null} Back to top @@ -790,10 +795,12 @@ function SpeakersSection({ section, speakers }: { section: MicrositeSection; spe } function RegisterLinksSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) { + if (!ctx.registrationUrl) return null; + 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 primaryUrl = ctx.registrationUrl; const secondaryLabel = str(c.secondaryLabel); const secondaryUrl = str(c.secondaryUrl, '#'); @@ -959,16 +966,18 @@ function CtaSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) { 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); + const buttonUrl = resolveRegistrationCtaUrl(buttonLabel, c.buttonUrl, ctx.registrationUrl); return (

    {headline}

    {subtext ?

    {subtext}

    : null} - - {buttonLabel} - + {buttonUrl && buttonUrl !== '#' ? ( + + {buttonLabel} + + ) : null}
    ); @@ -1068,9 +1077,11 @@ function TicketsSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx

    {str(tier.name)}

    {str(tier.price)}

    {tier.description ?

    {tier.description}

    : null} - - Register - + {ctx.registrationUrl ? ( + + Register + + ) : null}
    ))} @@ -1085,13 +1096,13 @@ export function SectionRenderer({ section, ctx }: { section: MicrositeSection; c case 'header': return ; case 'banner': - return ; + return ; case 'countdown': return ; case 'about': - return ; + return ; case 'agenda': - return ; + return ; case 'speakers': return ; case 'register_links': diff --git a/src/pages/EventMicrositePage.tsx b/src/pages/EventMicrositePage.tsx index fd9529f..7bdfd32 100644 --- a/src/pages/EventMicrositePage.tsx +++ b/src/pages/EventMicrositePage.tsx @@ -42,7 +42,9 @@ export function EventMicrositePage() { ); } - const registrationUrl = data.registrationUrl || `${PUBLIC_WEB_BASE}/event/${eventId}/register`; + const registrationUrl = data.registrationFormId + ? `${PUBLIC_WEB_BASE}/event/${eventId}/form/${data.registrationFormId}` + : ''; const ctx = { data, eventId, registrationUrl }; if (data.micrositeHtml) { @@ -53,7 +55,9 @@ export function EventMicrositePage() { ); } - const sections = [...(data.sections || [])].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)); + const sections = [...(data.sections || [])] + .filter((section) => section.type !== 'sponsors') + .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)); return (