ultimate-jekyll-manager 1.0.22 → 1.1.0

package/CHANGELOG.md

@@ -15,6 +15,25 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - `Security` in case of vulnerabilities.
 
 ---
+## [1.1.0] - 2026-04-06
+### Added
+- `payment-config.js` shared library for reading payment data from build-time config
+- Pricing layout resolves prices and feature limits from `_config.yml` when not set in frontmatter
+- `oauth2` config injected into client-side Configuration object via `foot.html`
+- Pricing page shows "Switch to This Plan" on other paid plans when user has active subscription
+
+### Changed
+- Move `payment` under `web_manager` in default `_config.yml` so it serializes into client-side config
+- Checkout page uses `payment-config.js` instead of fetching `/backend-manager/brand`
+- Account billing section uses config for products/limits/currency instead of brand API
+- Account connections section reads `oauth2` from config instead of brand API
+- Admin dashboard uses config for product list in MRR calculations
+- Remove `/backend-manager/brand` fetch from account page entirely
+- "Everything in [plan]" now uses dynamic previous plan name instead of hardcoded index
+
+### Fixed
+- Liquid 4.x compatibility: use loop-based hash lookup instead of bracket notation for config limits
+
 ## [1.0.22] - 2026-04-05
 ### Changed
 - Bump web-manager from ^4.1.36 to ^4.1.37

package/CLAUDE.md

@@ -1136,6 +1136,108 @@ webManager.auth().listen({ once: true }, async () => {
 
 **Reference:** `src/assets/js/libs/authorized-fetch.js`
 
+#### Payment Config Library
+
+Reads payment configuration (products, processors, prices, limits) from `webManager.config.payment` — populated from `_config.yml` at build time. **Do NOT fetch `/backend-manager/brand` to get payment data.** It's already available instantly via this library.
+
+**Import:**
+```javascript
+import { getPaymentConfig, getProcessors, getProducts, getProductById, getProductLimits, getCurrency } from '__main_assets__/js/libs/payment-config.js';
+```
+
+**Usage:**
+```javascript
+// Get all products
+const products = getProducts();
+
+// Find a specific product
+const product = getProductById('plus');
+
+// Get product limits
+const limits = getProductLimits('plus'); // { credits: 500, agents: 3, ... }
+
+// Get processors (stripe, paypal, etc.)
+const processors = getProcessors();
+```
+
+**Config location in `_config.yml`:**
+```yaml
+web_manager:
+  payment:
+    processors:
+      stripe:
+        publishableKey: pk_live_...
+      paypal:
+        clientId: ...
+    products:
+      - id: basic
+        name: Basic
+        limits:
+          credits: 100
+      - id: plus
+        name: Plus
+        limits:
+          credits: 500
+        prices:
+          monthly: 19
+          annually: 190
+```
+
+**How it works:** The `foot.html` Configuration injection serializes all `web_manager` properties into `window.Configuration`, which `webManager.initialize()` stores in `webManager.config`. The payment config is available immediately — no API call needed.
+
+**When to still use the brand API:**
+- `oauth2` provider configuration (used by the connections section on the account page)
+- Any data that is NOT in `_config.yml` and only exists server-side
+
+**Reference:** `src/assets/js/libs/payment-config.js`
+
+#### Pricing Page: Config-Resolved Values
+
+The pricing layout automatically resolves prices and feature limits from `_config.yml` when not explicitly set in frontmatter. This means consuming projects can define ONLY display metadata (name, tagline, icon, features list) and let prices/limits come from the single source of truth.
+
+**Resolution order (frontmatter wins):**
+1. `plan.pricing.monthly` / `plan.pricing.annually` from page frontmatter
+2. `site.web_manager.payment.products[matching_id].prices.monthly` / `.annually` from config
+3. `0` (default)
+
+**Feature value resolution:**
+1. `feature.value` from page frontmatter
+2. `site.web_manager.payment.products[matching_id].limits[feature.id]` from config (with `-1` → `"Unlimited"`)
+
+**Example: Minimal pricing.md (prices/limits come from config):**
+```yaml
+---
+layout: blueprint/pricing
+permalink: /pricing
+
+pricing:
+  plans:
+    - id: "basic"
+      name: "Basic"
+      tagline: "best for getting started"
+      url: "/dashboard"
+      features:
+        - id: "credits"
+          name: "Credits"
+          icon: "sparkles"
+        - id: "agents"
+          name: "Agents"
+          icon: "robot"
+    - id: "plus"
+      name: "Plus"
+      tagline: "best for small websites"
+      features:
+        - id: "credits"
+          name: "Credits"
+          icon: "sparkles"
+        - id: "agents"
+          name: "Agents"
+          icon: "robot"
+---
+```
+
+In this example, `credits` value of 100 and price of $19/mo come from `_config.yml`'s `web_manager.payment.products` — no hardcoding needed.
+
 #### FormManager Library
 
 Lightweight form state management library with built-in validation, state machine, and event system.

package/dist/assets/js/libs/payment-config.js

@@ -0,0 +1,44 @@
+/**
+ * Payment Config Library
+ *
+ * Reads payment configuration (products, processors, prices, limits) from
+ * webManager.config.payment — which is populated from _config.yml at build time.
+ * This eliminates the need to fetch /backend-manager/brand at runtime.
+ */
+
+import webManager from 'web-manager';
+
+// Get the full payment config object
+export function getPaymentConfig() {
+  return webManager.config?.payment || {};
+}
+
+// Get payment processors
+export function getProcessors() {
+  return getPaymentConfig().processors || {};
+}
+
+// Get all products
+export function getProducts() {
+  return getPaymentConfig().products || [];
+}
+
+// Find a product by ID
+export function getProductById(productId) {
+  return getProducts().find(p => p.id === productId) || null;
+}
+
+// Get a product's limits
+export function getProductLimits(productId) {
+  return getProductById(productId)?.limits || {};
+}
+
+// Get a product's prices
+export function getProductPrices(productId) {
+  return getProductById(productId)?.prices || {};
+}
+
+// Get payment currency
+export function getCurrency() {
+  return getPaymentConfig().currency || 'USD';
+}

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

@@ -1,5 +1,4 @@
 // Libraries
-import fetch from 'wonderful-fetch';
 import * as profileSection from './sections/profile.js';
 import * as notificationsSection from './sections/notifications.js';
 import * as securitySection from './sections/security.js';
@@ -12,6 +11,7 @@ import * as dataRequestSection from './sections/data-request.js';
 import * as connectionsSection from './sections/connections.js';
 import * as refundSection from './sections/refund.js';
 import webManager from 'web-manager';
+import { getPaymentConfig } from '__main_assets__/js/libs/payment-config.js';
 
 // Module
 export default () => {
@@ -33,8 +33,9 @@ export default () => {
 // Global state
 let $navLinks = null;
 let $sections = null;
-let brandData = null;
-let fetchBrandDataPromise = null;
+
+// Config from _config.yml (available instantly, no fetch needed)
+const paymentConfig = getPaymentConfig();
 
 // Section modules map
 const sectionModules = {
@@ -85,10 +86,6 @@ async function initializeAccount() {
   webManager.auth().listen({}, async (state) => {
     console.log('Auth state with account data:', state);
 
-    // Load user data with the account information
-    // Wait for brand data to be fetched before loading section data
-    await fetchBrandData();
-
     /* @dev-only:start */
     {
       // Check for test subscription parameter
@@ -128,32 +125,6 @@ async function initializeAccount() {
   });
 }
 
-// Fetch brand data to get configuration and OAuth settings
-async function fetchBrandData() {
-  if (fetchBrandDataPromise) return fetchBrandDataPromise;
-
-  fetchBrandDataPromise = (async () => {
-    try {
-      const serverApiURL = `${webManager.getApiUrl()}/backend-manager/brand`;
-
-      // Fetch brand data
-      const response = await fetch(serverApiURL, {
-        response: 'json',
-      });
-
-      console.log('Fetched brand data:', response);
-      brandData = response;
-
-      return response;
-    } catch (error) {
-      webManager.sentry().captureException(new Error('Failed to fetch brand data', { cause: error }));
-      return null;
-    }
-  })();
-
-  return fetchBrandDataPromise;
-}
-
 // Load data for all sections
 function loadAllSectionData(authState) {
   const { user, account } = authState;
@@ -172,7 +143,7 @@ function loadAllSectionData(authState) {
   }
 
   if (sectionModules.billing.loadData) {
-    sectionModules.billing.loadData(account, brandData);
+    sectionModules.billing.loadData(account, paymentConfig);
   }
 
   if (sectionModules.team && sectionModules.team.loadData) {
@@ -196,7 +167,7 @@ function loadAllSectionData(authState) {
   }
 
   if (sectionModules.connections.loadData) {
-    sectionModules.connections.loadData(account, brandData);
+    sectionModules.connections.loadData(account, webManager.config?.oauth2 || {});
   }
 
   if (sectionModules.refund.loadData) {

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

@@ -7,7 +7,7 @@ import { FormManager } from '__main_assets__/js/libs/form-manager.js';
 import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
 import webManager from 'web-manager';
 
-let brandData = null;
+let paymentConfig = null;
 let cancelFormManager = null;
 let currentAccount = null;
 
@@ -41,12 +41,12 @@ export async function init() {
 }
 
 // Load billing data
-export async function loadData(account, sharedBrandData) {
+export async function loadData(account, sharedPaymentConfig) {
   if (!account) {
     return;
   }
 
-  brandData = sharedBrandData;
+  paymentConfig = sharedPaymentConfig;
   currentAccount = account;
 
   updateUI(account);
@@ -104,7 +104,7 @@ function buildBillingState(account) {
   // Pre-format billing details
   const nextBillingUnix = subscription.expires?.timestampUNIX;
   const amount = subscription.payment?.price;
-  const currency = brandData?.payment?.currency || 'USD';
+  const currency = paymentConfig?.currency || 'USD';
   const frequency = subscription.payment?.frequency;
   const hasValidBilling = nextBillingUnix && nextBillingUnix > 0 && amount;
 
@@ -338,7 +338,7 @@ function updateUsageInfo(account) {
 
   // Use the effective plan for usage limits (basic if cancelled/suspended)
   const resolved = webManager.auth().resolveSubscription(account);
-  const product = brandData?.payment?.products?.find(p => p.id === resolved.plan);
+  const product = paymentConfig?.products?.find(p => p.id === resolved.plan);
   const limits = product?.limits || {};
 
   // Clear container
@@ -404,9 +404,9 @@ function getDisplayName(subscription) {
     return subscription.product.name;
   }
 
-  // Fall back to brandData product name
+  // Fall back to config product name
   const productId = subscription.product?.id || 'basic';
-  const product = brandData?.payment?.products?.find(p => p.id === productId);
+  const product = paymentConfig?.products?.find(p => p.id === productId);
   return product?.name || 'Free';
 }
 

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

@@ -7,7 +7,7 @@ import { FormManager } from '__main_assets__/js/libs/form-manager.js';
 import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
 import webManager from 'web-manager';
 
-let brandData = null;
+let oauth2Config = null;
 let accountData = null;
 let connectionForms = new Map();
 
@@ -24,13 +24,13 @@ export async function init() {
 }
 
 // Load connections data
-export async function loadData(account, sharedBrandData) {
+export async function loadData(account, sharedOAuth2Config) {
   if (!account) {
     return;
   }
 
   accountData = account;
-  brandData = sharedBrandData;
+  oauth2Config = sharedOAuth2Config;
 
   displayConnections();
 }
@@ -43,14 +43,14 @@ function displayConnections() {
     $loading.classList.add('d-none');
   }
 
-  if (!brandData) {
+  if (!oauth2Config) {
     if ($loading) {
       $loading.classList.remove('d-none');
     }
     return;
   }
 
-  const availableProviders = brandData?.oauth2 || {};
+  const availableProviders = oauth2Config;
   const userConnections = accountData?.oauth2 || {};
 
   let hasEnabledProviders = false;
@@ -237,7 +237,7 @@ function initializeProviderForm(providerId) {
   formManager.on('statechange', ({ state }) => {
     if (state === 'ready') {
       const userConnection = accountData?.oauth2?.[providerId];
-      const providerSettings = brandData?.oauth2?.[providerId];
+      const providerSettings = oauth2Config?.[providerId];
       updateProviderStatus(providerId, userConnection, providerSettings);
     }
   });
@@ -252,7 +252,7 @@ function initializeProviderForm(providerId) {
       const success = await handleDisconnect(provider);
 
       if (success) {
-        const providerSettings = brandData?.oauth2?.[provider];
+        const providerSettings = oauth2Config?.[provider];
         updateProviderStatus(provider, null, providerSettings);
       }
     }
@@ -261,7 +261,7 @@ function initializeProviderForm(providerId) {
 
 // Handle connect action
 async function handleConnect(providerId) {
-  const provider = brandData?.oauth2?.[providerId];
+  const provider = oauth2Config?.[providerId];
 
   if (!provider || provider.enabled === false) {
     throw new Error('This connection service is not available.');
@@ -322,7 +322,7 @@ async function handleDisconnect(providerId) {
 
 // Called when section is shown
 export function onShow() {
-  if (accountData && brandData) {
+  if (accountData && oauth2Config) {
     displayConnections();
   }
 }

package/dist/assets/js/pages/admin/dashboard/index.js

@@ -4,8 +4,8 @@
 
 // Libraries
 import { getPrerenderedIcon } from '__main_assets__/js/libs/prerendered-icons.js';
-import fetch from 'wonderful-fetch';
 import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
+import { getProducts } from '__main_assets__/js/libs/payment-config.js';
 import { formatTimeAgo, capitalize, setStatValue, setStatSubValue } from '__main_assets__/js/libs/admin-helpers.js';
 import { Chart, DoughnutController, BarController, ArcElement, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
 import webManager from 'web-manager';
@@ -80,13 +80,8 @@ async function loadSubscriberData() {
   const { collection, query, where, getCountFromServer } = await import('firebase/firestore');
   const db = webManager.firebaseFirestore;
 
-  // Fetch brand config to get product list and available frequencies
-  const brandConfig = await fetch(`${webManager.getApiUrl()}/backend-manager/brand`, {
-    response: 'json',
-    tries: 2,
-  });
-
-  const products = (brandConfig?.payment?.products || []).filter((p) => p.id !== 'basic');
+  // Get product list from _config.yml (available instantly via webManager.config)
+  const products = getProducts().filter((p) => p.id !== 'basic');
   const frequencyIds = [...new Set(products.flatMap((p) => Object.keys(p.prices || {})))];
 
   // Run count queries for each product × frequency in parallel

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

@@ -1,6 +1,7 @@
 // Payment Checkout Page
 import { FormManager } from '__main_assets__/js/libs/form-manager.js';
-import { fetchBrandConfig, fetchTrialEligibility, warmupServer, createPaymentIntent } from './modules/api.js';
+import { getPaymentConfig, getProcessors, getProductById } from '__main_assets__/js/libs/payment-config.js';
+import { fetchTrialEligibility, warmupServer, createPaymentIntent } from './modules/api.js';
 import { state, buildBindingsState, resolveProcessor, FREQUENCIES, getAvailableFrequencies } from './modules/state.js';
 import { applyDiscountCode } from './modules/discount.js';
 import { initializeRecaptcha } from './modules/recaptcha.js';
@@ -71,15 +72,24 @@ async function initializeCheckout() {
       throw new Error('Product ID is missing from URL.');
     }
 
+    // Read payment config from _config.yml (available instantly via webManager.config)
+    state.processors = getProcessors();
+
+    // Find product
+    const product = getProductById(productId);
+    if (!product) {
+      throw new Error(`Product "${productId}" not found.`);
+    }
+    state.product = product;
+
     // Wait for auth state to settle before any authorized calls
     await new Promise((resolve) => webManager.auth().listen({ once: true }, resolve));
 
     // Fire-and-forget server warmup
     warmupServer();
 
-    // Parallel fetch: brand config + trial eligibility + reCAPTCHA
-    const [brandConfigResult, trialResult, recaptchaResult] = await Promise.allSettled([
-      fetchBrandConfig(),
+    // Parallel fetch: trial eligibility + reCAPTCHA
+    const [trialResult, recaptchaResult] = await Promise.allSettled([
       fetchTrialEligibility(),
       initializeRecaptcha(webManager.config?.recaptcha?.['site-key']),
     ]);
@@ -96,23 +106,6 @@ async function initializeCheckout() {
     }
     /* @dev-only:end */
 
-    // Brand config is required
-    if (brandConfigResult.status === 'rejected') {
-      const reason = brandConfigResult.reason?.message || brandConfigResult.reason || 'Unknown error';
-      throw new Error(`Failed to load checkout brand config: ${reason}`);
-    }
-
-    const brandConfig = brandConfigResult.value;
-    state.brandConfig = brandConfig;
-    state.processors = brandConfig.payment?.processors || {};
-
-    // Find product
-    const product = brandConfig.payment?.products?.find(p => p.id === productId);
-    if (!product) {
-      throw new Error(`Product "${productId}" not found.`);
-    }
-    state.product = product;
-
     // Resolve frequency: URL param if valid, otherwise longest available term
     const available = getAvailableFrequencies(product);
     if (frequencyParam && FREQUENCIES.includes(frequencyParam) && available.includes(frequencyParam)) {
@@ -286,7 +279,7 @@ function initDevPanel() {
   // Show the panel
   $panel.hidden = false;
 
-  const products = state.brandConfig?.payment?.products || [];
+  const products = getPaymentConfig().products || [];
   const params = new URLSearchParams(window.location.search);
 
   // Populate product dropdown

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

@@ -4,17 +4,6 @@ import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
 import { getRecaptchaToken } from './recaptcha.js';
 import webManager from 'web-manager';
 
-// Fetch brand config (products + processors)
-export async function fetchBrandConfig() {
-  const response = await fetch(`${webManager.getApiUrl()}/backend-manager/brand`, {
-    response: 'json',
-    tries: 2,
-  });
-
-  console.log('Fetched brand config:', response);
-  return response;
-}
-
 // Check trial eligibility via backend endpoint
 export async function fetchTrialEligibility() {
   try {

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

@@ -9,8 +9,7 @@ export const FREQUENCIES = ['daily', 'weekly', 'monthly', 'annually'];
 
 // Minimal mutable state
 export const state = {
-  // From API (stored once, never transformed)
-  brandConfig: null,
+  // From config (stored once, never transformed)
   product: null,
   processors: null,
 

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

@@ -319,7 +319,7 @@ function setupPromoCountdown() {
   adjustNavbarOffset();
 }
 
-// Disable button for the user's current active plan
+// Update buttons based on the user's current active plan
 function setupCurrentPlanIndicator() {
   webManager.auth().listen({ once: true }, (state) => {
     const resolved = webManager.auth().resolveSubscription(state.account);
@@ -328,16 +328,22 @@ function setupCurrentPlanIndicator() {
       return;
     }
 
-    const $button = document.querySelector(`button[data-plan-id="${resolved.plan}"]`);
-
-    if (!$button) {
-      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-gradient-rainbow', 'gradient-animated');
+      $currentButton.classList.add('btn-adaptive');
     }
 
-    $button.disabled = true;
-    $button.textContent = 'Current Plan';
-    $button.classList.remove('btn-primary', 'btn-gradient-rainbow', 'gradient-animated');
-    $button.classList.add('btn-adaptive');
+    // Update other paid plan buttons to "Switch to this plan"
+    document.querySelectorAll('button[data-plan-id]').forEach(($button) => {
+      if ($button.dataset.planId === resolved.plan || $button.dataset.planId === 'basic' || $button.dataset.planId === 'enterprise') {
+        return;
+      }
+      $button.textContent = 'Switch to This Plan';
+    });
   });
 }
 

package/dist/defaults/dist/_includes/core/foot.html

@@ -102,6 +102,7 @@
     {% endfor %}
     env: {{ page.resolved.web_manager.env | jsonify }},
     recaptcha: {{ page.resolved.recaptcha | jsonify }},
+    oauth2: {{ page.resolved.oauth2 | jsonify }},
   };
 </script>
 

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

@@ -328,6 +328,32 @@ faqs:
 
         <div class="row g-4 mb-5 justify-content-center">
           {% for plan in page.resolved.pricing.plans %}
+            {% comment %} Look up matching product in _config.yml payment products {% endcomment %}
+            {% assign _config_product = nil %}
+            {% for p in site.web_manager.payment.products %}
+              {% if p.id == plan.id %}
+                {% assign _config_product = p %}
+                {% break %}
+              {% endif %}
+            {% endfor %}
+
+            {% comment %} Resolve prices: frontmatter pricing takes precedence, then config prices {% endcomment %}
+            {% if plan.pricing.monthly or plan.pricing.monthly == 0 %}
+              {% assign _plan_monthly = plan.pricing.monthly %}
+            {% elsif _config_product.prices.monthly or _config_product.prices.monthly == 0 %}
+              {% assign _plan_monthly = _config_product.prices.monthly %}
+            {% else %}
+              {% assign _plan_monthly = 0 %}
+            {% endif %}
+
+            {% if plan.pricing.annually or plan.pricing.annually == 0 %}
+              {% assign _plan_annually = plan.pricing.annually %}
+            {% elsif _config_product.prices.annually or _config_product.prices.annually == 0 %}
+              {% assign _plan_annually = _config_product.prices.annually %}
+            {% else %}
+              {% assign _plan_annually = 0 %}
+            {% endif %}
+
             {% if plan.popular %}
               {% assign border_classes = "border-gradient-rainbow border-3" %}
             {% else %}
@@ -349,12 +375,12 @@ faqs:
                     <p class="text-muted small mb-3">{{ plan.tagline }}</p>
 
                     <!-- Price -->
-                    {% if plan.pricing.monthly == 0 %}
+                    {% if _plan_monthly == 0 %}
                       <p class="display-6 fw-bold mb-0">Free</p>
                     {% else %}
                       <p class="mb-0">
                         <span class="display-6 fw-bold">
-                          <span class="fs-3">$</span><span class="amount" data-monthly="{{ plan.pricing.monthly }}" data-annually="{{ plan.pricing.annually | divided_by: 12 | round }}">{{ plan.pricing.annually | divided_by: 12 | round }}</span>
+                          <span class="fs-3">$</span><span class="amount" data-monthly="{{ _plan_monthly }}" data-annually="{{ _plan_annually | divided_by: 12 | round }}">{{ _plan_annually | divided_by: 12 | round }}</span>
                         </span>
                         <small class="text-muted">/month</small>
                       </p>
@@ -363,12 +389,17 @@ faqs:
                     <!-- Price per unit (only shown when enabled) -->
                     {% if page.resolved.pricing.price_per_unit.enabled %}
                       <p class="text-muted small mb-4">
-                        {% if plan.pricing.monthly > 0 %}
+                        {% if _plan_monthly > 0 %}
                           {% for feature in plan.features %}
                             {% if feature.id == page.resolved.pricing.price_per_unit.feature_id %}
-                              {% assign monthly_price_per_unit = plan.pricing.monthly | times: 1.0 | divided_by: feature.value | round: 2 %}
-                              {% assign annual_monthly_price = plan.pricing.annually | divided_by: 12.0 %}
-                              {% assign annual_price_per_unit = annual_monthly_price | divided_by: feature.value | round: 2 %}
+                              {% comment %} Resolve feature value from config limits if not set in frontmatter {% endcomment %}
+                              {% assign _ppu_value = feature.value %}
+                              {% if _config_product and _ppu_value == nil %}
+                                {% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _ppu_value = _lim[1] %}{% break %}{% endif %}{% endfor %}
+                              {% endif %}
+                              {% assign monthly_price_per_unit = _plan_monthly | times: 1.0 | divided_by: _ppu_value | round: 2 %}
+                              {% assign annual_monthly_price = _plan_annually | divided_by: 12.0 %}
+                              {% assign annual_price_per_unit = annual_monthly_price | divided_by: _ppu_value | round: 2 %}
                               <span class="price-per-unit" data-monthly="${{ monthly_price_per_unit }}" data-annually="${{ annual_price_per_unit }}">${{ annual_price_per_unit }}</span> per {{ page.resolved.pricing.price_per_unit.label }}
                             {% endif %}
                           {% endfor %}
@@ -389,8 +420,8 @@ faqs:
                       {% assign btn_style = "btn-primary" %}
 
                       {% iftruthy plan.url %}
-                        <a href="{{ plan.url }}" class="btn {% if plan.pricing.monthly == 0 %}btn-adaptive{% else %}{{ btn_style }}{% endif %} btn-md fw-semibold px-2 fs-5">
-                          {% if plan.pricing.monthly == 0 %}
+                        <a href="{{ plan.url }}" class="btn {% if _plan_monthly == 0 %}btn-adaptive{% else %}{{ btn_style }}{% endif %} btn-md fw-semibold px-2 fs-5">
+                          {% if _plan_monthly == 0 %}
                             Get Started
                           {% else %}
                             Get Free Trial
@@ -406,11 +437,11 @@ faqs:
 
                     <!-- Billing info -->
                     <p class="text-center text-muted small mb-3">
-                      {% if plan.pricing.monthly == 0 %}
+                      {% if _plan_monthly == 0 %}
                         <span>No credit card required</span>
                       {% else %}
-                        <span class="billing-info" data-monthly="Billed ${{ plan.pricing.monthly | uj_commaify }} monthly" data-annually="Billed ${{ plan.pricing.annually | uj_commaify }} annually">
-                          Billed ${{ plan.pricing.annually | uj_commaify }} annually
+                        <span class="billing-info" data-monthly="Billed ${{ _plan_monthly | uj_commaify }} monthly" data-annually="Billed ${{ _plan_annually | uj_commaify }} annually">
+                          Billed ${{ _plan_annually | uj_commaify }} annually
                         </span>
                       {% endif %}
                     </p>
@@ -423,6 +454,16 @@ faqs:
                       <ul class="list-unstyled mb-3">
                         {% for feature in plan.features %}
                           {% if common_feature_ids contains feature.id %}
+                            {% comment %} Resolve feature value: frontmatter > config limits {% endcomment %}
+                            {% assign _feature_value = feature.value %}
+                            {% if _config_product and _feature_value == nil %}
+                              {% assign _config_limit = nil %}{% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _config_limit = _lim[1] %}{% break %}{% endif %}{% endfor %}
+                              {% if _config_limit == -1 %}
+                                {% assign _feature_value = "Unlimited" %}
+                              {% elsif _config_limit %}
+                                {% assign _feature_value = _config_limit %}
+                              {% endif %}
+                            {% endif %}
                             {% assign feature_definition = nil %}
                             {% for def in page.resolved.pricing.definitions %}
                               {% if def.id == feature.id %}
@@ -433,10 +474,10 @@ faqs:
                             <li class="d-flex align-items-start mb-2">
                               <span class="me-3">{% uj_icon feature.icon, "fa-md" %}</span>
                               <span>
-                                {% if feature.value == "Unlimited" %}
+                                {% if _feature_value == "Unlimited" %}
                                   Unlimited
                                 {% else %}
-                                  {{ feature.value | uj_commaify }}
+                                  {{ _feature_value | uj_commaify }}
                                 {% endif %}
                                 {% iftruthy feature_definition %}
                                   <span class="text-decoration-underline text-decoration-dotted cursor-help" data-bs-toggle="tooltip" data-bs-title="{{ feature_definition }}">{{ feature.name }}</span>
@@ -467,6 +508,16 @@ faqs:
                           <ul class="list-unstyled mb-0">
                             {% for feature in plan.features %}
                               {% unless common_feature_ids contains feature.id %}
+                                {% comment %} Resolve feature value: frontmatter > config limits {% endcomment %}
+                                {% assign _feature_value = feature.value %}
+                                {% if _config_product and _feature_value == nil %}
+                                  {% assign _config_limit = nil %}{% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _config_limit = _lim[1] %}{% break %}{% endif %}{% endfor %}
+                                  {% if _config_limit == -1 %}
+                                    {% assign _feature_value = "Unlimited" %}
+                                  {% elsif _config_limit %}
+                                    {% assign _feature_value = _config_limit %}
+                                  {% endif %}
+                                {% endif %}
                                 {% assign feature_definition = nil %}
                                 {% for def in page.resolved.pricing.definitions %}
                                   {% if def.id == feature.id %}
@@ -477,12 +528,12 @@ faqs:
                                 <li class="d-flex align-items-start mb-2 {% if forloop.last %}mb-0{% endif %}">
                                   <span class="me-3">{% uj_icon feature.icon, "fa-md" %}</span>
                                   <span>
-                                    {% if feature.value == "24/7" %}
-                                      {{ feature.value }}
-                                    {% elsif feature.value == "Included" or feature.value == "Available" or feature.value == "Full" %}
+                                    {% if _feature_value == "24/7" %}
+                                      {{ _feature_value }}
+                                    {% elsif _feature_value == "Included" or _feature_value == "Available" or _feature_value == "Full" %}
                                       <!-- No prefix for these values -->
                                     {% else %}
-                                      {{ feature.value | uj_commaify }}
+                                      {{ _feature_value | uj_commaify }}
                                     {% endif %}
                                     {% iftruthy feature_definition %}
                                       <span class="text-decoration-underline text-decoration-dotted cursor-help" data-bs-toggle="tooltip" data-bs-title="{{ feature_definition }}">{{ feature.name }}</span>
@@ -509,16 +560,12 @@ faqs:
                           {% endunless %}
                         {% endfor %}
 
+                        {% assign _prev_index = forloop.index0 | minus: 1 %}
+                        {% assign _prev_plan = page.resolved.pricing.plans[_prev_index] %}
                         <div class="text-muted small mb-2">
                           <em>Everything in</em>
                           <em>
-                            <strong>
-                              {%- if forloop.index == 1 -%}Free{%- endif -%}
-                              {%- if forloop.index == 2 -%}Basic{%- endif -%}
-                              {%- if forloop.index == 3 -%}Starter{%- endif -%}
-                              {%- if forloop.index == 4 -%}Pro{%- endif -%}
-                              {%- if forloop.index == 5 -%}Max{% endif -%}
-                            </strong>
+                            <strong>{{ _prev_plan.name }}</strong>
                             {%- if has_additional -%}, plus:{%- endif -%}
                           </em>
                         </div>
@@ -528,6 +575,16 @@ faqs:
                           <ul class="list-unstyled mb-0">
                             {% for feature in plan.features %}
                               {% unless common_feature_ids contains feature.id %}
+                                {% comment %} Resolve feature value: frontmatter > config limits {% endcomment %}
+                                {% assign _feature_value = feature.value %}
+                                {% if _config_product and _feature_value == nil %}
+                                  {% assign _config_limit = nil %}{% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _config_limit = _lim[1] %}{% break %}{% endif %}{% endfor %}
+                                  {% if _config_limit == -1 %}
+                                    {% assign _feature_value = "Unlimited" %}
+                                  {% elsif _config_limit %}
+                                    {% assign _feature_value = _config_limit %}
+                                  {% endif %}
+                                {% endif %}
                                 {% assign feature_definition = nil %}
                                 {% for def in page.resolved.pricing.definitions %}
                                   {% if def.id == feature.id %}
@@ -538,12 +595,12 @@ faqs:
                                 <li class="d-flex align-items-start mb-2 {% if forloop.last %}mb-0{% endif %}">
                                   <span class="me-3">{% uj_icon feature.icon, "fa-md" %}</span>
                                   <span>
-                                    {% if feature.value == "24/7" %}
-                                      {{ feature.value }}
-                                    {% elsif feature.value == "Included" or feature.value == "Available" or feature.value == "Full" %}
+                                    {% if _feature_value == "24/7" %}
+                                      {{ _feature_value }}
+                                    {% elsif _feature_value == "Included" or _feature_value == "Available" or _feature_value == "Full" %}
                                       <!-- No prefix for these values -->
                                     {% else %}
-                                      {{ feature.value | uj_commaify }}
+                                      {{ _feature_value | uj_commaify }}
                                     {% endif %}
                                     {% iftruthy feature_definition %}
                                       <span class="text-decoration-underline text-decoration-dotted cursor-help" data-bs-toggle="tooltip" data-bs-title="{{ feature_definition }}">{{ feature.name }}</span>
@@ -664,6 +721,14 @@ faqs:
                 {% endiffalsy %}
               </th>
               {% for plan in page.resolved.pricing.plans %}
+                {% comment %} Look up config product for this plan {% endcomment %}
+                {% assign _tbl_config_product = nil %}
+                {% for p in site.web_manager.payment.products %}
+                  {% if p.id == plan.id %}
+                    {% assign _tbl_config_product = p %}
+                    {% break %}
+                  {% endif %}
+                {% endfor %}
                 <td>
                   {% assign has_feature = false %}
                   {% assign feature_value = nil %}
@@ -678,6 +743,16 @@ faqs:
                     {% endif %}
                   {% endfor %}
 
+                  {% comment %} Resolve feature value from config limits if not set {% endcomment %}
+                  {% if has_feature and feature_value == nil and _tbl_config_product %}
+                    {% assign _tbl_limit = nil %}{% for _lim in _tbl_config_product.limits %}{% if _lim[0] == feature_def.id %}{% assign _tbl_limit = _lim[1] %}{% break %}{% endif %}{% endfor %}
+                    {% if _tbl_limit == -1 %}
+                      {% assign feature_value = "Unlimited" %}
+                    {% elsif _tbl_limit %}
+                      {% assign feature_value = _tbl_limit %}
+                    {% endif %}
+                  {% endif %}
+
                   {% unless has_feature %}
                     {% for check_plan in page.resolved.pricing.plans %}
                       {% if check_plan.id == plan.id %}
@@ -690,6 +765,26 @@ faqs:
                           {% break %}
                         {% endif %}
                       {% endfor %}
+
+                      {% comment %} Resolve inherited value from config limits if not set {% endcomment %}
+                      {% if inherited_feature and inherited_value == nil %}
+                        {% assign _inh_config_product = nil %}
+                        {% for p in site.web_manager.payment.products %}
+                          {% if p.id == check_plan.id %}
+                            {% assign _inh_config_product = p %}
+                            {% break %}
+                          {% endif %}
+                        {% endfor %}
+                        {% if _inh_config_product %}
+                          {% assign _inh_limit = nil %}{% for _lim in _inh_config_product.limits %}{% if _lim[0] == feature_def.id %}{% assign _inh_limit = _lim[1] %}{% break %}{% endif %}{% endfor %}
+                          {% if _inh_limit == -1 %}
+                            {% assign inherited_value = "Unlimited" %}
+                          {% elsif _inh_limit %}
+                            {% assign inherited_value = _inh_limit %}
+                          {% endif %}
+                        {% endif %}
+                      {% endif %}
+
                       {% if inherited_feature %}
                         {% break %}
                       {% endif %}

package/dist/defaults/src/_config.yml

@@ -134,18 +134,17 @@ web_manager:
     config:
       autoRequest: 1000 * 60
   validRedirectHosts: []
-
-# Payment
-payment:
-  processors:
-    stripe:
-      publishableKey: null
-    paypal:
-      clientId: null
-    chargebee:
-      site: null
-    coinbase:
-      enabled: false
+  payment:
+    processors:
+      stripe:
+        publishableKey: null
+      paypal:
+        clientId: null
+      chargebee:
+        site: null
+      coinbase:
+        enabled: false
+    products: []
 
 # OAuth2
 oauth2:

package/package.json

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