Donor Page Builder

Donor Page Builder

Component File: src/features/donors/components/DonorPageBuilder.tsx Route / navigation: Donor Hub → Giving Pages → Builder Access Level: Parent Org and Fund Users with Donor Hub access and write permission Last Updated: April 21, 2026

Overview

The live Donor Page Builder is a form-based editor for custom giving pages. It is not a drag-and-drop website builder.

Users can:

• choose the fund that owns the page
• set the page title, slug, description, and fundraising goal
• configure suggested donation amounts
• enable custom amounts and recurring monthly giving
• choose whether the donor-facing fee toggle defaults on
• attach a hero image, uploaded video, or VideoBlast video
• attach an optional thank-you video
• link the page to a purpose_id for donation earmarking and reporting
• preview the public page before saving

Current Builder Surface

Basic fields

• Fund selector
• Optional purpose selector
• Page title
• URL slug
• Description

Media

• none
• uploaded image / uploaded video
• VideoBlast selection

The builder stores media as image_url and video_url. There is no separate persisted layout JSON.

Donation settings

• Goal amount
• Suggested amounts
• Allow custom donation amount
• Allow recurring monthly donations
• Cover processing fee default
• Thank-you message
• Optional thank-you video

Save Behavior

• New pages: the builder flow currently publishes on save (Save & Publish).
• Existing pages: saves now preserve the current lifecycle status (draft, published, or archived) instead of silently republishing archived pages.
• Preview: uses the same DonorLandingPage renderer as the public experience, with the real organization UUID resolved from the selected fund when possible.

Validation Rules

Frontend validation

• Fund is required
• Title is required
• Slug must be at least 3 characters
• Slug is generated from the title and normalized to lowercase hyphenated text
• Reserved public-route slugs are blocked
• Slug uniqueness is enforced per organization before save

Media validation

• Image upload requires an image MIME type
• Video upload requires a video MIME type
• Uploads require a selected fund so files can be stored under the correct org path

Data Model Used by the Builder

The builder reads and writes donor_pages rows through src/lib/db/marketing.ts.

Key persisted fields:

• organization_id
• title
• slug
• description
• image_url
• video_url
• goal_amount
• preset_amounts
• allow_custom_amount
• allow_recurring
• thank_you_message
• thank_you_video_url
• status
• public_url
• purpose_id
• website_config.coverProcessingFee

URL Rules

• Public URLs are canonicalized through src/lib/donorPageUrls.ts
• Canonical route shape is:

https://donate.alignmint.app/{public-org-key-or-prefix}/{nonprofit-slug}/{page-slug}

• The canonical organization slug should come from the organizations.slug row when available
• The builder now uses the entity slug from the selected fund instead of regenerating it from the display name

Important Limitations

• There is no drag-and-drop block system
• There is no custom CSS or theme editor
• There is no page duplication flow in the live UI
• The builder preview does not expose analytics counts beyond what is already on the page config
• The live save flow still behaves as a publish action for brand-new pages

Related Files

• src/features/donors/components/DonorPageManager.tsx
• src/features/donors/components/DonorPagePreview.tsx
• src/features/donors/components/DonorLandingPage.tsx
• src/lib/db/marketing.ts
• src/lib/donorPageUrls.ts

Related Documentation

• 05-DONOR-PAGE-MANAGER.md
• 06-DONOR-PAGE-PREVIEW.md
• 10-PUBLIC-DONATION-PAGE.md

Synced from IFMmvp-Frontend documentation: pages/donor-hub/03-DONOR-PAGE-BUILDER.md