ultimate-jekyll-manager 0.0.119 → 0.0.121

package/dist/assets/js/pages/admin/notifications/new/index.js

@@ -1,7 +1,12 @@
+/**
+ * Admin Notifications Page JavaScript
+ */
+
 // Libraries
 import { FormManager } from '__main_assets__/js/libs/form-manager.js';
 import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
 import { getPrerenderedIcon } from '__main_assets__/js/libs/prerendered-icons.js';
+
 let webManager = null;
 
 // Module
@@ -28,7 +33,7 @@ export default (Manager) => {
 let formManager = null;
 let stats = {
   totalUsers: 0,
-  filteredUsers: 0
+  filteredUsers: 0,
 };
 let autoSubmitTimer = null;
 let isInitialized = false;
@@ -36,7 +41,9 @@ let isInitialized = false;
 // Main initialization
 async function initializeNotificationCreator() {
   // Prevent re-initialization
-  if (isInitialized) return;
+  if (isInitialized) {
+    return;
+  }
   isInitialized = true;
 
   // Initialize FormManager
@@ -66,15 +73,39 @@ async function initializeNotificationCreator() {
 // Initialize FormManager
 function initializeFormManager() {
   formManager = new FormManager('#notification-form', {
-    autoDisable: true,
-    showSpinner: true,
-    validateOnSubmit: true,
-    allowMultipleSubmissions: false,
+    allowResubmit: false,
   });
 
-  // Event listeners
-  formManager.addEventListener('change', handleFormChange);
-  formManager.addEventListener('submit', handleSubmit);
+  formManager.on('change', ({ data }) => {
+    // Update preview in real-time
+    updatePreview(data);
+
+    // Update character counts
+    updateCharacterCounts(data);
+
+    // Check auto-submit status
+    checkAutoSubmit(data);
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    // Transform data for API
+    const payload = transformDataForAPI(data);
+
+    // Add user stats
+    payload.reach = {
+      available: { total: stats.totalUsers },
+      filtered: { total: stats.filteredUsers },
+    };
+
+    // Call API
+    await sendNotification(payload);
+
+    // Track success
+    trackNotificationSent(payload);
+
+    // Success
+    formManager.showSuccess(`Notification sent successfully to ${stats.filteredUsers.toLocaleString()} users!`);
+  });
 }
 
 // Initialize UI elements
@@ -139,13 +170,6 @@ function initializeUI() {
     });
   }
 
-  // Channel toggles - commented out since channels aren't currently supported
-  // document.querySelectorAll('input[name^="channels."]').forEach(checkbox => {
-  //   checkbox.addEventListener('change', (e) => {
-  //     toggleChannelSettings(e.target);
-  //   });
-  // });
-
   // Notification preview click handler
   const $notificationPreview = document.querySelector('#notification-preview-clickable');
   if ($notificationPreview) {
@@ -164,57 +188,14 @@ function initializeUI() {
   // Trigger initial form change to update character counts and preview with form data
   if (formManager) {
     setTimeout(() => {
-      handleFormChange();
+      const data = formManager.getData();
+      updatePreview(data);
+      updateCharacterCounts(data);
+      checkAutoSubmit(data);
     }, 100);
   }
 }
 
-// Handle form changes
-function handleFormChange(event) {
-  const formData = formManager.getData();
-
-  // Update preview in real-time
-  updatePreview(formData);
-
-  // Update character counts
-  updateCharacterCounts(formData);
-
-  // Check auto-submit status
-  checkAutoSubmit(formData);
-}
-
-// Handle form submission
-async function handleSubmit(event) {
-  // Get data from event detail if available, otherwise from formManager
-  const formData = event.detail?.data || formManager.getData();
-
-  try {
-    // Transform data for API
-    const payload = transformDataForAPI(formData);
-
-    // Add user stats
-    payload.reach = {
-      available: { total: stats.totalUsers },
-      filtered: { total: stats.filteredUsers }
-    };
-
-
-    // Call API
-    const response = await sendNotification(payload);
-
-    // Track success
-    trackNotificationSent(payload);
-
-    // Success
-    formManager.showSuccess(`Notification sent successfully to ${stats.filteredUsers.toLocaleString()} users!`);
-
-  } catch (error) {
-    console.error('Notification send error:', error);
-    webManager.sentry().captureException(new Error('Failed to send notification', { cause: error }));
-    formManager.showError(error.message || 'Failed to send notification');
-  }
-}
-
 // Transform data for API
 function transformDataForAPI(formData) {
   console.log('[Debug] transformDataForAPI called');
@@ -248,12 +229,12 @@ function transformDataForAPI(formData) {
       icon: notification.icon || '',
       title: notification.title || '',
       body: notification.body || '',
-      clickAction: redirectUrl.toString()
+      clickAction: redirectUrl.toString(),
     },
     created: now.toISOString(),
     channels: formData.channels || {},
     audience: formData.audience || {},
-    schedule: formData.schedule || {}
+    schedule: formData.schedule || {},
   };
 }
 
@@ -269,8 +250,8 @@ async function sendNotification(payload) {
     log: true,
     body: {
       command: 'admin:send-notification',
-      payload: payload
-    }
+      payload: payload,
+    },
   });
 }
 
@@ -286,16 +267,15 @@ async function fetchUserStats() {
       body: {
         command: 'admin:firestore-read',
         payload: {
-          path: 'meta/stats'
-        }
-      }
+          path: 'meta/stats',
+        },
+      },
     });
 
     // Extract user count from response
     const total = response?.notifications?.total || 0;
     stats.totalUsers = total;
     stats.filteredUsers = total; // Initially all users
-
   } catch (error) {
     console.error('Failed to fetch user stats:', error);
     webManager.sentry().captureException(new Error('Failed to fetch user stats', { cause: error }));
@@ -356,9 +336,6 @@ function updatePreview(formData = null) {
   if ($previewTime) {
     $previewTime.textContent = 'Now';
   }
-
-  // Update channel badges - commented out since channels aren't currently supported
-  // updateChannelBadges(formData);
 }
 
 // Update icon preview
@@ -397,64 +374,6 @@ function updateCharacterCounts(formData) {
   }
 }
 
-// Toggle channel-specific settings
-function toggleChannelSettings(checkbox) {
-  const channelName = checkbox.name.replace('channels.', '').replace('.enabled', '');
-  const $settingsEl = document.querySelector(`#${channelName}-channel-settings`);
-
-  if ($settingsEl) {
-    if (checkbox.checked) {
-      $settingsEl.classList.remove('d-none');
-      $settingsEl.classList.add('animate__animated', 'animate__fadeIn');
-    } else {
-      $settingsEl.classList.add('d-none');
-    }
-  }
-}
-
-// Update channel badges in preview
-function updateChannelBadges(formData) {
-  const channels = formData.channels || {};
-  const $badgesContainer = document.querySelector('.card .d-flex.gap-2.flex-wrap');
-
-  if (!$badgesContainer) {
-    return;
-  }
-
-  // Clear existing badges
-  $badgesContainer.innerHTML = '';
-
-  // Add badges for enabled channels
-  const channelConfigs = {
-    push: { icon: 'mobile', color: 'primary' },
-    email: { icon: 'envelope', color: 'info' },
-    sms: { icon: 'comment-sms', color: 'success' },
-    inapp: { icon: 'bell', color: 'warning' }
-  };
-
-  Object.keys(channelConfigs).forEach(channel => {
-    if (!channels[channel]?.enabled) {
-      return;
-    }
-
-    const config = channelConfigs[channel];
-    const iconHTML = getPrerenderedIcon(config.icon);
-    const $badge = document.createElement('span');
-    $badge.className = `badge bg-${config.color}`;
-    $badge.innerHTML = `${iconHTML}${channel.charAt(0).toUpperCase() + channel.slice(1)}`;
-    $badgesContainer.appendChild($badge);
-  });
-
-  // Default to push if no channels selected
-  if ($badgesContainer.children.length === 0) {
-    const iconHTML = getPrerenderedIcon('mobile');
-    const $badge = document.createElement('span');
-    $badge.className = 'badge bg-primary';
-    $badge.innerHTML = `${iconHTML}Push`;
-    $badgesContainer.appendChild($badge);
-  }
-}
-
 // Set auto-submit time
 function setAutoSubmitTime() {
   // Set to tomorrow at 10 AM
@@ -509,7 +428,9 @@ function startAutoSubmitCountdown(targetDate) {
   clearAutoSubmitCountdown();
 
   const $countdownEl = document.querySelector('#auto-submit-countdown');
-  if (!$countdownEl) return;
+  if (!$countdownEl) {
+    return;
+  }
 
   $countdownEl.classList.remove('d-none');
 
@@ -524,7 +445,10 @@ function startAutoSubmitCountdown(targetDate) {
       // Fetch updated stats before submitting
       fetchUserStats()
         .then(() => updateUserCount())
-        .finally(() => formManager.submit());
+        .finally(() => {
+          // Programmatically submit the form
+          formManager.$form.requestSubmit();
+        });
 
       return;
     }
@@ -560,29 +484,20 @@ function getAPIFunctionsUrl() {
 
 // Tracking functions
 function trackNotificationSent(payload) {
-  // Google Analytics
-  if (typeof gtag !== 'undefined') {
-    gtag('event', 'notification_sent', {
-      notification_type: 'admin',
-      user_count: stats.filteredUsers,
-      channels: Object.keys(payload.channels || {}).filter(c => payload.channels[c]?.enabled).join(',')
-    });
-  }
+  gtag('event', 'notification_sent', {
+    notification_type: 'admin',
+    user_count: stats.filteredUsers,
+    channels: Object.keys(payload.channels || {}).filter(c => payload.channels[c]?.enabled).join(','),
+  });
 
-  // Facebook Pixel
-  if (typeof fbq !== 'undefined') {
-    fbq('trackCustom', 'AdminNotificationSent', {
-      users: stats.filteredUsers,
-      channels: Object.keys(payload.channels || {}).filter(c => payload.channels[c]?.enabled)
-    });
-  }
+  fbq('trackCustom', 'AdminNotificationSent', {
+    users: stats.filteredUsers,
+    channels: Object.keys(payload.channels || {}).filter(c => payload.channels[c]?.enabled),
+  });
 
-  // TikTok Pixel
-  if (typeof ttq !== 'undefined') {
-    ttq.track('SubmitForm', {
-      content_id: 'admin-notification',
-      content_type: 'product',
-      content_name: 'Admin Notification',
-    });
-  }
+  ttq.track('SubmitForm', {
+    content_id: 'admin-notification',
+    content_type: 'product',
+    content_name: 'Admin Notification',
+  });
 }

package/dist/assets/js/pages/blog/index.js

@@ -1,5 +1,10 @@
+/**
+ * Blog Page JavaScript
+ */
+
 // Libraries
 import { FormManager } from '__main_assets__/js/libs/form-manager.js';
+
 let webManager = null;
 
 // Module
@@ -19,9 +24,6 @@ export default (Manager) => {
   });
 };
 
-// Global variables
-let newsletterForm = null;
-
 // Setup newsletter form
 function setupNewsletterForm() {
   const $form = document.getElementById('newsletter-form');
@@ -30,19 +32,27 @@ function setupNewsletterForm() {
     return;
   }
 
-  // Initialize FormManager
-  newsletterForm = new FormManager('#newsletter-form', {
-    autoDisable: true,
-    showSpinner: true,
-    validateOnSubmit: true,
-    allowMultipleSubmissions: false,
+  const formManager = new FormManager('#newsletter-form', {
+    allowResubmit: false,
     resetOnSuccess: true,
-    submitButtonLoadingText: 'Subscribing...',
-    submitButtonSuccessText: 'Subscribed!',
+    submittingText: 'Subscribing...',
+    submittedText: 'Subscribed!',
   });
 
-  // Listen to FormManager events
-  newsletterForm.addEventListener('submit', handleNewsletterSubmit);
+  formManager.on('submit', async ({ data }) => {
+    console.log('Newsletter subscription:', data.email);
+
+    // Here you would integrate with your newsletter service
+    // For example: Mailchimp, SendGrid, ConvertKit, etc.
+
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    // Track signup
+    trackNewsletterSignup();
+
+    formManager.showSuccess('Thank you for subscribing! Check your email to confirm.');
+  });
 }
 
 // Setup blog search functionality
@@ -90,7 +100,6 @@ function setupSearch() {
 // Perform search on blog posts
 function performSearch(query, $blogPosts, $searchResults) {
   let matchCount = 0;
-  const results = [];
 
   $blogPosts.forEach(post => {
     const title = post.dataset.title?.toLowerCase() || '';
@@ -100,10 +109,6 @@ function performSearch(query, $blogPosts, $searchResults) {
     if (title.includes(query) || excerpt.includes(query) || tags.includes(query)) {
       post.classList.remove('d-none');
       matchCount++;
-      results.push({
-        title: post.dataset.title,
-        url: post.querySelector('a')?.href
-      });
     } else {
       post.classList.add('d-none');
     }
@@ -122,48 +127,21 @@ function performSearch(query, $blogPosts, $searchResults) {
   trackBlogSearch(query);
 }
 
-// Handle newsletter form submission
-async function handleNewsletterSubmit(event) {
-  // Prevent default FormManager submission
-  event.preventDefault();
-
-  const formData = event.detail.data;
-
-  console.log('Newsletter subscription:', formData.email);
-
-  try {
-    // Here you would integrate with your newsletter service
-    // For example: Mailchimp, SendGrid, ConvertKit, etc.
-
-    // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 1000));
-
-    // For demo purposes, just show success
-    trackNewsletterSignup();
-    newsletterForm.showSuccess('Thank you for subscribing! Check your email to confirm.');
-    newsletterForm.setFormState('submitted');
-  } catch (error) {
-    webManager.sentry().captureException(new Error('Newsletter subscription failed', { cause: error }));
-    newsletterForm.showError('An error occurred. Please try again.');
-    newsletterForm.setFormState('ready');
-  }
-}
-
 // Tracking functions
 function trackNewsletterSignup() {
   gtag('event', 'newsletter_signup', {
     event_category: 'engagement',
     event_label: 'blog_page',
-    value: 1
+    value: 1,
   });
   fbq('track', 'Lead', {
     content_name: 'Newsletter',
-    status: 'success'
+    status: 'success',
   });
   ttq.track('Subscribe', {
     content_id: 'newsletter-blog',
     content_type: 'product',
-    content_name: 'Newsletter'
+    content_name: 'Newsletter',
   });
 }
 
@@ -171,15 +149,15 @@ function trackBlogSearch(query) {
   gtag('event', 'search', {
     search_term: query,
     event_category: 'engagement',
-    event_label: 'blog_page'
+    event_label: 'blog_page',
   });
   fbq('track', 'Search', {
     search_string: query,
-    content_category: 'blog'
+    content_category: 'blog',
   });
   ttq.track('Search', {
     content_id: 'blog-search',
     content_type: 'product',
-    search_string: query
+    search_string: query,
   });
 }