@omega.js/web 0.1.0

package/core/js/pages/dashboard/account/sections/notifications.js

@@ -0,0 +1,167 @@
+/**
+ * Notifications section — marketing email consent toggle.
+ *
+ * Reads consent.marketing.status from the user doc for the toggle's initial state.
+ * User flips the toggle then clicks Save; on submit, POSTs to
+ * /omega/marketing/email-preferences with subscribe|unsubscribe.
+ * The server writes consent.marketing to the user doc + syncs SendGrid + Beehiiv.
+ *
+ * Uses FormManager for standard in-flight/success/error UX. On failure, the
+ * error message is shown via FormManager and the toggle stays where the user
+ * left it — they can try Save again without re-flipping.
+ */
+import { FormManager } from '@omega.js/client/modules/form-manager.js';
+import omega from '@omega.js/client';
+import { createLogger } from '__main_assets__/js/libs/logger.js';
+
+const logger = createLogger('account:push');
+
+const FORM_ID = 'marketing-emails-form';
+const TOGGLE_ID = 'marketing-emails';
+const GRANT_DATE_ID = 'marketing-emails-grant-date';
+
+let formManager = null;
+let pushFormManager = null;
+
+export function init() {
+  const $form = document.getElementById(FORM_ID);
+  if (!$form) {
+    return;
+  }
+
+  formManager = new FormManager(`#${FORM_ID}`, {
+    autoReady: false,          // Wait for loadData() to populate the toggle
+    allowResubmit: true,       // Save → flip again → Save again is normal flow
+    warnOnUnsavedChanges: false, // Toggle changes are explicit-Save, not draft
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    const action = data.enabled ? 'subscribe' : 'unsubscribe';
+
+    const response = await omega.request(`/omega/marketing/email-preferences`, {
+      method: 'POST',
+      timeout: 60000,
+      tries: 2,
+      body: { action },
+    });
+
+    if (!response?.success) {
+      throw new Error(response?.message || 'Failed to update email preferences. Please try again.');
+    }
+
+    formManager.showSuccess(
+      data.enabled
+        ? 'Subscribed to email updates.'
+        : 'Unsubscribed from email updates.'
+    );
+
+    // Hide the grant-date line on unsubscribe (the displayed date was the OLD grant;
+    // informational only). loadData() will repopulate it on the next page load if
+    // the user re-subscribes.
+    if (!data.enabled) {
+      const $date = document.getElementById(GRANT_DATE_ID);
+      if ($date) {
+        $date.classList.add('d-none');
+      }
+    }
+  });
+}
+
+export function loadData(account) {
+  if (!account || !formManager) {
+    return;
+  }
+
+  const $toggle = document.getElementById(TOGGLE_ID);
+  if (!$toggle) {
+    return;
+  }
+
+  const isGranted = account.consent?.marketing?.status === 'granted';
+  $toggle.checked = isGranted;
+
+  // Show the original grant date if known — gives the user context on what they agreed to.
+  const grantTimestamp = account.consent?.marketing?.grantedAt?.timestamp;
+  if (isGranted && grantTimestamp) {
+    const $date = document.getElementById(GRANT_DATE_ID);
+    if ($date) {
+      const date = new Date(grantTimestamp);
+      $date.textContent = `Subscribed ${date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}.`;
+      $date.classList.remove('d-none');
+    }
+  }
+
+  formManager.ready();
+
+  initPushNotifications();
+}
+
+function updatePushUI() {
+  const $status = document.getElementById('push-notification-status');
+  const $tokenInput = document.getElementById('push-token-value');
+
+  if (!$status) {
+    return;
+  }
+
+  const notifications = omega.notifications();
+  const stored = omega.storage().get('notifications', {});
+  const permission = typeof Notification !== 'undefined' ? Notification.permission : 'default';
+
+  let state;
+  if (stored.subscribed && stored.token) {
+    state = 'subscribed';
+    $status.innerHTML = '<span class="omega-status omega-status--ok"><span class="omega-dot omega-dot--ok"></span>Subscribed</span>';
+    if ($tokenInput) { $tokenInput.value = stored.token; }
+    if (pushFormManager) { pushFormManager._setDisabled(true); }
+  } else if (!notifications.isSupported()) {
+    state = 'not-supported';
+    $status.innerHTML = '<span class="omega-status omega-status--warn"><span class="omega-dot omega-dot--warn"></span>Not supported</span>';
+    if (pushFormManager) { pushFormManager._setDisabled(true); }
+  } else if (permission === 'denied') {
+    state = 'denied';
+    $status.innerHTML = '<span class="omega-status omega-status--danger"><span class="omega-dot omega-dot--danger"></span>Denied</span>';
+    if (pushFormManager) { pushFormManager._setDisabled(true); }
+  } else {
+    state = 'not-subscribed';
+    $status.innerHTML = '<span class="omega-status"><span class="omega-dot omega-dot--muted"></span>Not subscribed</span>';
+    if ($tokenInput) { $tokenInput.value = ''; }
+    if (pushFormManager) { pushFormManager.ready(); }
+  }
+
+  logger.log('updatePushUI →', state, { storedSubscribed: stored.subscribed, storedToken: stored.token?.slice(-8), permission });
+}
+
+async function initPushNotifications() {
+  const $status = document.getElementById('push-notification-status');
+  const $form = document.getElementById('push-subscribe-form');
+
+  if (!$status) {
+    return;
+  }
+
+  const notifications = omega.notifications();
+
+  // Full sync: validates permission + token + Firestore, then updates localStorage
+  await notifications.syncSubscription();
+
+  // Create the form (always starts disabled), then let updatePushUI control its state
+  if (notifications.isSupported() && $form) {
+    $form.style.display = '';
+
+    pushFormManager = new FormManager('#push-subscribe-form', {
+      autoReady: false,
+      allowResubmit: true,
+    });
+
+    pushFormManager.on('submit', async () => {
+      logger.log('Subscribe button clicked');
+      await notifications.subscribe();
+      logger.log('Subscribe complete — updating UI');
+      setTimeout(() => updatePushUI(), 0);
+    });
+  }
+
+  // Now that the form exists, let updatePushUI set the correct state
+  updatePushUI();
+}

package/core/js/pages/dashboard/account/sections/orders.js

@@ -0,0 +1,151 @@
+/**
+ * Orders Section JavaScript
+ *
+ * The account's purchase history. A one-time purchase writes nothing to the
+ * user doc, so before this section the only trace of one a customer could reach
+ * was the receipt email — while the confirmation copy told them to find it in
+ * their account ([#672](https://github.com/Omega-JS-Stack/omega/issues/672)).
+ */
+
+// Libraries
+import omega from '@omega.js/client';
+import { fetchOrders, requestRefundFor } from '../modules/orders.js';
+
+// Status pill config — the billing card's own vocabulary (dot + label, never
+// colour alone), so one purchase reads the same on both surfaces
+const STATUS_CONFIG = {
+  completed: { label: 'Paid', badgeClass: 'omega-status omega-status--ok', dotClass: 'omega-dot omega-dot--ok' },
+  active: { label: 'Active', badgeClass: 'omega-status omega-status--ok', dotClass: 'omega-dot omega-dot--ok' },
+  refunded: { label: 'Refunded', badgeClass: 'omega-status', dotClass: 'omega-dot omega-dot--muted' },
+  cancelled: { label: 'Cancelled', badgeClass: 'omega-status', dotClass: 'omega-dot omega-dot--muted' },
+  suspended: { label: 'Failed', badgeClass: 'omega-status omega-status--danger', dotClass: 'omega-dot omega-dot--danger' },
+  failed: { label: 'Failed', badgeClass: 'omega-status omega-status--danger', dotClass: 'omega-dot omega-dot--danger' },
+  // A purchase that never completed keeps the provider's own word for why
+  // (the backend passes it through), and each of those words is a real state a
+  // customer can read — without an entry they all rendered as "Unknown"
+  open: { label: 'Unpaid', badgeClass: 'omega-status', dotClass: 'omega-dot omega-dot--muted' },
+  payment_due: { label: 'Unpaid', badgeClass: 'omega-status', dotClass: 'omega-dot omega-dot--muted' },
+  not_paid: { label: 'Failed', badgeClass: 'omega-status omega-status--danger', dotClass: 'omega-dot omega-dot--danger' },
+  uncollectible: { label: 'Failed', badgeClass: 'omega-status omega-status--danger', dotClass: 'omega-dot omega-dot--danger' },
+  unknown: { label: 'Unknown', badgeClass: 'omega-status', dotClass: 'omega-dot omega-dot--muted' },
+};
+
+// Initialize orders section
+export function init() {
+  setupRefundButtons();
+}
+
+// Load the purchase history
+export async function loadData() {
+  const $list = document.getElementById('orders-list');
+
+  if (!$list) {
+    return;
+  }
+
+  try {
+    render(await fetchOrders());
+  } catch (error) {
+    console.error('Failed to load orders:', error);
+    $list.innerHTML = message('We could not load your purchases right now. Please refresh the page to try again.');
+  }
+}
+
+// ─── Rendering ──────────────────────────────────────────────
+
+function render(orders) {
+  const $list = document.getElementById('orders-list');
+  const $badge = document.getElementById('orders-badge');
+
+  if ($badge) {
+    $badge.textContent = String(orders.length);
+  }
+
+  if (!$list) {
+    return;
+  }
+
+  if (orders.length === 0) {
+    $list.innerHTML = message('You have not made any purchases yet.');
+    return;
+  }
+
+  $list.innerHTML = orders.map(row).join('');
+}
+
+function row(order) {
+  const status = STATUS_CONFIG[order.status] || STATUS_CONFIG.unknown;
+  const escape = (value) => omega.utilities().escapeHTML(String(value ?? ''));
+
+  // A refunded purchase says so in its pill; only an order the BACKEND calls
+  // refundable is offered the button, so a button here is a refund the route
+  // takes (`refundable` comes from the refund policy both sides read).
+  const refund = order.refundable
+    ? `<button type="button" class="btn btn-sm btn-outline-adaptive" data-action="request-refund" data-order-id="${escape(order.id)}">Request a refund</button>`
+    : '';
+
+  return `
+    <div class="list-group-item px-0">
+      <div class="d-flex justify-content-between align-items-center gap-3">
+        <div>
+          <strong>${escape(order.productName || order.productId || 'Purchase')}</strong>
+          <div class="text-muted small">
+            <span class="font-monospace">#${escape(order.id)}</span>
+            <span class="ms-2">${escape(formatDate(order.date?.timestampUNIX))}</span>
+          </div>
+        </div>
+        <div class="text-end">
+          <div>${escape(formatCurrency(order.amount, order.currency))}</div>
+          <span class="${status.badgeClass}"><span class="${status.dotClass}"></span>${escape(status.label)}</span>
+        </div>
+      </div>
+      ${refund ? `<div class="mt-2 text-end">${refund}</div>` : ''}
+    </div>
+  `;
+}
+
+function message(text) {
+  return `<div class="text-center text-muted py-3">${omega.utilities().escapeHTML(text)}</div>`;
+}
+
+// ─── Refund handoff ─────────────────────────────────────────
+
+// The button hands the pick to the shared module and switches to the Refund
+// section, which reads it when it comes on screen. Delegated, because the rows
+// are rendered after init() runs.
+function setupRefundButtons() {
+  const $list = document.getElementById('orders-list');
+
+  if (!$list) {
+    return;
+  }
+
+  $list.addEventListener('click', (event) => {
+    const $button = event.target.closest('[data-action="request-refund"]');
+
+    if (!$button) {
+      return;
+    }
+
+    requestRefundFor($button.dataset.orderId);
+    window.location.hash = '#refund';
+  });
+}
+
+// ─── Formatting ─────────────────────────────────────────────
+
+function formatDate(timestampUNIX) {
+  if (!timestampUNIX) {
+    return 'Unknown date';
+  }
+
+  return new Date(timestampUNIX * 1000).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+function formatCurrency(amount, currency) {
+  if (typeof amount !== 'number') {
+    return '';
+  }
+
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: (currency || 'USD').toUpperCase() }).format(amount);
+}

package/core/js/pages/dashboard/account/sections/profile.js

@@ -0,0 +1,200 @@
+/**
+ * Profile Section JavaScript
+ */
+
+// Libraries
+import { FormManager } from '@omega.js/client/modules/form-manager.js';
+import omega from '@omega.js/client';
+
+let formManager = null;
+
+// Initialize profile section
+export function init() {
+  setupProfileForm();
+}
+
+// Load profile data
+export function loadData(account, user) {
+  if (!account) {
+    return;
+  }
+
+  // Format birthday if it exists
+  let birthdayValue = '';
+  if (account.personal?.birthday?.timestamp && account.personal.birthday.timestampUNIX > 0) {
+    const date = new Date(account.personal.birthday.timestamp);
+    // Format as YYYY-MM-DD for HTML date input
+    birthdayValue = date.toISOString().split('T')[0];
+  }
+
+  // Format phone country code
+  let phoneCountryCode = '+1'; // Default to US/Canada
+  if (account.personal?.telephone?.countryCode) {
+    phoneCountryCode = `+${account.personal.telephone.countryCode}`;
+  }
+
+  // Build nested data structure matching our form field names
+  const formData = {
+    auth: {
+      email: account.auth?.email || user?.email || '',
+      uid: user?.uid || account.auth?.uid || '',
+    },
+    personal: {
+      name: {
+        first: account.personal?.name?.first || '',
+        last: account.personal?.name?.last || '',
+      },
+      birthday: birthdayValue,
+      gender: account.personal?.gender || '',
+      location: {
+        country: account.personal?.location?.country || '',
+        region: account.personal?.location?.region || '',
+        city: account.personal?.location?.city || '',
+        street: account.personal?.location?.street || '',
+        postalCode: account.personal?.location?.postalCode || '',
+      },
+      telephone: {
+        countryCode: phoneCountryCode,
+        national: account.personal?.telephone?.national?.toString() || '',
+      },
+    },
+  };
+
+  formManager.setData(formData);
+
+  // Set form to ready state now that data is loaded
+  formManager.ready();
+
+  // Update join date
+  updateJoinDate(user);
+
+  // Update role badges
+  updateRoleBadges(account);
+}
+
+// Setup profile form
+function setupProfileForm() {
+  formManager = new FormManager('#profile-form', {
+    autoReady: false, // Start in initializing state until data loads
+    submittingText: 'Saving...',
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    // Update user profile
+    await updateUserProfile(data);
+
+    // Show success message
+    formManager.showSuccess('Profile updated successfully!');
+  });
+}
+
+// Update user profile
+async function updateUserProfile(data) {
+  // Data is already in nested format thanks to dot notation!
+  // Just need to process special fields
+
+  // Parse birthday if provided
+  if (data.personal?.birthday) {
+    const date = new Date(data.personal.birthday);
+    data.personal.birthday = {
+      timestamp: date.toISOString(),
+      timestampUNIX: Math.floor(date.getTime() / 1000),
+    };
+  } else {
+    data.personal.birthday = {
+      timestamp: '1970-01-01T00:00:00.000Z',
+      timestampUNIX: 0,
+    };
+  }
+
+  // Parse phone country code (remove + sign)
+  if (data.personal?.telephone?.countryCode) {
+    data.personal.telephone.countryCode = parseInt(data.personal.telephone.countryCode.replace('+', '')) || 0;
+  }
+
+  // Parse phone national number (remove non-digits)
+  if (data.personal?.telephone?.national) {
+    data.personal.telephone.national = parseInt(data.personal.telephone.national.replace(/\D/g, '')) || 0;
+  }
+
+  // Remove auth data from update (shouldn't be updated)
+  delete data.auth;
+
+  // Log the data for debugging
+  console.log('Profile update data:', data);
+
+  // Get current user and update Firestore
+  const user = omega.auth().getUser();
+  const firestore = omega.firestore();
+  const userDocRef = firestore.doc(`users/${user.uid}`);
+
+  // Use merge to only update specified fields
+  await userDocRef.set(data, { merge: true });
+
+  console.log('Profile successfully updated in Firestore');
+}
+
+// Update join date from Firebase user
+function updateJoinDate(user) {
+  const $joinDate = document.getElementById('profile-join-date');
+  if (!$joinDate) {
+    return;
+  }
+
+  // Get creation time from Firebase user metadata
+  const creationTime = user?.metadata?.creationTime;
+
+  if (creationTime) {
+    const joinDate = new Date(creationTime);
+    const formattedDate = joinDate.toLocaleDateString('en-US', {
+      month: 'long',
+      year: 'numeric',
+    });
+
+    $joinDate.textContent = `Member since ${formattedDate}`;
+  } else {
+    // Fallback if no creation time available
+    $joinDate.textContent = 'Member';
+  }
+}
+
+// Update role badges based on user roles and subscription
+function updateRoleBadges(account) {
+  const roles = account?.roles || {};
+  const subscription = account?.subscription || account?.plan;
+
+  // Map of role to badge ID
+  const roleBadgeMap = {
+    admin: 'badge-admin',
+    developer: 'badge-coder',
+    moderator: 'badge-moderator',
+    betaTester: 'badge-beta',
+    vip: 'badge-vip',
+  };
+
+  // Show/hide role badges
+  Object.entries(roleBadgeMap).forEach(([role, badgeId]) => {
+    const $badge = document.getElementById(badgeId);
+    if ($badge) {
+      if (roles[role]) {
+        $badge.classList.remove('d-none');
+      } else {
+        $badge.classList.add('d-none');
+      }
+    }
+  });
+
+  // Show premium badge if subscription is active AND on a paid plan
+  const $premiumBadge = document.getElementById('badge-premium');
+  if ($premiumBadge) {
+    const productId = subscription?.product?.id || 'basic';
+    const isPaid = productId !== 'basic';
+    const isActive = subscription?.status === 'active';
+
+    if (isActive && isPaid) {
+      $premiumBadge.classList.remove('d-none');
+    } else {
+      $premiumBadge.classList.add('d-none');
+    }
+  }
+}