@@ -578,6 +579,7 @@ class AdminPanel {
campaignFormData.append('allow_email_editing', formData.get('allow_email_editing') === 'on');
campaignFormData.append('show_response_wall', formData.get('show_response_wall') === 'on');
campaignFormData.append('allow_custom_recipients', formData.get('allow_custom_recipients') === 'on');
+ campaignFormData.append('highlight_campaign', formData.get('highlight_campaign') === 'on');
// Handle target_government_levels array
const targetLevels = Array.from(formData.getAll('target_government_levels'));
@@ -651,6 +653,7 @@ class AdminPanel {
form.querySelector('[name="allow_email_editing"]').checked = campaign.allow_email_editing;
form.querySelector('[name="show_response_wall"]').checked = campaign.show_response_wall;
form.querySelector('[name="allow_custom_recipients"]').checked = campaign.allow_custom_recipients || false;
+ form.querySelector('[name="highlight_campaign"]').checked = campaign.highlight_campaign || false;
// Show/hide custom recipients section based on checkbox
this.toggleCustomRecipientsSection(campaign.allow_custom_recipients);
@@ -710,6 +713,7 @@ class AdminPanel {
updateFormData.append('allow_email_editing', formData.get('allow_email_editing') === 'on');
updateFormData.append('show_response_wall', formData.get('show_response_wall') === 'on');
updateFormData.append('allow_custom_recipients', formData.get('allow_custom_recipients') === 'on');
+ updateFormData.append('highlight_campaign', formData.get('highlight_campaign') === 'on');
// Handle target_government_levels array
const targetLevels = Array.from(formData.getAll('target_government_levels'));
diff --git a/influence/app/public/js/main.js b/influence/app/public/js/main.js
index 6d14543..e55f325 100644
--- a/influence/app/public/js/main.js
+++ b/influence/app/public/js/main.js
@@ -4,13 +4,23 @@ class MainApp {
this.init();
}
- init() {
+ async init() {
// Initialize message display system
window.messageDisplay = new MessageDisplay();
// Check API health on startup
this.checkAPIHealth();
+ // Initialize postal lookup immediately (always show it first)
+ this.postalLookup = new PostalLookup(this.updateRepresentatives.bind(this));
+
+ // Check for highlighted campaign FIRST (before campaigns grid)
+ await this.checkHighlightedCampaign();
+
+ // Initialize campaigns grid AFTER highlighted campaign loads
+ this.campaignsGrid = new CampaignsGrid();
+ await this.campaignsGrid.init();
+
// Add global error handling
window.addEventListener('error', (e) => {
// Only log and show message for actual errors, not null/undefined
@@ -57,6 +67,119 @@ class MainApp {
window.messageDisplay.show('Connection to server failed. Please check your internet connection and try again.', 'error');
}
}
+
+ async checkHighlightedCampaign() {
+ try {
+ const response = await fetch('/api/public/highlighted-campaign');
+
+ if (!response.ok) {
+ if (response.status === 404) {
+ // No highlighted campaign, show normal postal code lookup
+ return false;
+ }
+ throw new Error('Failed to fetch highlighted campaign');
+ }
+
+ const data = await response.json();
+
+ if (data.success && data.campaign) {
+ this.displayHighlightedCampaign(data.campaign);
+ return true;
+ }
+ return false;
+ } catch (error) {
+ console.error('Error checking for highlighted campaign:', error);
+ // Continue with normal postal code lookup if there's an error
+ return false;
+ }
+ }
+
+ displayHighlightedCampaign(campaign) {
+ const highlightedSection = document.getElementById('highlighted-campaign-section');
+ const highlightedContainer = document.getElementById('highlighted-campaign-container');
+
+ if (!highlightedSection || !highlightedContainer) return;
+
+ // Build the campaign display HTML with cover photo
+ const coverPhotoStyle = campaign.cover_photo
+ ? `background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('/uploads/${campaign.cover_photo}'); background-size: cover; background-position: center;`
+ : 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);';
+
+ const statsHTML = [];
+ if (campaign.show_email_count && campaign.emailCount !== null) {
+ statsHTML.push(`
📧${campaign.emailCount} Emails Sent
`);
+ }
+ if (campaign.show_call_count && campaign.callCount !== null) {
+ statsHTML.push(`
📞${campaign.callCount} Calls Made
`);
+ }
+ if (campaign.show_response_count && campaign.responseCount !== null) {
+ statsHTML.push(`
✅${campaign.responseCount} Responses
`);
+ }
+
+ const highlightedHTML = `
+
+ ${campaign.cover_photo ? `
+
+ ` : `
+
⭐ Featured Campaign
+
${this.escapeHtml(campaign.title || campaign.name)}
+ `}
+
+
+ ${campaign.description ? `
${this.escapeHtml(campaign.description)}
` : ''}
+
+ ${statsHTML.length > 0 ? `
+
+ ${statsHTML.join('')}
+
+ ` : ''}
+
+
+
+
+ `;
+
+ // Insert the HTML
+ highlightedContainer.innerHTML = highlightedHTML;
+
+ // Make section visible but collapsed
+ highlightedSection.style.display = 'grid';
+
+ // Force a reflow to ensure the initial state is applied
+ const height = highlightedSection.offsetHeight;
+ console.log('Campaign section initial height:', height);
+
+ // Wait a bit longer before starting animation to ensure it's visible
+ setTimeout(() => {
+ console.log('Starting campaign expansion animation...');
+ highlightedSection.classList.add('show');
+
+ // Add animation to the container after expansion starts
+ setTimeout(() => {
+ const container = highlightedContainer.querySelector('.highlighted-campaign-container');
+ if (container) {
+ console.log('Adding visible class to container...');
+ container.classList.add('visible', 'fade-in-smooth');
+ }
+ }, 300);
+ }, 100);
+ }
+
+ updateRepresentatives(representatives) {
+ }
+
+ escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
}
// Message Display System
diff --git a/influence/app/public/js/postal-lookup.js b/influence/app/public/js/postal-lookup.js
index 0d94fbf..e1cee8a 100644
--- a/influence/app/public/js/postal-lookup.js
+++ b/influence/app/public/js/postal-lookup.js
@@ -15,7 +15,12 @@ class PostalLookup {
init() {
this.form.addEventListener('submit', (e) => this.handleSubmit(e));
- this.refreshBtn.addEventListener('click', () => this.handleRefresh());
+
+ // Only add refresh button listener if it exists
+ if (this.refreshBtn) {
+ this.refreshBtn.addEventListener('click', () => this.handleRefresh());
+ }
+
this.input.addEventListener('input', (e) => this.formatPostalCode(e));
}
diff --git a/influence/app/routes/api.js b/influence/app/routes/api.js
index 6616e5a..6ba942b 100644
--- a/influence/app/routes/api.js
+++ b/influence/app/routes/api.js
@@ -178,6 +178,7 @@ router.get('/campaigns/:id/analytics', requireAuth, rateLimiter.general, campaig
// Campaign endpoints (Public)
router.get('/public/campaigns', rateLimiter.general, campaignsController.getPublicCampaigns);
+router.get('/public/highlighted-campaign', rateLimiter.general, campaignsController.getHighlightedCampaign);
router.get('/campaigns/:slug', rateLimiter.general, campaignsController.getCampaignBySlug);
router.get('/campaigns/:slug/qrcode', rateLimiter.general, campaignsController.generateQRCode);
router.get('/campaigns/:slug/representatives/:postalCode', rateLimiter.representAPI, campaignsController.getRepresentativesForCampaign);
diff --git a/influence/app/services/nocodb.js b/influence/app/services/nocodb.js
index 0041c8d..edc8d17 100644
--- a/influence/app/services/nocodb.js
+++ b/influence/app/services/nocodb.js
@@ -440,6 +440,7 @@ class NocoDBService {
'Allow Email Editing': campaignData.allow_email_editing,
'Allow Custom Recipients': campaignData.allow_custom_recipients,
'Show Response Wall Button': campaignData.show_response_wall,
+ 'Highlight Campaign': campaignData.highlight_campaign,
'Target Government Levels': campaignData.target_government_levels,
'Created By User ID': campaignData.created_by_user_id,
'Created By User Email': campaignData.created_by_user_email,
@@ -474,6 +475,7 @@ class NocoDBService {
if (updates.allow_email_editing !== undefined) mappedUpdates['Allow Email Editing'] = updates.allow_email_editing;
if (updates.allow_custom_recipients !== undefined) mappedUpdates['Allow Custom Recipients'] = updates.allow_custom_recipients;
if (updates.show_response_wall !== undefined) mappedUpdates['Show Response Wall Button'] = updates.show_response_wall;
+ if (updates.highlight_campaign !== undefined) mappedUpdates['Highlight Campaign'] = updates.highlight_campaign;
if (updates.target_government_levels !== undefined) mappedUpdates['Target Government Levels'] = updates.target_government_levels;
if (updates.updated_at !== undefined) mappedUpdates['UpdatedAt'] = updates.updated_at;
@@ -497,6 +499,54 @@ class NocoDBService {
}
}
+ // Get the currently highlighted campaign
+ async getHighlightedCampaign() {
+ try {
+ const response = await this.getAll(this.tableIds.campaigns, {
+ where: `(Highlight Campaign,eq,true)`,
+ limit: 1
+ });
+ return response.list && response.list.length > 0 ? response.list[0] : null;
+ } catch (error) {
+ console.error('Get highlighted campaign failed:', error);
+ throw error;
+ }
+ }
+
+ // Set a campaign as highlighted (and unset all others)
+ async setHighlightedCampaign(campaignId) {
+ try {
+ // First, unset any existing highlighted campaigns
+ const currentHighlighted = await this.getHighlightedCampaign();
+ if (currentHighlighted) {
+ const currentId = currentHighlighted.ID || currentHighlighted.Id || currentHighlighted.id;
+ if (currentId && currentId !== campaignId) {
+ await this.updateCampaign(currentId, { highlight_campaign: false });
+ }
+ }
+
+ // Then set the new highlighted campaign
+ await this.updateCampaign(campaignId, { highlight_campaign: true });
+
+ return { success: true };
+ } catch (error) {
+ console.error('Set highlighted campaign failed:', error);
+ throw error;
+ }
+ }
+
+ // Unset highlighted campaign
+ async unsetHighlightedCampaign(campaignId) {
+ try {
+ await this.updateCampaign(campaignId, { highlight_campaign: false });
+ return { success: true };
+ } catch (error) {
+ console.error('Unset highlighted campaign failed:', error);
+ throw error;
+ }
+ }
+
+
// Campaign email tracking methods
async logCampaignEmail(emailData) {
try {
diff --git a/influence/files-explainer.md b/influence/files-explainer.md
index 1ea99b4..6bb6dc4 100644
--- a/influence/files-explainer.md
+++ b/influence/files-explainer.md
@@ -56,6 +56,27 @@ The application includes a flexible campaign configuration system that allows ad
- Paused: Temporarily disabled
- Archived: Completed campaigns, read-only
+**Highlight Campaign** (`highlight_campaign`):
+- **Purpose**: Features a single priority campaign on the homepage by replacing the postal code search section
+- **Implementation**: Checkbox field in campaigns table (default: false)
+- **When Enabled**: Campaign takes over homepage hero section with featured display
+- **Exclusivity**: Only ONE campaign can be highlighted at a time
+- **Use Cases**:
+ - ✅ Promote urgent or high-priority campaigns
+ - ✅ Drive maximum participation for time-sensitive issues
+ - ✅ Showcase flagship campaigns to new visitors
+ - ❌ Don't use for evergreen or background campaigns
+- **Database**: `highlight_campaign` BOOLEAN field in campaigns table
+- **Backend**: `setHighlightedCampaign()` ensures single highlighted campaign by unsetting others
+- **Frontend**: `main.js` checks `/public/highlighted-campaign` on page load and replaces UI
+- **Admin Panel**:
+ - Checkbox labeled "⭐ Highlight on Homepage" in create/edit forms
+ - Gold badge and border on highlighted campaign in campaign list
+ - Visual indicator: "⭐ Highlighted" badge on campaign card
+- **API Endpoints**:
+ - `GET /public/highlighted-campaign`: Returns current highlighted campaign or null
+ - Backend validates only one campaign is highlighted via database logic
+
### Technical Implementation
**Database Schema** (`build-nocodb.sh`):
diff --git a/influence/instruct.md b/influence/instruct.md
index e374ded..98c3b05 100644
--- a/influence/instruct.md
+++ b/influence/instruct.md
@@ -54,7 +54,16 @@ The application supports flexible campaign configuration through the admin panel
- Federal, Provincial, Municipal, School Board
- Filters which representatives are shown
-8. **Campaign Status** (`status`) - **Required**
+8. **Highlight Campaign** (`highlight_campaign`) - **Default: OFF** ❌
+ - Displays the campaign prominently on the homepage
+ - Replaces the postal code search section with campaign information
+ - Only ONE campaign can be highlighted at a time
+ - **Database**: Boolean field in campaigns table
+ - **Backend**: `setHighlightedCampaign()` ensures only one campaign is highlighted
+ - **Frontend**: `main.js` checks on page load and replaces postal code section
+ - **Admin Panel**: Shows ⭐ badge on highlighted campaign card
+
+9. **Campaign Status** (`status`) - **Required**
- Draft: Testing only, hidden from public
- Active: Visible on main page
- Paused: Temporarily disabled
diff --git a/influence/scripts/build-nocodb.sh b/influence/scripts/build-nocodb.sh
index 2f039d5..7905f46 100755
--- a/influence/scripts/build-nocodb.sh
+++ b/influence/scripts/build-nocodb.sh
@@ -1093,6 +1093,12 @@ create_campaigns_table() {
"uidt": "Checkbox",
"cdf": "false"
},
+ {
+ "column_name": "highlight_campaign",
+ "title": "Highlight Campaign",
+ "uidt": "Checkbox",
+ "cdf": "false"
+ },
{
"column_name": "target_government_levels",
"title": "Target Government Levels",