ultimate-jekyll-manager 0.0.265 → 0.0.266

package/dist/assets/js/pages/payment/confirmation/index.js

@@ -1,6 +1,7 @@
-// Libraries
-import { state } from './modules/state.js';
-import { initializeConfirmationUI, updateAllUI } from './modules/bindings.js';
+// Payment Confirmation Page
+import { state, buildBindingsState } from './modules/state.js';
+import { trackPurchaseIfNeeded } from './modules/tracking.js';
+import { triggerCelebration } from './modules/celebration.js';
 
 let webManager = null;
 
@@ -8,215 +9,47 @@ let webManager = null;
   https://localhost:3000/payment/confirmation?orderId=ORD-TRIAL-123&productId=pro&productName=Pro%20Plan&amount=0&currency=USD&frequency=annually&paymentMethod=stripe&trial=true&track=true
 */
 
-// Module
-export default (Manager, options) => {
+// Module export
+export default (Manager) => {
   return new Promise(async function (resolve) {
-    // Set webManager
     webManager = Manager.webManager;
-
-    // Initialize when DOM is ready
     await webManager.dom().ready();
-
-    // Initialize UI with loading states
-    initializeConfirmationUI();
-
-    // Load order data and update bindings
-    loadOrderData();
-
-    // Trigger celebration
-    await triggerCelebration();
-
-    // Resolve after initialization
+    await initializeConfirmation();
     return resolve();
   });
 };
 
-// Load order data from URL parameters
-function loadOrderData() {
-  const urlParams = new URLSearchParams(window.location.search);
-
-  // Parse raw data from URL
-  const orderId = urlParams.get('orderId') || generateOrderNumber();
-  const productId = urlParams.get('productId');
-  const productName = urlParams.get('productName');
-  const total = parseFloat(urlParams.get('amount') || 0);
-  const currency = urlParams.get('currency') || 'USD';
-  const billingCycle = urlParams.get('frequency');
-  const paymentMethod = urlParams.get('paymentMethod');
-  const hasFreeTrial = urlParams.get('trial') === 'true';
-
-  // Build billing cycle text
-  const billingCycleText = billingCycle === 'monthly' ? 'monthly' : billingCycle === 'annually' ? 'annually' : '';
-  const billingPeriodText = billingCycle === 'monthly' ? 'month' : billingCycle === 'annually' ? 'year' : '';
-
-  // Build subscription info text
-  let subscriptionInfoText = '';
-  if (billingCycle) {
-    if (hasFreeTrial) {
-      subscriptionInfoText = `Free Trial Active! Your trial period has begun. You'll be charged ${billingCycleText} after the trial ends.`;
-    } else {
-      subscriptionInfoText = `Your ${billingCycleText} subscription is now active. You'll be charged automatically each ${billingPeriodText}.`;
-    }
-  }
-
-  // Update state directly in bindings format
-  state.confirmation.order.id = orderId;
-  state.confirmation.order.productName = productName || productId || 'Product';
-  state.confirmation.order.total = `$${total.toFixed(2)}`;
-  state.confirmation.order.currency = currency;
-  state.confirmation.subscription.show = !!billingCycle;
-  state.confirmation.subscription.hasFreeTrial = hasFreeTrial;
-  state.confirmation.subscription.billingCycle = billingCycleText;
-  state.confirmation.subscription.infoText = subscriptionInfoText;
-  state.confirmation.loaded = true;
-
-  // Update UI with complete bindings
-  updateAllUI(webManager);
-
-  // Track analytics only if not already tracked
-  trackPurchaseIfNotTracked({
-    orderId,
-    productId,
-    productName,
-    total,
-    currency,
-    billingCycle,
-    paymentMethod,
-    hasFreeTrial
-  });
-}
-
-// Generate a mock order number
-function generateOrderNumber() {
-  const timestamp = Date.now();
-  const random = Math.floor(Math.random() * 1000);
-  return `ORD-${timestamp}-${random}`;
+// Update UI via bindings (single source of truth)
+function updateUI() {
+  webManager.bindings().update(buildBindingsState());
 }
 
-// Trigger celebration animation
-async function triggerCelebration() {
-  try {
-    // Load confetti library using webManager
-    await webManager.dom().loadScript({
-      src: 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js'
-    });
-
-    // Fire confetti
-    window.confetti({
-      particleCount: 100,
-      spread: 70,
-      origin: { y: 0.6 },
-      colors: ['#5b6fff', '#8b5cf6', '#22d3ee', '#34d399', '#fb923c']
-    });
+// Initialize confirmation page
+async function initializeConfirmation() {
+  // Parse URL params into state
+  parseUrlParams();
 
-    // Optional: Fire from multiple angles for more celebration
-    setTimeout(() => {
-      window.confetti({
-        particleCount: 50,
-        angle: 60,
-        spread: 55,
-        origin: { x: 0 },
-        colors: ['#5b6fff', '#8b5cf6', '#22d3ee']
-      });
-    }, 250);
+  // Update UI with loaded data
+  updateUI();
 
-    setTimeout(() => {
-      window.confetti({
-        particleCount: 50,
-        angle: 120,
-        spread: 55,
-        origin: { x: 1 },
-        colors: ['#34d399', '#fb923c', '#5b6fff']
-      });
-    }, 400);
+  // Track purchase (if track=true param present)
+  // trackPurchaseIfNeeded(state, webManager);
 
-  } catch (error) {
-    console.log('Confetti library failed to load:', error);
-  }
+  // Trigger celebration animation
+  await triggerCelebration(webManager);
 }
 
-// Track purchase only if not already tracked for this order
-function trackPurchaseIfNotTracked(orderData) {
+// Parse URL parameters into minimal state
+function parseUrlParams() {
   const urlParams = new URLSearchParams(window.location.search);
-  const shouldTrack = urlParams.get('track') === 'true';
 
-  // Only track if the track parameter is present and true
-  if (!shouldTrack) {
-    console.log('Tracking parameter not present or false, skipping tracking');
-    return;
-  }
-
-  // Track the purchase
-  trackPurchase(orderData);
-
-  // Remove only the 'track' parameter from URL to prevent re-tracking on refresh
-  urlParams.delete('track');
-  const newUrl = urlParams.toString()
-    ? `${window.location.pathname}?${urlParams.toString()}`
-    : window.location.pathname;
-
-  window.history.replaceState({}, document.title, newUrl);
-  console.log('Removed track parameter from URL to prevent duplicate tracking');
-
-  // Also store in localStorage as backup (in case user navigates back with track=true)
-  const trackedOrders = JSON.parse(localStorage.getItem('trackedPurchases') || '[]');
-  if (!trackedOrders.includes(orderData.orderId)) {
-    trackedOrders.push(orderData.orderId);
-
-    // Keep only last 50 orders
-    if (trackedOrders.length > 50) {
-      trackedOrders.shift();
-    }
-
-    localStorage.setItem('trackedPurchases', JSON.stringify(trackedOrders));
-  }
-}
-
-// Track purchase event to all analytics providers
-function trackPurchase(orderData) {
-  // Prepare items array for consistent tracking
-  const items = [{
-    item_id: orderData.productId,
-    item_name: orderData.productName || orderData.productId,
-    item_category: orderData.billingCycle ? 'subscription' : 'one-time',
-    item_variant: orderData.billingCycle,
-    price: orderData.total,
-    quantity: 1
-  }];
-
-  // Google Analytics 4
-  gtag('event', 'purchase', {
-    transaction_id: orderData.orderId,
-    value: orderData.total,
-    currency: orderData.currency,
-    items: items
-  });
-
-  // Facebook Pixel
-  fbq('track', 'Purchase', {
-    content_ids: [orderData.productId],
-    content_name: orderData.productName || orderData.productId,
-    content_type: 'product',
-    currency: orderData.currency,
-    value: orderData.total,
-    num_items: 1
-  });
-
-  // TikTok Pixel
-  ttq.track('CompletePayment', {
-    content_id: orderData.productId,
-    content_type: 'product',
-    content_name: orderData.productName || orderData.productId,
-    price: orderData.total,
-    quantity: 1,
-    currency: orderData.currency,
-    value: orderData.total
-  });
-
-  console.log('Tracked purchase event:', {
-    orderId: orderData.orderId,
-    productId: orderData.productId,
-    total: orderData.total,
-    currency: orderData.currency
-  });
+  state.orderId = urlParams.get('orderId') || '';
+  state.productId = urlParams.get('productId') || '';
+  state.productName = urlParams.get('productName') || '';
+  state.amount = parseFloat(urlParams.get('amount') || 0);
+  state.currency = urlParams.get('currency') || 'USD';
+  state.frequency = urlParams.get('frequency') || '';
+  state.paymentMethod = urlParams.get('paymentMethod') || '';
+  state.hasFreeTrial = urlParams.get('trial') === 'true';
+  state.loaded = true;
 }

package/dist/assets/js/pages/payment/confirmation/modules/celebration.js

@@ -0,0 +1,42 @@
+// Celebration animation for confirmation page
+
+// Trigger confetti celebration
+export async function triggerCelebration(webManager) {
+  try {
+    await webManager.dom().loadScript({
+      src: 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js'
+    });
+
+    // Center burst
+    window.confetti({
+      particleCount: 100,
+      spread: 70,
+      origin: { y: 0.6 },
+      colors: ['#5b6fff', '#8b5cf6', '#22d3ee', '#34d399', '#fb923c'],
+    });
+
+    // Left side burst
+    setTimeout(() => {
+      window.confetti({
+        particleCount: 50,
+        angle: 60,
+        spread: 55,
+        origin: { x: 0 },
+        colors: ['#5b6fff', '#8b5cf6', '#22d3ee'],
+      });
+    }, 250);
+
+    // Right side burst
+    setTimeout(() => {
+      window.confetti({
+        particleCount: 50,
+        angle: 120,
+        spread: 55,
+        origin: { x: 1 },
+        colors: ['#34d399', '#fb923c', '#5b6fff'],
+      });
+    }, 400);
+  } catch (error) {
+    console.log('Confetti library failed to load:', error);
+  }
+}

package/dist/assets/js/pages/payment/confirmation/modules/state.js

@@ -1,19 +1,68 @@
-// Confirmation state management
-// This is the SINGLE source of truth - structure matches bindings exactly
+// State management for confirmation page
+// Minimal mutable state -- everything else is derived by buildBindingsState()
+
+// Minimal mutable state
 export const state = {
-  confirmation: {
-    order: {
-      id: 'Loading...',
-      productName: 'Product',
-      total: '$0.00',
-      currency: 'USD'
-    },
-    subscription: {
-      show: false,
-      hasFreeTrial: false,
-      billingCycle: '',
-      infoText: ''
-    },
-    loaded: false
+  // Raw values from URL params (never formatted)
+  orderId: '',
+  productId: '',
+  productName: '',
+  amount: 0,
+  currency: 'USD',
+  frequency: '',
+  paymentMethod: '',
+  hasFreeTrial: false,
+
+  // UI state
+  loaded: false,
+};
+
+// Build the complete bindings state from minimal state
+// Returns a fresh object every time -- no mutation of shared references
+export function buildBindingsState() {
+  const isSubscription = !!state.frequency;
+  const billingCycleText = state.frequency === 'monthly'
+    ? 'monthly'
+    : state.frequency === 'annually'
+      ? 'annually'
+      : '';
+  const billingPeriodText = state.frequency === 'monthly'
+    ? 'month'
+    : state.frequency === 'annually'
+      ? 'year'
+      : '';
+
+  // Build subscription info text
+  let subscriptionInfoText = '';
+  if (isSubscription) {
+    if (state.hasFreeTrial) {
+      subscriptionInfoText = `Free Trial Active! Your trial period has begun. You'll be charged ${billingCycleText} after the trial ends.`;
+    } else {
+      subscriptionInfoText = `Your ${billingCycleText} subscription is now active. You'll be charged automatically each ${billingPeriodText}.`;
+    }
   }
-};
+
+  return {
+    confirmation: {
+      order: {
+        id: state.orderId || 'Loading...',
+        productName: state.productName || state.productId || 'Product',
+        total: formatCurrency(state.amount),
+        currency: state.currency,
+      },
+      subscription: {
+        show: isSubscription,
+        hasFreeTrial: state.hasFreeTrial,
+        billingCycle: billingCycleText,
+        infoText: subscriptionInfoText,
+      },
+      loaded: state.loaded,
+    },
+  };
+}
+
+// Format a number as currency, or return placeholder
+function formatCurrency(amount) {
+  if (amount == null || isNaN(amount)) return '$--';
+  return `$${Number(amount).toFixed(2)}`;
+}

package/dist/assets/js/pages/payment/confirmation/modules/tracking.js

@@ -0,0 +1,83 @@
+// Purchase analytics tracking for confirmation page
+// All three platforms tracked together, no conditional checks
+
+// Build common item array for tracking
+function buildItems(state) {
+  return [{
+    item_id: state.productId,
+    item_name: state.productName || state.productId,
+    item_category: state.frequency ? 'subscription' : 'one-time',
+    item_variant: state.frequency,
+    price: state.amount,
+    quantity: 1,
+  }];
+}
+
+// Track purchase event to all analytics providers
+function trackPurchase(state) {
+  const items = buildItems(state);
+
+  // Google Analytics 4
+  gtag('event', 'purchase', {
+    transaction_id: state.orderId,
+    value: state.amount,
+    currency: state.currency,
+    items: items,
+  });
+
+  // Facebook Pixel
+  fbq('track', 'Purchase', {
+    content_ids: [state.productId],
+    content_name: state.productName || state.productId,
+    content_type: 'product',
+    currency: state.currency,
+    value: state.amount,
+    num_items: 1,
+  });
+
+  // TikTok Pixel
+  ttq.track('CompletePayment', {
+    content_id: state.productId,
+    content_type: 'product',
+    content_name: state.productName || state.productId,
+    price: state.amount,
+    quantity: 1,
+    currency: state.currency,
+    value: state.amount,
+  });
+}
+
+// Track purchase only if the track=true URL param is present
+// Removes the param after tracking to prevent duplicates on refresh
+// Also stores orderId in webManager storage as a backup guard
+export function trackPurchaseIfNeeded(state, webManager) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const shouldTrack = urlParams.get('track') === 'true';
+
+  if (!shouldTrack) {
+    return;
+  }
+
+  // Track the purchase
+  trackPurchase(state);
+
+  // Remove 'track' param from URL to prevent re-tracking on refresh
+  urlParams.delete('track');
+  const newUrl = urlParams.toString()
+    ? `${window.location.pathname}?${urlParams.toString()}`
+    : window.location.pathname;
+  window.history.replaceState({}, document.title, newUrl);
+
+  // Backup: store orderId in storage
+  const trackedOrders = webManager.storage().get('trackedPurchases', []);
+  if (!trackedOrders.includes(state.orderId)) {
+    trackedOrders.push(state.orderId);
+
+    // Keep only last 50 orders
+    if (trackedOrders.length > 50) {
+      trackedOrders.shift();
+    }
+
+    webManager.storage().set('trackedPurchases', trackedOrders);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultimate-jekyll-manager",
-  "version": "0.0.265",
+  "version": "0.0.266",
   "description": "Ultimate Jekyll dependency manager",
   "main": "dist/index.js",
   "exports": {
@@ -17,7 +17,9 @@
   },
   "bin": {
     "uj": "bin/ultimate-jekyll",
-    "ultimate-jekyll": "bin/ultimate-jekyll"
+    "ujm": "bin/ultimate-jekyll",
+    "ultimate-jekyll": "bin/ultimate-jekyll",
+    "mgr": "bin/ultimate-jekyll"
   },
   "preparePackage": {
     "input": "./src",
@@ -75,7 +77,7 @@
     "cheerio": "^1.2.0",
     "chrome-launcher": "^1.2.1",
     "dotenv": "^17.3.1",
-    "fast-xml-parser": "^5.3.9",
+    "fast-xml-parser": "^5.4.1",
     "fs-jetpack": "^5.1.0",
     "glob": "^13.0.6",
     "gulp-clean-css": "^4.3.0",
@@ -91,7 +93,7 @@
     "json5": "^2.2.3",
     "libsodium-wrappers": "^0.8.2",
     "lodash": "^4.17.23",
-    "minimatch": "^10.2.3",
+    "minimatch": "^10.2.4",
     "node-powertools": "^2.3.2",
     "npm-api": "^1.0.1",
     "postcss": "^8.5.6",
@@ -99,7 +101,7 @@
     "sass": "^1.97.3",
     "spellchecker": "^3.7.1",
     "through2": "^4.0.2",
-    "web-manager": "^4.1.13",
+    "web-manager": "^4.1.14",
     "webpack": "^5.105.2",
     "wonderful-fetch": "^1.3.4",
     "wonderful-version": "^1.3.2",

package/dist/assets/js/pages/payment/confirmation/modules/bindings.js

@@ -1,28 +0,0 @@
-// Confirmation Bindings Module
-import { state } from './state.js';
-
-// Get the COMPLETE confirmation bindings object
-// State IS the bindings - no transformation needed
-export function getCompleteConfirmationBindings() {
-  // Just return state directly - it's already structured correctly
-  return state;
-}
-
-// Update all UI through bindings
-// ALWAYS passes the COMPLETE confirmation object
-export function updateAllUI(webManager) {
-  const bindingsData = getCompleteConfirmationBindings();
-
-  console.log('🔄 Updating confirmation bindings with data:', bindingsData);
-
-  webManager.bindings().update(bindingsData);
-}
-
-// Initialize confirmation UI with loading states
-export function initializeConfirmationUI() {
-  console.log('🚀 Initializing confirmation UI');
-
-  // State is already initialized with default values
-  // We'll update bindings once after data is loaded
-  state.confirmation.loaded = false;
-}