ultimate-jekyll-manager 0.0.278 → 0.0.280

package/dist/assets/css/pages/account/index.scss

@@ -74,6 +74,10 @@
     user-select: none;
   }
 
+  .progress {
+    background-color: var(--bs-tertiary-bg);
+  }
+
   .cancel-trigger-link {
     font-size: 0.8125rem;
     opacity: 0.7;

package/dist/assets/js/pages/account/sections/billing.js

@@ -5,7 +5,6 @@
 // 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;
 let appData = null;
@@ -23,6 +22,18 @@ const CANCEL_REASONS = [
   'Other',
 ];
 
+// Status display configuration
+const STATUS_CONFIG = {
+  free:       { label: 'Free',      badgeClass: 'badge bg-secondary' },
+  active:     { label: 'Active',    badgeClass: 'badge bg-success' },
+  trialing:   { label: 'Active',    badgeClass: 'badge bg-success' },
+  cancelling: { label: 'Active',    badgeClass: 'badge bg-success' },
+  suspended:  { label: 'Suspended', badgeClass: 'badge bg-danger' },
+  cancelled:  { label: 'Cancelled', badgeClass: 'badge bg-secondary' },
+};
+
+const FREQUENCY_LABELS = { daily: 'day', weekly: 'week', monthly: 'month', annually: 'year' };
+
 // Initialize billing section
 export async function init(wm) {
   webManager = wm;
@@ -39,11 +50,7 @@ export async function loadData(account, sharedAppData) {
   appData = sharedAppData;
   currentAccount = account;
 
-  updatePlanCard(account);
-  updateAlerts(account);
-  updateBillingDetails(account);
-  updateActionButtons(account);
-  updateUsageInfo(account);
+  updateUI(account);
 }
 
 // Called when section is shown
@@ -51,197 +58,89 @@ export function onShow() {
   // Nothing needed
 }
 
-// ─── Plan Card ───────────────────────────────────────────────
-
-function updatePlanCard(account) {
-  const subscription = account.subscription || {};
-  const $planStatus = document.getElementById('plan-status');
-  const $planDescription = document.getElementById('plan-description');
-
-  if (!$planStatus || !$planDescription) {
-    return;
-  }
-
-  const productId = getProductId(subscription);
-  const isPaid = productId !== 'basic';
-  const displayName = getDisplayName(subscription);
-  const status = getEffectiveStatus(subscription, isPaid);
+// ─── UI Update ──────────────────────────────────────────────
 
-  switch (status) {
-    case 'free': {
-      $planStatus.className = 'badge bg-secondary';
-      $planStatus.textContent = 'Free';
-      $planDescription.innerHTML = `You are currently on the <strong>${displayName}</strong> plan. Upgrade to unlock premium features.`;
-      break;
-    }
-    case 'trialing':
-    case 'cancelling':
-    case 'active': {
-      $planStatus.className = 'badge bg-success';
-      $planStatus.textContent = 'Active';
-      $planDescription.innerHTML = `You are currently on the <strong>${displayName}</strong> plan.`;
-      break;
-    }
-    case 'suspended': {
-      $planStatus.className = 'badge bg-danger';
-      $planStatus.textContent = 'Suspended';
-      $planDescription.innerHTML = `Your <strong>${displayName}</strong> subscription has been suspended and access has been revoked due to a payment issue. Please update your payment method to restore access.`;
-      break;
-    }
-    case 'cancelled': {
-      $planStatus.className = 'badge bg-secondary';
-      $planStatus.textContent = 'Cancelled';
-      $planDescription.innerHTML = `Your <strong>${displayName}</strong> subscription has ended. Resubscribe to regain access to premium features.`;
-      break;
-    }
-    default: {
-      $planStatus.className = 'badge bg-secondary';
-      $planStatus.textContent = 'Free';
-      $planDescription.innerHTML = `You are currently on the <strong>Free</strong> plan.`;
-      break;
-    }
-  }
+/* @dev-only:start */
+{
+  window._billing = {
+    test: (account) => updateUI(account),
+    state: () => buildBillingState(currentAccount),
+    restore: () => { if (currentAccount) updateUI(currentAccount); },
+  };
 }
+/* @dev-only:end */
 
-// ─── Alerts ──────────────────────────────────────────────────
-
-function updateAlerts(account) {
-  const $alerts = document.getElementById('billing-alerts');
-  if (!$alerts) {
-    return;
-  }
-
-  $alerts.innerHTML = '';
-  const subscription = account.subscription || {};
-  const productId = getProductId(subscription);
-  const isPaid = productId !== 'basic';
-  const status = getEffectiveStatus(subscription, isPaid);
-
-  // Suspended (payment issue) alert
-  if (status === 'suspended') {
-    $alerts.innerHTML += `
-      <div class="alert alert-danger d-flex align-items-start">
-        <span class="me-2 flex-shrink-0">${getPrerenderedIcon('triangle-exclamation', 'fa-md')}</span>
-        <div>
-          <strong>Payment failed</strong>
-          <p class="mb-0 small">Your payment method was declined. Please update your payment method to keep your subscription active.</p>
-        </div>
-      </div>
-    `;
-  }
-
-  // Cancellation pending alert
-  if (status === 'cancelling') {
-    const cancelTimestamp = subscription.cancellation?.date?.timestampUNIX;
-    const dateStr = cancelTimestamp && cancelTimestamp > 0
-      ? new Date(cancelTimestamp * 1000).toLocaleDateString()
-      : 'the end of your billing period';
-
-    $alerts.innerHTML += `
-      <div class="alert alert-warning d-flex align-items-start">
-        <span class="me-2 flex-shrink-0">${getPrerenderedIcon('clock', 'fa-md')}</span>
-        <div>
-          <strong>Cancellation scheduled</strong>
-          <p class="mb-0 small">Your subscription will end on <strong>${dateStr}</strong>. You'll continue to have full access until then. If you change your mind, you can reactivate through billing management.</p>
-        </div>
-      </div>
-    `;
-  }
-
-  // Free trial alert
-  if (status === 'trialing') {
-    const trialEndUnix = subscription.trial?.expires?.timestampUNIX;
-    const endDate = trialEndUnix && trialEndUnix > 0
-      ? new Date(trialEndUnix * 1000).toLocaleDateString()
-      : null;
-
-    $alerts.innerHTML += `
-      <div class="alert alert-success d-flex align-items-start">
-        <span class="me-2 flex-shrink-0">${getPrerenderedIcon('circle-check', 'fa-md')}</span>
-        <div>
-          <strong>Free trial</strong>
-          <p class="mb-0 small">You're on a free trial${endDate ? ` that ends on <strong>${endDate}</strong>` : ''}. You won't be charged until your trial ends.</p>
-        </div>
-      </div>
-    `;
-  }
+function updateUI(account) {
+  webManager.bindings().update(buildBillingState(account));
+  updateUsageInfo(account);
 }
 
-// ─── Billing Details ─────────────────────────────────────────
-
-function updateBillingDetails(account) {
-  const subscription = account.subscription || {};
-  const $details = document.getElementById('billing-details');
-
-  if (!$details) {
-    return;
-  }
-
+function buildBillingState(account) {
+  const subscription = account?.subscription || {};
   const productId = getProductId(subscription);
   const isPaid = productId !== 'basic';
   const status = getEffectiveStatus(subscription, isPaid);
+  const displayName = getDisplayName(subscription);
+  const config = STATUS_CONFIG[status] || STATUS_CONFIG.free;
 
-  // Only show billing details for paid, non-suspended, non-cancelled subscriptions
-  if (!isPaid || status === 'suspended' || status === 'cancelled') {
-    $details.classList.add('d-none');
-    return;
-  }
+  // Pre-format alert dates
+  const cancelTimestamp = subscription.cancellation?.date?.timestampUNIX;
+  const cancelDate = (cancelTimestamp && cancelTimestamp > 0)
+    ? new Date(cancelTimestamp * 1000).toLocaleDateString()
+    : 'the end of your billing period';
+
+  const trialEndUnix = subscription.trial?.expires?.timestampUNIX;
+  const trialEndDate = (trialEndUnix && trialEndUnix > 0)
+    ? new Date(trialEndUnix * 1000).toLocaleDateString()
+    : null;
 
+  // Pre-format billing details
   const nextBillingUnix = subscription.expires?.timestampUNIX;
   const amount = subscription.payment?.price;
   const currency = appData?.payment?.currency || 'USD';
   const frequency = subscription.payment?.frequency;
+  const hasValidBilling = nextBillingUnix && nextBillingUnix > 0 && amount;
 
-  if (!nextBillingUnix || nextBillingUnix <= 0 || !amount) {
-    $details.classList.add('d-none');
-    return;
-  }
-
-  const nextDate = new Date(nextBillingUnix * 1000).toLocaleDateString();
-  const formattedAmount = formatCurrency(amount, currency);
-  const FREQUENCY_LABELS = { daily: 'day', weekly: 'week', monthly: 'month', annually: 'year' };
-  const frequencyLabel = FREQUENCY_LABELS[frequency] || 'month';
-
-  $details.innerHTML = `
-    <div class="row small text-muted">
-      <div class="col-sm-6 mb-1">
-        <strong>Next billing:</strong> ${nextDate}
-      </div>
-      <div class="col-sm-6 mb-1">
-        <strong>Amount:</strong> ${formattedAmount} / ${frequencyLabel}
-      </div>
-    </div>
-  `;
-  $details.classList.remove('d-none');
+  return {
+    billing: {
+      plan: {
+        name: displayName,
+      },
+      status: {
+        label: config.label,
+        badgeClass: config.badgeClass,
+      },
+      description: {
+        free: status === 'free',
+        active: status === 'active' || status === 'trialing' || status === 'cancelling',
+        suspended: status === 'suspended',
+        cancelled: status === 'cancelled',
+      },
+      alerts: {
+        suspended: status === 'suspended',
+        cancelling: status === 'cancelling',
+        trialing: status === 'trialing',
+        cancelDate: cancelDate,
+        trialEndDate: trialEndDate || '',
+        trialHasEndDate: !!trialEndDate,
+      },
+      details: {
+        visible: isPaid && status !== 'suspended' && status !== 'cancelled' && !!hasValidBilling,
+        nextDate: hasValidBilling ? new Date(nextBillingUnix * 1000).toLocaleDateString() : '',
+        amount: hasValidBilling ? `${formatCurrency(amount, currency)} / ${FREQUENCY_LABELS[frequency] || 'month'}` : '',
+      },
+      buttons: {
+        upgrade: !isPaid || status === 'cancelled',
+        change: isPaid && status !== 'cancelled' && status !== 'suspended',
+        manage: isPaid && status !== 'cancelled',
+        cancel: isPaid && status !== 'cancelled' && status !== 'suspended',
+      },
+    },
+  };
 }
 
 // ─── Action Buttons ──────────────────────────────────────────
 
-function updateActionButtons(account) {
-  // Bindings handle the primary show/hide based on product.id (basic vs paid).
-  // JS only needs to refine for cancelled/suspended edge cases.
-  const subscription = account.subscription || {};
-  const productId = getProductId(subscription);
-  const isPaid = productId !== 'basic';
-  const status = getEffectiveStatus(subscription, isPaid);
-
-  const $upgradeBtn = document.getElementById('upgrade-plan-btn');
-  const $changeBtn = document.getElementById('change-plan-btn');
-  const $manageBtn = document.getElementById('manage-billing-btn');
-  const $cancelTrigger = document.getElementById('cancel-subscription-trigger');
-
-  if (status === 'cancelled') {
-    // Cancelled: show upgrade, hide change/manage/cancel
-    if ($upgradeBtn) $upgradeBtn.removeAttribute('hidden');
-    if ($changeBtn) $changeBtn.setAttribute('hidden', '');
-    if ($manageBtn) $manageBtn.setAttribute('hidden', '');
-    if ($cancelTrigger) $cancelTrigger.setAttribute('hidden', '');
-  } else if (status === 'suspended') {
-    // Suspended: hide change, keep manage + cancel visible (bindings handle)
-    if ($changeBtn) $changeBtn.setAttribute('hidden', '');
-  }
-}
-
 function setupActionButtons() {
   const $upgradeBtn = document.getElementById('upgrade-plan-btn');
   const $changeBtn = document.getElementById('change-plan-btn');
@@ -327,6 +226,16 @@ function setupCancellationForm() {
     const $selectedReason = document.querySelector('input[name="cancel_reason"]:checked');
     const reason = $selectedReason?.value || '';
 
+    // Capture status BEFORE the API call — the auth listener may update currentAccount
+    // with Firestore data (cancellation.pending=true) before we reach the post-cancel code
+    const sub = currentAccount?.subscription;
+    const productId = getProductId(sub || {});
+    const isPaid = productId !== 'basic';
+    const statusBeforeCancel = getEffectiveStatus(sub || {}, isPaid);
+    const isTrialCancel = statusBeforeCancel === 'trialing';
+
+    console.log('[Billing] Cancelling:', { statusBeforeCancel, isTrialCancel, productId });
+
     trackBilling('cancel_submit');
 
     const response = await authorizedFetch(`${webManager.getApiUrl()}/backend-manager/payments/cancel`, {
@@ -344,7 +253,13 @@ function setupCancellationForm() {
       throw new Error(response.message || 'Failed to cancel subscription. Please try again.');
     }
 
-    cancelFormManager.showSuccess('Your subscription has been cancelled. You\'ll continue to have access until the end of your current billing period.');
+    console.log('[Billing] Cancel complete:', { isTrialCancel, productId });
+
+    if (isTrialCancel) {
+      cancelFormManager.showSuccess('Your trial has been cancelled. You\'ve been moved to the free plan. You can subscribe again anytime.');
+    } else {
+      cancelFormManager.showSuccess('Your subscription has been cancelled. You\'ll continue to have access until the end of your current billing period.');
+    }
 
     // Collapse the cancel form after a short delay
     setTimeout(() => {
@@ -353,22 +268,38 @@ function setupCancellationForm() {
         const bsCollapse = bootstrap.Collapse.getInstance($accordion);
         if (bsCollapse) bsCollapse.hide();
       }
-    }, 3000);
-
-    // Update the UI to reflect cancellation (using backend structure)
-    if (currentAccount?.subscription) {
-      const expiresUnix = currentAccount.subscription.expires?.timestampUNIX || 0;
-      currentAccount.subscription.cancellation = {
-        pending: true,
-        date: {
-          timestamp: new Date(expiresUnix * 1000).toISOString(),
-          timestampUNIX: expiresUnix,
-        },
-      };
-      updatePlanCard(currentAccount);
-      updateAlerts(currentAccount);
-      updateBillingDetails(currentAccount);
-      updateActionButtons(currentAccount);
+    }, 1000);
+
+    // Update the UI to reflect cancellation
+    // Re-read currentAccount.subscription since the auth listener may have replaced it
+    const currentSub = currentAccount?.subscription;
+    if (currentSub) {
+      if (isTrialCancel) {
+        // Trial cancellations are immediate — downgrade to basic
+        currentSub.status = 'cancelled';
+        currentSub.product = { id: 'basic', name: 'Basic' };
+        currentSub.cancellation = {
+          pending: false,
+          date: {
+            timestamp: new Date().toISOString(),
+            timestampUNIX: Math.floor(Date.now() / 1000),
+          },
+        };
+      } else {
+        // Non-trial cancellations are pending until end of billing period
+        const expiresUnix = currentSub.expires?.timestampUNIX || 0;
+        currentSub.cancellation = {
+          pending: true,
+          date: {
+            timestamp: new Date(expiresUnix * 1000).toISOString(),
+            timestampUNIX: expiresUnix,
+          },
+        };
+      }
+
+      console.log('[Billing] UI update after cancel:', { status: currentSub.status, productId: currentSub.product?.id, cancellationPending: currentSub.cancellation?.pending });
+
+      updateUI(currentAccount);
     }
   });
 }
@@ -483,6 +414,9 @@ function getDisplayName(subscription) {
   return product?.name || 'Free';
 }
 
+// Derives a UI-friendly status from the backend subscription object
+// Backend only has 3 statuses: 'active', 'suspended', 'cancelled'
+// This function adds 'free', 'trialing', and 'cancelling' for UI purposes
 function getEffectiveStatus(subscription, isPaid) {
   if (!isPaid) {
     return 'free';
@@ -492,21 +426,24 @@ function getEffectiveStatus(subscription, isPaid) {
     return 'suspended';
   }
 
-  if (subscription.cancellation?.pending && subscription.status === 'active') {
-    return 'cancelling';
-  }
-
-  if (subscription.status === 'active' && subscription.trial?.claimed
-    && subscription.trial?.expires?.timestampUNIX > Math.floor(Date.now() / 1000)) {
-    return 'trialing';
+  if (subscription.status === 'cancelled') {
+    return 'cancelled';
   }
 
+  // For active subscriptions, check trial and cancellation state
   if (subscription.status === 'active') {
-    return 'active';
-  }
+    // Trial check: claimed and not yet expired
+    if (subscription.trial?.claimed
+      && subscription.trial?.expires?.timestampUNIX > Math.floor(Date.now() / 1000)) {
+      return 'trialing';
+    }
 
-  if (subscription.status === 'cancelled') {
-    return 'cancelled';
+    // Pending cancellation check
+    if (subscription.cancellation?.pending) {
+      return 'cancelling';
+    }
+
+    return 'active';
   }
 
   return 'free';

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/account/index.html

@@ -970,30 +970,78 @@ badges:
             <div class="d-flex justify-content-between align-items-start mb-2">
               <div>
                 <h5 class="card-title mb-1 d-flex align-items-center flex-wrap gap-2">
-                  <span><span data-wm-bind="@text auth.account.subscription.product.name">Current</span> plan</span>
-                  <span id="plan-status" class="badge bg-secondary">Loading...</span>
+                  <span><span data-wm-bind="@text billing.plan.name" class="wm-binding-skeleton">Current</span> plan</span>
+                  <span data-wm-bind="@attr class billing.status.badgeClass, @text billing.status.label" class="badge bg-secondary wm-binding-skeleton">&nbsp;</span>
                 </h5>
-                <p class="card-text mb-0" id="plan-description">Loading plan details...</p>
+                <p class="card-text mb-0" data-wm-bind="@show billing.description.free" hidden>
+                  You are currently on the <strong data-wm-bind="@text billing.plan.name">Free</strong> plan. Upgrade to unlock premium features.
+                </p>
+                <p class="card-text mb-0" data-wm-bind="@show billing.description.active" hidden>
+                  You are currently on the <strong data-wm-bind="@text billing.plan.name">Current</strong> plan.
+                </p>
+                <p class="card-text mb-0" data-wm-bind="@show billing.description.suspended" hidden>
+                  Your <strong data-wm-bind="@text billing.plan.name">Current</strong> subscription has been suspended and access has been revoked due to a payment issue. Please update your payment method to restore access.
+                </p>
+                <p class="card-text mb-0" data-wm-bind="@show billing.description.cancelled" hidden>
+                  Your <strong data-wm-bind="@text billing.plan.name">Current</strong> subscription has ended. Resubscribe to regain access to premium features.
+                </p>
               </div>
             </div>
 
             <!-- Billing details (next billing, amount) -->
-            <div id="billing-details" class="mb-3 d-none"></div>
+            <div id="billing-details" class="mb-3" data-wm-bind="@show billing.details.visible" hidden>
+              <div class="row small text-muted">
+                <div class="col-sm-6 mb-1">
+                  <strong>Next billing:</strong> <span data-wm-bind="@text billing.details.nextDate"></span>
+                </div>
+                <div class="col-sm-6 mb-1">
+                  <strong>Amount:</strong> <span data-wm-bind="@text billing.details.amount"></span>
+                </div>
+              </div>
+            </div>
 
             <!-- State-specific alerts -->
-            <div id="billing-alerts" class="mb-3"></div>
+            <div class="mb-3">
+              <!-- Suspended (payment issue) alert -->
+              <div class="alert alert-danger d-flex align-items-start" data-wm-bind="@show billing.alerts.suspended" hidden>
+                <span class="me-2 flex-shrink-0">{% uj_icon "triangle-exclamation", "fa-md" %}</span>
+                <div>
+                  <strong>Payment failed</strong>
+                  <p class="mb-0 small">Your payment method was declined. Please update your payment method to keep your subscription active.</p>
+                </div>
+              </div>
+
+              <!-- Cancellation pending alert -->
+              <div class="alert alert-warning d-flex align-items-start" data-wm-bind="@show billing.alerts.cancelling" hidden>
+                <span class="me-2 flex-shrink-0">{% uj_icon "clock", "fa-md" %}</span>
+                <div>
+                  <strong>Cancellation scheduled</strong>
+                  <p class="mb-0 small">Your subscription will end on <strong data-wm-bind="@text billing.alerts.cancelDate"></strong>. You'll continue to have full access until then. If you change your mind, you can reactivate through billing management.</p>
+                </div>
+              </div>
+
+              <!-- Free trial alert -->
+              <div class="alert alert-success d-flex align-items-start" data-wm-bind="@show billing.alerts.trialing" hidden>
+                <span class="me-2 flex-shrink-0">{% uj_icon "circle-check", "fa-md" %}</span>
+                <div>
+                  <strong>Free trial</strong>
+                  <p class="mb-0 small" data-wm-bind="@show billing.alerts.trialHasEndDate" hidden>You're on a free trial that ends on <strong data-wm-bind="@text billing.alerts.trialEndDate"></strong>. You won't be charged until your trial ends.</p>
+                  <p class="mb-0 small" data-wm-bind="@hide billing.alerts.trialHasEndDate">You're on a free trial. You won't be charged until your trial ends.</p>
+                </div>
+              </div>
+            </div>
 
             <!-- Action Buttons -->
             <div class="d-grid d-sm-flex gap-2">
-              <button id="upgrade-plan-btn" class="btn btn-success plan-action-btn" data-wm-bind="@show auth.account.subscription.product.id === basic" hidden>
+              <button id="upgrade-plan-btn" class="btn btn-success plan-action-btn" data-wm-bind="@show billing.buttons.upgrade" hidden>
                 {% uj_icon "crown", "me-2" %}
                 <span class="button-text">Upgrade Plan</span>
               </button>
-              <button id="change-plan-btn" class="btn btn-outline-adaptive plan-action-btn" data-wm-bind="@show auth.account.subscription.product.id !== basic" hidden>
+              <button id="change-plan-btn" class="btn btn-outline-adaptive plan-action-btn" data-wm-bind="@show billing.buttons.change" hidden>
                 {% uj_icon "arrow-right-arrow-left", "me-2" %}
                 <span class="button-text">Change Plan</span>
               </button>
-              <button id="manage-billing-btn" class="btn btn-primary plan-action-btn" data-wm-bind="@show auth.account.subscription.product.id !== basic" hidden>
+              <button id="manage-billing-btn" class="btn btn-primary plan-action-btn" data-wm-bind="@show billing.buttons.manage" hidden>
                 {% uj_icon "credit-card", "me-2" %}
                 <span class="button-text">Manage Billing</span>
               </button>
@@ -1012,7 +1060,7 @@ badges:
         </div>
 
         <!-- Cancel Subscription (only visible for paid users) -->
-        <div id="cancel-subscription-trigger" class="text-center" data-wm-bind="@show auth.account.subscription.product.id !== basic" hidden>
+        <div id="cancel-subscription-trigger" class="text-center" data-wm-bind="@show billing.buttons.cancel" hidden>
           <button type="button" class="btn btn-link btn-sm text-muted text-decoration-underline cancel-trigger-link" data-bs-toggle="collapse" data-bs-target="#cancel-subscription-accordion" aria-expanded="false" aria-controls="cancel-subscription-accordion">
             Cancel subscription
           </button>

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/status.html

@@ -307,7 +307,7 @@ build_info:
                     </div>
                     <div>
                       <div class="text-muted small mb-1">Last Build</div>
-                      <div class="fw-semibold"><span id="build-time">—</span> <span id="build-time-ago" class="text-muted small"></span></div>
+                      <div class="fw-semibold"><span id="build-time">—</span> <span id="build-time-ago" class="text-muted small ms-1"></span></div>
                     </div>
                   </div>
                 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultimate-jekyll-manager",
-  "version": "0.0.278",
+  "version": "0.0.280",
   "description": "Ultimate Jekyll dependency manager",
   "main": "dist/index.js",
   "exports": {