@omega.js/web 0.1.0

package/core/js/pages/portal/email-preferences/index.js

@@ -0,0 +1,183 @@
+/**
+ * Email Preferences Page JavaScript
+ */
+
+// Libraries
+import { FormManager } from '@omega.js/client/modules/form-manager.js';
+import fetch from 'wonderful-fetch';
+import omega from '@omega.js/client';
+import { WAKEUP_ROUTE } from '@omega.js/client/modules/request.js';
+import { event } from '__main_assets__/js/libs/analytics.js';
+
+// Module
+export default () => {
+  return new Promise(async function (resolve) {
+    // Warm the backend the moment the page loads: an unsubscribe arrives from
+    // an email, clicks once, and that click is a POST to
+    // `/omega/marketing/email-preferences`. Fire-and-forget and
+    // unauthenticated — the backend answers a wakeup before it loads a route
+    // ([#644](https://github.com/Omega-JS-Stack/omega/issues/644)).
+    omega.request(WAKEUP_ROUTE, { wakeup: true });
+
+    // Initialize when DOM is ready
+    await omega.dom().ready();
+
+    setupForm();
+
+    // Resolve after initialization
+    return resolve();
+  });
+};
+
+// Decode a base64-encoded URL parameter
+function decodeParam(encoded) {
+  if (!encoded) {
+    return '';
+  }
+
+  try {
+    return atob(decodeURIComponent(encoded));
+  } catch (e) {
+    return '';
+  }
+}
+
+// Mask an email address: show first 2 and last char of local part, first 2 chars of domain
+// e.g. "ian.wiedenman+test-unsub@gmail.com" → "ia***************b@gm***.com"
+function maskEmail(email) {
+  const [local, domain] = email.split('@');
+
+  if (!local || !domain) {
+    return '***@***.***';
+  }
+
+  const domainParts = domain.split('.');
+  const domainName = domainParts.slice(0, -1).join('.');
+  const tld = domainParts.slice(-1)[0];
+
+  const maskedLocal = local.length <= 3
+    ? local[0] + '*'.repeat(local.length - 1)
+    : local.slice(0, 2) + '*'.repeat(local.length - 3) + local.slice(-1);
+
+  const maskedDomain = domainName.length <= 2
+    ? domainName
+    : domainName.slice(0, 2) + '*'.repeat(domainName.length - 2);
+
+  return `${maskedLocal}@${maskedDomain}.${tld}`;
+}
+
+// Setup form handling
+function setupForm() {
+  const url = new URL(window.location.href);
+
+  // Parse and decode URL parameters
+  const email = decodeParam(url.searchParams.get('email'));
+  const asmId = decodeParam(url.searchParams.get('asmId'));
+  const templateId = decodeParam(url.searchParams.get('templateId'));
+  const sig = url.searchParams.get('sig') || '';
+
+  // DOM elements
+  const $description = document.getElementById('email-preferences-description');
+  const $error = document.getElementById('email-preferences-error');
+  const $errorMessage = document.getElementById('email-preferences-error-message');
+  const $content = document.getElementById('email-preferences-content');
+  const $address = document.getElementById('email-preferences-address');
+  const $submit = document.getElementById('email-preferences-submit');
+  const $infoUnsubscribe = document.getElementById('email-preferences-info-unsubscribe');
+  const $infoResubscribe = document.getElementById('email-preferences-info-resubscribe');
+  const $actionButtons = document.querySelectorAll('[data-action]');
+
+  // Validate required parameters
+  if (!email || !asmId || !sig) {
+    $description.textContent = 'Something went wrong.';
+    $errorMessage.textContent = 'This link is invalid or expired. Please try clicking the link in your email again.';
+    $error.hidden = false;
+    return;
+  }
+
+  // Populate UI
+  $description.textContent = 'Confirm your email address to update your email preferences.';
+  $address.textContent = maskEmail(email);
+  $content.hidden = false;
+
+  // Track current action
+  let currentAction = 'unsubscribe';
+
+  // Action toggle buttons
+  $actionButtons.forEach($btn => {
+    $btn.addEventListener('click', () => {
+      currentAction = $btn.dataset.action;
+
+      // Update active state
+      $actionButtons.forEach($b => $b.classList.remove('active'));
+      $btn.classList.add('active');
+
+      // Toggle info messages
+      $infoUnsubscribe.hidden = currentAction !== 'unsubscribe';
+      $infoResubscribe.hidden = currentAction !== 'resubscribe';
+
+      // Update submit button — one adaptive voice; the icon + label carry
+      // the action (the old danger/success repaint fought the theme)
+      $submit.className = 'btn btn-adaptive w-100 mb-4';
+      if (currentAction === 'unsubscribe') {
+        $submit.querySelector('.button-text').innerHTML = `<i class="fa-solid fa-bell-slash me-2"></i>Unsubscribe`;
+      } else {
+        $submit.querySelector('.button-text').innerHTML = `<i class="fa-solid fa-bell me-2"></i>Resubscribe`;
+      }
+    });
+  });
+
+  // Initialize FormManager
+  const formManager = new FormManager('#email-preferences-form', {
+    autoReady: false,
+    allowResubmit: false,
+  });
+
+  // Custom validation: confirm email matches
+  formManager.on('validation', ({ data, setError }) => {
+    if (data.email_confirm.toLowerCase().trim() !== email.toLowerCase().trim()) {
+      setError('email_confirm', 'Email does not match. Please enter the email address this was sent to.');
+    }
+  });
+
+  // Submit handler
+  formManager.on('submit', async ({ data }) => {
+    const action = currentAction;
+
+    trackEmailPreference(action);
+
+    try {
+      await fetch(`${omega.getApiUrl()}/omega/marketing/email-preferences`, {
+        method: 'POST',
+        response: 'json',
+        body: {
+          email: email,
+          asmId: asmId,
+          action: action,
+          sig: sig,
+        },
+        timeout: 30000,
+      });
+
+      if (action === 'unsubscribe') {
+        formManager.showSuccess('You have been successfully unsubscribed. You will no longer receive these emails.');
+      } else {
+        formManager.showSuccess('You have been successfully resubscribed. You will start receiving these emails again.');
+      }
+    } catch (error) {
+      omega.sentry().captureException(new Error('Email preferences error', { cause: error }));
+      throw new Error('An error occurred while processing your request. Please try again.');
+    }
+  });
+
+  // Ready
+  formManager.ready();
+}
+
+// Tracking. The two outcomes are two catalog entries, not one name built from
+// a variable: a canonical name is a literal a reader can grep for.
+function trackEmailPreference(action) {
+  event(action === 'unsubscribe' ? 'marketing_email_unsubscribe' : 'marketing_email_subscribe', {
+    content_type: 'email_preferences',
+  });
+}

package/core/js/pages/pricing/index.js

@@ -0,0 +1,425 @@
+// Libraries
+import { getSaleName } from '__main_assets__/js/libs/sale-name.js';
+import omega from '@omega.js/client';
+import { WAKEUP_ROUTE } from '@omega.js/client/modules/request.js';
+import { parseCountTarget, formatCount } from '@omega.js/client/modules/motion.js';
+import { event } from '__main_assets__/js/libs/analytics.js';
+import { ONE_TIME_FREQUENCY } from '../payment/checkout/modules/state.js';
+
+// Module
+export default () => {
+  return new Promise(async function (resolve) {
+    // Initialize when DOM is ready
+    await omega.dom().ready();
+
+    setupBillingToggle();
+    setupPlanButtons();
+    setupCurrentPlanIndicator();
+
+    // Warm the backend the moment the page loads: every plan button leads to
+    // checkout, and checkout's first call is a backend POST. Fire-and-forget
+    // and unauthenticated — the backend answers a wakeup before it loads a
+    // route ([#637](https://github.com/Omega-JS-Stack/omega/issues/637)).
+    omega.request(WAKEUP_ROUTE, { wakeup: true });
+
+    // Setup promo countdown (wait until mouse is not over nav)
+    waitForNavUnhover();
+
+    // Resolve after initialization
+    return resolve();
+  });
+};
+
+// Configuration
+const config = {
+  selectors: {
+    billingRadios: 'input[name="billing"]',
+    amountElements: '.amount',
+    billingInfoElements: '.billing-info',
+    pricePerUnitElements: '.price-per-unit',
+    planButtons: '.btn-primary',
+    cardTitle: '.card-title'
+  }
+};
+
+// Setup billing toggle functionality
+function setupBillingToggle() {
+  const $billingRadios = document.querySelectorAll(config.selectors.billingRadios);
+  const $amountElements = document.querySelectorAll(config.selectors.amountElements);
+  const $billingInfoElements = document.querySelectorAll(config.selectors.billingInfoElements);
+  const $pricePerUnitElements = document.querySelectorAll(config.selectors.pricePerUnitElements);
+
+  // Debug log to check if elements are found
+  console.log('Amount elements found:', $amountElements.length);
+  console.log('Billing info elements found:', $billingInfoElements.length);
+  console.log('Price per unit elements found:', $pricePerUnitElements.length);
+
+  $billingRadios.forEach(radio => {
+    radio.addEventListener('change', function() {
+      const billingType = this.dataset.billing;
+      console.log('Billing type changed to:', billingType);
+
+      // Update button styling for toggle buttons
+      updateToggleButtons(this);
+
+      trackPricingToggle(billingType);
+      updatePricing(billingType, $amountElements, $billingInfoElements, $pricePerUnitElements);
+    });
+  });
+
+  // Initialize toggle button styling on page load
+  const $checkedRadio = document.querySelector(`${config.selectors.billingRadios}:checked`);
+  if ($checkedRadio) {
+    updateToggleButtons($checkedRadio);
+  }
+}
+
+// Update toggle button styling
+function updateToggleButtons(activeRadio) {
+  // Find all toggle buttons (labels for the radio inputs)
+  const toggleGroup = activeRadio.closest('.btn-group, .btn-group-toggle');
+  if (!toggleGroup) return;
+
+  const allButtons = toggleGroup.querySelectorAll('label.btn');
+
+  console.log('Toggle group found:', toggleGroup);
+  console.log('All buttons found:', allButtons.length);
+  console.log('Active radio:', activeRadio);
+
+  allButtons.forEach(button => {
+    // Remove all button classes first
+    button.classList.remove('btn-primary', 'btn-outline-adaptive');
+
+    // Check if this button's for attribute matches the active radio's id
+    const forAttribute = button.getAttribute('for');
+    const isActive = forAttribute && forAttribute === activeRadio.id;
+
+    console.log('Button for:', forAttribute, 'Radio id:', activeRadio.id, 'Is active:', isActive);
+
+    if (isActive) {
+      // Active button - make it outline primary
+      button.classList.add('btn-primary');
+    } else {
+      // Inactive button - make it outline adaptive
+      button.classList.add('btn-outline-adaptive');
+    }
+  });
+}
+
+// Tween a numeric text swap (prices glide between billing periods); falls
+// back to an instant swap for non-numeric text or reduced motion.
+const PRICE_TWEEN_MS = 450;
+
+function animateNumericText($el, newText) {
+  const from = parseCountTarget($el.textContent);
+  const to = parseCountTarget(newText);
+
+  if (!from || !to || from.value === to.value
+    || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    $el.textContent = newText;
+    return;
+  }
+
+  // Rapid toggling cancels the in-flight tween
+  if ($el._priceTween) {
+    cancelAnimationFrame($el._priceTween);
+  }
+
+  const start = performance.now();
+  const tick = (now) => {
+    const progress = Math.min((now - start) / PRICE_TWEEN_MS, 1);
+    const eased = 1 - ((1 - progress) ** 3);
+
+    if (progress < 1) {
+      $el.textContent = formatCount(to, from.value + ((to.value - from.value) * eased));
+      $el._priceTween = requestAnimationFrame(tick);
+    } else {
+      $el.textContent = newText;
+      $el._priceTween = null;
+    }
+  };
+  $el._priceTween = requestAnimationFrame(tick);
+}
+
+// Update pricing display based on billing type
+function updatePricing(billingType, amountElements, billingInfoElements, pricePerUnitElements) {
+  // Update prices (tweened — the numbers glide between billing periods)
+  amountElements.forEach(amount => {
+    const newPrice = billingType === 'monthly'
+      ? amount.dataset.monthly
+      : amount.dataset.annually;
+
+    animateNumericText(amount, newPrice);
+  });
+
+  // Update billing info
+  billingInfoElements.forEach(info => {
+    const newText = billingType === 'monthly'
+      ? info.dataset.monthly
+      : info.dataset.annually;
+
+    info.textContent = newText;
+  });
+
+  // Update price per unit (tweened, same as the headline amounts)
+  pricePerUnitElements.forEach(pricePerUnit => {
+    const newPricePerUnit = billingType === 'monthly'
+      ? pricePerUnit.dataset.monthly
+      : pricePerUnit.dataset.annually;
+
+    animateNumericText(pricePerUnit, newPricePerUnit);
+  });
+}
+
+// Setup plan button click handlers
+function setupPlanButtons() {
+  // Select all buttons with data-plan-id attribute
+  const $planButtons = document.querySelectorAll('button[data-plan-id]');
+
+  $planButtons.forEach(button => {
+    button.addEventListener('click', function() {
+      handlePlanSelection(this);
+    });
+  });
+
+  // The enterprise tier is a LINK in its own row (no checkout, no cart) — the
+  // browser does the navigating, we only track the intent on the way out
+  document.querySelectorAll('a[data-plan-enterprise]').forEach($link => {
+    $link.addEventListener('click', function() {
+      trackEnterpriseContact();
+    });
+  });
+}
+
+// Handle plan selection
+function handlePlanSelection(button) {
+  const planId = button.dataset.planId;
+  const planType = button.dataset.planType || 'subscription';
+  const billingType = document.querySelector(`${config.selectors.billingRadios}:checked`)?.dataset.billing || 'monthly';
+
+  if (!planId) {
+    omega.sentry().captureException(new Error('Plan ID missing from button'));
+    return;
+  }
+
+  // A signed-in subscriber switching plans has nothing to check out: the live
+  // subscription moves, prorated, from the billing page's change-plan modal.
+  // The account page opens on its billing tab and the section reads these
+  // params back to open that modal preselected ([#236]).
+  //
+  // This returns BEFORE the add-to-cart pair below on purpose: no cart is
+  // involved and no purchase follows, so firing `add_to_cart` at three
+  // networks would put a conversion event on every plan switch.
+  if (button.dataset.planAction === 'switch') {
+    const switchUrl = new URL('/dashboard/account', window.location.origin);
+    switchUrl.searchParams.set('product', planId);
+    switchUrl.searchParams.set('frequency', billingType);
+    switchUrl.hash = 'billing';
+
+    window.location.href = switchUrl.toString();
+    return;
+  }
+
+  // Get plan name and price for analytics
+  const card = button.closest('.card');
+  const planNameElement = card?.querySelector('.h3, .h2, .card-title');
+  const planName = planNameElement?.textContent || planId;
+  const priceElement = card?.querySelector('.amount');
+  const price = priceElement ? parseFloat(priceElement.textContent) : 0;
+
+  // Track add to cart event
+  trackAddToCart(planId, planName, price, billingType, planType);
+
+  // Log for debugging
+  console.log(`Added to cart: ${planId} (${planType}, ${billingType} frequency) - $${price}`);
+
+  // Special handling for enterprise plan
+  if (planId === 'enterprise') {
+    trackEnterpriseContact();
+    window.location.href = '/contact';
+    return;
+  }
+
+  // Build URL going directly to checkout (skip cart page)
+  const url = new URL('/payment/checkout', window.location.origin);
+  url.searchParams.set('product', planId);
+
+  // Billing frequency only applies to subscriptions — one-time products
+  // have a single price (payment.products type drives this via data-plan-type)
+  if (planType === 'subscription') {
+    url.searchParams.set('frequency', billingType);
+  }
+
+  // Redirect directly to checkout
+  window.location.href = url.toString();
+}
+
+// Tracking functions
+function trackPricingToggle(billingType) {
+  event('pricing_toggle', {
+    billing_type: billingType
+  });
+}
+
+function trackAddToCart(planId, planName, price, billingType, planType) {
+  const isSubscription = (planType || 'subscription') === 'subscription';
+
+  const items = [{
+    item_id: planId,
+    item_name: planName,
+    item_category: planType || 'subscription',
+    // The cadence toggle says nothing about a one-time product: the checkout
+    // link above already drops the param for one, and `begin_checkout` and
+    // `purchase` both name it `once`, so quoting the toggle's cadence here made
+    // the funnel's FIRST event the only one calling a one-time buy monthly
+    // ([#668](https://github.com/Omega-JS-Stack/omega/issues/668)).
+    item_variant: isSubscription ? billingType : ONE_TIME_FREQUENCY,
+    price: price,
+    quantity: 1
+  }];
+
+  event('add_to_cart', {
+    currency: 'USD',
+    value: price,
+    items: items
+  });
+}
+
+function trackEnterpriseContact() {
+  event('contact_enterprise', {
+    from_page: 'pricing'
+  });
+}
+
+function waitForNavUnhover() {
+  function checkAndRun() {
+    const $nav = document.querySelector('nav');
+
+    if (!$nav) {
+      // If no nav element found, just run immediately
+      setupPromoCountdown();
+      return;
+    }
+
+    const isHovering = $nav.matches(':hover');
+
+    if (isHovering) {
+      // Mouse is over nav, restart timer
+      setTimeout(checkAndRun, 1000);
+    } else {
+      // Mouse is not over nav, safe to run
+      setupPromoCountdown();
+    }
+  }
+
+  // Always wait 1 second first, then check
+  setTimeout(checkAndRun, 1000);
+}
+
+function setupPromoCountdown() {
+  const $countdownEl = document.getElementById('pricing-promo-countdown');
+  const $promoTextEl = document.getElementById('pricing-promo-text');
+
+  if (!$countdownEl || !$promoTextEl) {
+    return;
+  }
+
+  const { saleName } = getSaleName();
+
+  $promoTextEl.textContent = saleName;
+
+  const twoDaysInMs = 2 * 24 * 60 * 60 * 1000;
+  const cycleStart = Math.floor(Date.now() / twoDaysInMs) * twoDaysInMs;
+  const cycleEnd = cycleStart + twoDaysInMs;
+
+  function updateCountdown() {
+    const now = new Date();
+    const diff = cycleEnd - now.getTime();
+
+    if (diff <= 0) {
+      $countdownEl.textContent = '0d : 00h : 00m : 00s';
+      return;
+    }
+
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const hours = String(Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0');
+    const minutes = String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
+    const seconds = String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, '0');
+
+    $countdownEl.textContent = `${days}d : ${hours}h : ${minutes}m : ${seconds}s`;
+  }
+
+  // Initial call and interval setup
+  updateCountdown();
+  setInterval(updateCountdown, 1000);
+
+  // Adjust navbar offset to account for banner height
+  adjustNavbarOffset();
+}
+
+// Update buttons based on the user's current active plan
+function setupCurrentPlanIndicator() {
+  omega.auth().listen({ once: true }, (state) => {
+    const resolved = omega.auth().resolveSubscription(state.account);
+
+    if (!resolved.active) {
+      return;
+    }
+
+    // Mark current plan button
+    const $currentButton = document.querySelector(`button[data-plan-id="${resolved.plan}"]`);
+    if ($currentButton) {
+      $currentButton.disabled = true;
+      $currentButton.textContent = 'Current Plan';
+      $currentButton.classList.remove('btn-primary', 'btn-outline-adaptive');
+      $currentButton.classList.add('btn-adaptive');
+    }
+
+    // A subscription with a cancellation already scheduled cannot switch at
+    // all — the providers swap the price and leave the schedule standing, so
+    // the backend refuses it and the billing page hides its Change button
+    // ([#237]). Offering "Switch to this plan" here would promise a move that
+    // ends in a modal that will not open: those buttons keep the CTA they were
+    // authored with.
+    if (state.account?.subscription?.cancellation?.pending === true) {
+      return;
+    }
+
+    // Update other subscription buttons to "Switch to this plan" — one-time
+    // products and the enterprise contact button keep their own CTAs. The
+    // stamped action is what re-routes the click: a subscriber switching plans
+    // is not buying a second one, so the button goes to the billing page's own
+    // switcher rather than through checkout ([#236]).
+    document.querySelectorAll('button[data-plan-id]').forEach(($button) => {
+      if ($button.dataset.planId === resolved.plan || $button.dataset.planId === 'enterprise' || $button.dataset.planType !== 'subscription') {
+        return;
+      }
+      $button.textContent = 'Switch to This Plan';
+      $button.dataset.planAction = 'switch';
+    });
+  });
+}
+
+function adjustNavbarOffset() {
+  const $promoBanner = document.getElementById('pricing-promo-banner');
+  // The fixed nav the banner pushes down (classy v2's .omega-nav; .navbar-wrapper for legacy themes)
+  const $nav = document.querySelector('.omega-nav, .navbar-wrapper');
+
+  if (!$promoBanner || !$nav) {
+    return;
+  }
+
+  // Remove hidden attribute
+  $promoBanner.removeAttribute('hidden');
+
+  // Full banner height — the banner sits entirely ABOVE the nav, never
+  // bleeding into it (the nav's margin transition makes the push-down glide)
+  const bannerOffset = $promoBanner.offsetHeight;
+
+  // Push navbar down to make room for banner. The NAV is the only thing that
+  // moves: the banner is nav chrome, and adding its height to the opening
+  // section's padding too dropped the whole page a second into the visit
+  // ([#764](https://github.com/Omega-JS-Stack/omega/issues/764)). The page's
+  // own CSS holds whatever room the banner needs.
+  $nav.style.marginTop = `${bannerOffset}px`;
+}

package/core/js/pages/privacy.js

@@ -0,0 +1,2 @@
+// /privacy — the shared legal-document module (pages/legal/_document.js).
+export { default } from './legal/_document.js';

package/core/js/pages/reset/index.js

@@ -0,0 +1,12 @@
+// Libraries
+import authPages from '__main_assets__/js/libs/auth/index.js';
+
+// Module
+export default () => {
+  return new Promise(async function (resolve, reject) {
+    await authPages();
+
+    // Resolve
+    return resolve();
+  });
+}

package/core/js/pages/signin/index.js

@@ -0,0 +1,22 @@
+// Libraries
+import authPages from '__main_assets__/js/libs/auth/index.js';
+import omega from '@omega.js/client';
+import { WAKEUP_ROUTE } from '@omega.js/client/modules/request.js';
+
+// Module
+export default () => {
+  return new Promise(async function (resolve, reject) {
+    // Warm the backend the moment the page loads: a first-time OAuth signin
+    // creates the account right here, and the `/omega/user/signup` POST the
+    // global auth listener fires behind it lands on the same cold function the
+    // signup page pays for (Ian 2026-08-27). Fire-and-forget and
+    // unauthenticated — the backend answers a wakeup before it loads a route or
+    // authenticates ([#644](https://github.com/Omega-JS-Stack/omega/issues/644)).
+    omega.request(WAKEUP_ROUTE, { wakeup: true });
+
+    await authPages();
+
+    // Resolve
+    return resolve();
+  });
+}

package/core/js/pages/signup/index.js

@@ -0,0 +1,23 @@
+// Libraries
+import authPages from '__main_assets__/js/libs/auth/index.js';
+import omega from '@omega.js/client';
+import { WAKEUP_ROUTE } from '@omega.js/client/modules/request.js';
+
+// Module
+export default () => {
+  return new Promise(async function (resolve, reject) {
+    // Warm the backend the moment the page loads: the POST that ends this flow
+    // (`/omega/user/signup`, fired by the global auth listener as soon as the
+    // account exists) is the visitor's first real hit, and a cold function
+    // turned it into a 14-second wait on the button (Ian 2026-08-27).
+    // Fire-and-forget and unauthenticated — the backend answers a wakeup before
+    // it loads a route or authenticates
+    // ([#644](https://github.com/Omega-JS-Stack/omega/issues/644)).
+    omega.request(WAKEUP_ROUTE, { wakeup: true });
+
+    await authPages();
+
+    // Resolve
+    return resolve();
+  });
+}