ultimate-jekyll-manager 0.0.277 → 0.0.279

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,196 +58,89 @@ export function onShow() {
   // Nothing needed
 }
 
-// ─── Plan Card ───────────────────────────────────────────────
+// ─── UI Update ──────────────────────────────────────────────
 
-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);
-
-  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 frequencyLabel = frequency === 'annually' || frequency === 'yearly' ? 'year' : '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');
@@ -343,7 +243,16 @@ 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.');
+    // Detect trial cancellation: trial was active and trial period equals subscription period
+    const sub = currentAccount?.subscription;
+    const isTrialCancel = sub?.trial?.claimed === true
+      && sub?.trial?.expires?.timestampUNIX === sub?.expires?.timestampUNIX;
+
+    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(() => {
@@ -352,22 +261,32 @@ function setupCancellationForm() {
         const bsCollapse = bootstrap.Collapse.getInstance($accordion);
         if (bsCollapse) bsCollapse.hide();
       }
-    }, 3000);
+    }, 1000);
 
     // 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);
+    if (sub) {
+      if (isTrialCancel) {
+        // Trial cancellations are immediate — set status to cancelled
+        sub.status = 'cancelled';
+        sub.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 = sub.expires?.timestampUNIX || 0;
+        sub.cancellation = {
+          pending: true,
+          date: {
+            timestamp: new Date(expiresUnix * 1000).toISOString(),
+            timestampUNIX: expiresUnix,
+          },
+        };
+      }
+      updateUI(currentAccount);
     }
   });
 }

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

@@ -7,9 +7,8 @@ function getBasePrice(state) {
   if (!product) return 0;
 
   if (product.type === 'subscription') {
-    return state.frequency === 'monthly'
-      ? (product.prices?.monthly?.amount || 0)
-      : (product.prices?.annually?.amount || 0);
+    const entry = product.prices?.[state.frequency];
+    return (typeof entry === 'object' ? entry?.amount : entry) || 0;
   }
 
   return product.prices?.amount

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

@@ -21,16 +21,16 @@ export const 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'
-      : '';
+
+  const FREQUENCY_MAP = {
+    daily: { cycle: 'daily', period: 'day' },
+    weekly: { cycle: 'weekly', period: 'week' },
+    monthly: { cycle: 'monthly', period: 'month' },
+    annually: { cycle: 'annually', period: 'year' },
+  };
+  const freq = FREQUENCY_MAP[state.frequency] || { cycle: '', period: '' };
+  const billingCycleText = freq.cycle;
+  const billingPeriodText = freq.period;
 
   // Build subscription info text
   let subscriptionInfoText = '';

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

@@ -345,7 +345,7 @@ function updateTimeAgo($element, timestamp) {
   const totalSeconds = Math.floor(diffMs / 1000);
 
   if (totalSeconds <= 0) {
-    $element.textContent = 'Just now';
+    $element.textContent = '(Just now)';
     return;
   }
 
@@ -383,7 +383,7 @@ function updateTimeAgo($element, timestamp) {
   }
   parts.push(`${seconds}s`);
 
-  $element.textContent = parts.join(' ') + ' ago';
+  $element.textContent = '(' + parts.join(' ') + ' ago)';
 }
 
 // Fetch status data from API (if configured)

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,8 +307,7 @@ build_info:
                     </div>
                     <div>
                       <div class="text-muted small mb-1">Last Build</div>
-                      <div id="build-time" class="fw-semibold">—</div>
-                      <div id="build-time-ago" class="text-muted small">—</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.277",
+  "version": "0.0.279",
   "description": "Ultimate Jekyll dependency manager",
   "main": "dist/index.js",
   "exports": {