ultimate-jekyll-manager 0.0.118 → 0.0.120

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

@@ -123,47 +123,31 @@ function trackAddPaymentInfo(product, price, billingCycle, paymentMethod) {
 function setupEventListeners() {
   // Initialize FormManager
   formManager = new FormManager('#checkout-form', {
-    autoDisable: true, // Enable automatic form disabling during submission
-    showSpinner: true,
-    allowMultipleSubmissions: false, // Prevent multiple submissions
-    submitButtonLoadingText: 'Processing...'
+    autoReady: false, // We'll call ready() after initialization
+    allowResubmit: false,
+    submittingText: 'Processing...',
+    submittedText: 'Redirecting...',
   });
 
   // Listen for form field changes
-  formManager.addEventListener('change', (event) => {
-    const { fieldName, fieldValue, data } = event.detail;
-
+  formManager.on('change', ({ name, value }) => {
     // Handle billing cycle changes
-    if (fieldName === 'billing-cycle') {
-      handleBillingCycleChange(fieldValue, webManager);
-    }
-  });
-
-  // Handle non-submit button clicks
-  formManager.addEventListener('button', (event) => {
-    const { action } = event.detail;
-
-    if (action === 'apply-discount') {
-      applyDiscountCode(webManager);
+    if (name === 'billing-cycle') {
+      handleBillingCycleChange(value, webManager);
     }
   });
 
   // Handle form submission
-  formManager.addEventListener('submit', async (event) => {
-    event.preventDefault();
-
+  formManager.on('submit', async ({ $submitButton }) => {
     // Get the submit button that was clicked
-    const submitButton = event.detail.submitButton;
-    if (!submitButton) {
-      formManager.showError('Please choose a payment method.');
-      return;
+    if (!$submitButton) {
+      throw new Error('Please choose a payment method.');
     }
 
     // Check if a payment method was selected
-    const paymentMethod = submitButton.getAttribute('data-payment-method');
+    const paymentMethod = $submitButton.getAttribute('data-payment-method');
     if (!paymentMethod) {
-      formManager.showError('Invalid payment method selected.');
-      return;
+      throw new Error('Invalid payment method selected.');
     }
 
     // Set payment method in raw
@@ -181,6 +165,14 @@ function setupEventListeners() {
     await completePurchase();
   });
 
+  // Setup apply discount button (not part of form submit)
+  const $applyDiscountBtn = document.querySelector('[data-action="apply-discount"]');
+  if ($applyDiscountBtn) {
+    $applyDiscountBtn.addEventListener('click', () => {
+      applyDiscountCode(webManager);
+    });
+  }
+
   // Switch account link (keep as is - not part of form)
   const $switchAccountLink = document.getElementById('switch-account');
   if ($switchAccountLink) {
@@ -274,13 +266,8 @@ async function completePurchase() {
   } catch (error) {
     console.error('Purchase error:', error);
 
-    // FormManager will handle button state restoration
-    formManager.setFormState('ready');
-
-    // Show user-friendly error message
-    const errorMessage = error.message || 'There was an error processing your payment. Please try again.';
-
-    formManager.showError(errorMessage);
+    // Re-throw to let FormManager handle error display and state restoration
+    throw error;
   }
 }
 
@@ -385,7 +372,7 @@ async function initializeCheckout() {
     setupEventListeners();
 
     // Set form to ready state
-    formManager.setFormState('ready');
+    formManager.ready();
 
     // Track begin_checkout event on page load
     const basePrice = raw.product.is_subscription

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

@@ -196,8 +196,9 @@ function trackPricingToggle(billingType) {
     content_category: billingType
   });
   ttq.track('ViewContent', {
-    content_name: 'Pricing Toggle',
-    content_type: billingType
+    content_id: 'pricing-page',
+    content_type: 'product',
+    content_name: 'Pricing Toggle'
   });
 }
 
@@ -247,6 +248,8 @@ function trackEnterpriseContact() {
     content_name: 'Enterprise Plan'
   });
   ttq.track('Contact', {
+    content_id: 'enterprise-plan',
+    content_type: 'product',
     content_name: 'Enterprise Plan'
   });
 }

package/dist/assets/js/pages/test/libraries/form-manager/index.js

@@ -0,0 +1,194 @@
+/**
+ * FormManager Test Page JavaScript
+ */
+
+// Libraries
+import { FormManager } from '__main_assets__/js/libs/form-manager.js';
+
+let webManager = null;
+
+// Module
+export default (Manager) => {
+  return new Promise(async function (resolve) {
+    // Shortcuts
+    webManager = Manager.webManager;
+
+    // Initialize when DOM is ready
+    await webManager.dom().ready();
+
+    // Initialize test forms
+    initTestFormMain();
+    initTestFormValidation();
+    initTestFormContact();
+    initTestFormManual();
+
+    // Resolve after initialization
+    return resolve();
+  });
+};
+
+// Helper: simulate async API call
+function simulateApi(ms = 1000) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+// Test 1: Full Test (success/fail, nested, change events)
+function initTestFormMain() {
+  const formManager = new FormManager('#test-form-main');
+  const $status = document.getElementById('main-status');
+  const $action = document.getElementById('main-action');
+  const $output = document.getElementById('main-output');
+
+  formManager.on('statechange', ({ state }) => {
+    $status.textContent = `Status: ${state}`;
+  });
+
+  formManager.on('change', ({ name, value, data }) => {
+    console.log('[Test 1] Change:', name, '=', value);
+    console.log('[Test 1] Full data:', data);
+  });
+
+  formManager.on('submit', async ({ data, $submitButton }) => {
+    console.log('[Test 1] Submitting:', data);
+    console.log('[Test 1] Submit button:', $submitButton?.dataset?.action);
+
+    // Show action separately
+    const action = $submitButton?.dataset?.action || 'unknown';
+    $action.textContent = `Action: ${action}`;
+
+    // Show data
+    $output.textContent = JSON.stringify(data, null, 2);
+
+    await simulateApi(1000);
+
+    if (data.settings.outcome === 'error') {
+      throw new Error('Simulated server error - please try again');
+    }
+
+    formManager.showSuccess(`Form ${action === 'draft' ? 'saved as draft' : 'submitted'} successfully!`);
+  });
+
+  // Set Data button - test setData() API
+  const $setDataBtn = document.getElementById('main-set-data');
+  $setDataBtn.addEventListener('click', () => {
+    const testData = {
+      user: {
+        name: 'John Doe',
+        email: 'john@example.com',
+        address: {
+          city: 'Los Angeles',
+        },
+      },
+      settings: {
+        outcome: 'error',
+        subscribe: true,
+      },
+      preferences: {
+        notifications: 'important',
+        features: {
+          darkmode: true,
+          analytics: true,
+          beta: false,
+        },
+      },
+    };
+
+    formManager.setData(testData);
+    $output.textContent = 'Data set via setData() API - submit to verify';
+  });
+}
+
+// Test 2: Validation
+function initTestFormValidation() {
+  const formManager = new FormManager('#test-form-validation');
+  const $status = document.getElementById('validation-status');
+  const $setCorrectBtn = document.getElementById('validation-set-correct');
+
+  formManager.on('statechange', ({ state }) => {
+    $status.textContent = `Status: ${state}`;
+  });
+
+  // Validation event - runs BEFORE submit, use setError to accumulate errors
+  formManager.on('validation', ({ data, setError }) => {
+    console.log('[Test 2] Validating:', data);
+
+    // Custom validation (HTML5 validation handles required, email format, etc.)
+    // Here we add business logic validation
+
+    if (data.age && parseInt(data.age) < 18) {
+      setError('age', 'You must be 18 or older');
+    }
+
+    // Note: 'required' validation is handled automatically by HTML5 validation
+    // We just need to add the 'required' attribute to the HTML inputs
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    console.log('[Test 2] Submitting (validation passed):', data);
+
+    // If we reach here, validation passed
+    await simulateApi(500);
+    formManager.showSuccess('Validation passed! Form submitted.');
+  });
+
+  // Set Correct button - fills in valid values
+  $setCorrectBtn.addEventListener('click', () => {
+    formManager.setData({
+      name: 'John Doe',
+      email: 'john@example.com',
+      age: 25,
+      terms: true,
+    });
+  });
+}
+
+// Test 3: Contact Form (one-time submit)
+function initTestFormContact() {
+  const formManager = new FormManager('#test-form-contact', {
+    allowResubmit: false,
+    resetOnSuccess: true,
+  });
+  const $status = document.getElementById('contact-status');
+
+  formManager.on('statechange', ({ state }) => {
+    $status.textContent = `Status: ${state}`;
+  });
+
+  formManager.on('change', ({ name, value, data }) => {
+    console.log('[Test 3] Change:', name, '=', value);
+    console.log('[Test 3] Full data:', data);
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    console.log('[Test 3] Submitting:', data);
+    await simulateApi(1000);
+    formManager.showSuccess('Message sent! Form is now locked.');
+  });
+}
+
+// Test 4: Manual Ready
+function initTestFormManual() {
+  const formManager = new FormManager('#test-form-manual', { autoReady: false });
+  const $status = document.getElementById('manual-status');
+
+  formManager.on('statechange', ({ state }) => {
+    $status.textContent = `Status: ${state}`;
+  });
+
+  formManager.on('change', ({ name, value, data }) => {
+    console.log('[Test 4] Change:', name, '=', value);
+    console.log('[Test 4] Full data:', data);
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    console.log('[Test 4] Submitting:', data);
+    await simulateApi(1000);
+    formManager.showSuccess('Done!');
+  });
+
+  // Simulate async initialization (e.g., loading user data)
+  setTimeout(() => {
+    console.log('[Test 4] Now ready');
+    formManager.ready();
+  }, 2000);
+}

package/dist/assets/themes/classy/css/components/_cards.scss

@@ -11,8 +11,8 @@
   box-shadow: $classy-shadow-sm;
   position: relative;
 
-  // Allow badges to overflow
-  &:has(.badge) {
+  // Allow badges to overflow (except when overflow-hidden is explicitly set)
+  &:has(.badge):not(.overflow-hidden) {
     overflow: visible !important;
   }
 

package/dist/defaults/_.env

@@ -0,0 +1,6 @@
+# ========== Default Values ==========
+# ...
+
+# ========== Custom Values ==========
+# Add your custom environment variables below this line
+# ...

package/dist/defaults/_.gitignore

@@ -1,4 +1,7 @@
+# ========== Default Values ==========
+# macOS
 .DS_Store
+
 # Logs
 logs
 *.log
@@ -11,7 +14,6 @@ firebase-debug.log*
 .firebase/
 
 # Firebase config
-
 # Uncomment this if you'd like others to create their own Firebase project.
 # For a team working on the same Firebase project(s), it is recommended to leave
 # it commented so all members can deploy to the same project(s) in .firebaserc.
@@ -77,3 +79,7 @@ node_modules/
 /.cache
 /_legacy
 START-COMMANDS.md
+
+# ========== Custom Values ==========
+# Add your custom ignore patterns below this line
+# ...

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

@@ -9,7 +9,7 @@
   hidden>
   <span class="main-alert-close">&times;</span>
   <div>
-    <i class="fa-solid fa-warning fa-bounce me-2"></i>
+    {% uj_icon "warning", "fa-bounce me-2" %}
     You are using an outdated browser that our site <strong>DOES NOT</strong> support. Please <a href="https://www.google.com/chrome" rel="nofollow" target="_blank">click here</a> to update your browser.
   </div>
 </div>
@@ -19,11 +19,11 @@
   hidden>
   <span class="main-alert-close">&times;</span>
   <div>
-    <i class="fa-solid fa-warning fa-bounce me-2"></i>
+    {% uj_icon "warning", "fa-bounce me-2" %}
     There is a <strong>problem with your payment method</strong>. To continue using <strong>{{ site.brand.name }}</strong>, please <a href="{{ site.url }}/account#billing" target="_blank">update your payment method</a>.
   </div>
 </div>
-<div
+<!-- <div
   class="main-alert main-alert-top main-alert-fixed main-alert-sale bg-primary animation-fade-in"
   role="alert" aria-live="polite" aria-label="Flash sale"
   hidden>
@@ -33,17 +33,9 @@
     <strong>FLASH SALE!</strong>
     Save <strong>15%</strong> at checkout—today only! <a href="{{ site.url }}/pricing" target="_blank">Claim discount</a>.
   </div>
-</div>
+</div> -->
 
-{%- comment -%}
-  Icon Pre-rendering System
-  Pages can specify which icons to pre-render in their frontmatter:
-  prerender_icons:
-    - name: "apple"
-      class: "fa-3xl"
-    - name: "android"
-      class: "fa-2xl"
-{%- endcomment -%}
+<!-- Prerendered Icons -->
 {%- assign icons = page.resolved.prerender_icons | default: empty -%}
 {%- iftruthy icons -%}
 <!-- Pre-rendered Icon Templates -->

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

@@ -69,6 +69,7 @@
     buildTime: {{ site.uj.cache_breaker }},
     brand: {{ page.resolved.brand | jsonify }},
     advertising: {{ page.resolved.advertising | jsonify }},
+    tracking: {{ page.resolved.tracking | jsonify }},
     {% for item in page.resolved.web_manager %}
       {{ item[0] | jsonify }}: {{ item[1] | jsonify }},
     {% endfor %}

package/dist/defaults/dist/_includes/themes/classy/frontend/sections/nav.html

@@ -130,18 +130,23 @@
                       <span>{{ child.label }}</span>
                     </span>
                   {% endcapture %}
-                  <li>
-                    {% iftruthy child.href %}
-                      <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
-                        {{ child_content }}
-                      </a>
-                    {% endiftruthy %}
-                    {% iffalsy child.href %}
-                      <button class="{{ child_class }}" type="button" {{ child_attributes }}>
-                        {{ child_content }}
-                      </button>
-                    {% endiffalsy %}
-                  </li>
+
+                  {% if child.divider %}
+                    <li><hr class="dropdown-divider" {{ child_attributes }}/></li>
+                  {% else %}
+                    <li>
+                      {% iftruthy child.href %}
+                        <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
+                          {{ child_content }}
+                        </a>
+                      {% endiftruthy %}
+                      {% iffalsy child.href %}
+                        <button class="{{ child_class }}" type="button" {{ child_attributes }}>
+                          {{ child_content }}
+                        </button>
+                      {% endiffalsy %}
+                    </li>
+                  {% endif %}
                 {% endfor %}
               </ul>
             </li>
@@ -272,18 +277,23 @@
                         <span>{{ child.label }}</span>
                       </span>
                     {% endcapture %}
-                    <li>
-                      {% iftruthy child.href %}
-                        <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
-                          {{ child_content }}
-                        </a>
-                      {% endiftruthy %}
-                      {% iffalsy child.href %}
-                        <button class="{{ child_class }}" type="button" {{ child_attributes }}>
-                          {{ child_content }}
-                        </button>
-                      {% endiffalsy %}
-                    </li>
+
+                    {% if child.divider %}
+                      <li><hr class="dropdown-divider" {{ child_attributes }}/></li>
+                    {% else %}
+                      <li>
+                        {% iftruthy child.href %}
+                          <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
+                            {{ child_content }}
+                          </a>
+                        {% endiftruthy %}
+                        {% iffalsy child.href %}
+                          <button class="{{ child_class }}" type="button" {{ child_attributes }}>
+                            {{ child_content }}
+                          </button>
+                        {% endiffalsy %}
+                      </li>
+                    {% endif %}
                   {% endfor %}
                 </ul>
               </div>
@@ -343,18 +353,23 @@
                         <span>{{ child.label }}</span>
                       </span>
                     {% endcapture %}
-                    <li>
-                      {% iftruthy child.href %}
-                        <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
-                          {{ child_content }}
-                        </a>
-                      {% endiftruthy %}
-                      {% iffalsy child.href %}
-                        <button class="{{ child_class }}" type="button" {{ child_attributes }}>
-                          {{ child_content }}
-                        </button>
-                      {% endiffalsy %}
-                    </li>
+
+                    {% if child.divider %}
+                      <li><hr class="dropdown-divider" {{ child_attributes }}/></li>
+                    {% else %}
+                      <li>
+                        {% iftruthy child.href %}
+                          <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
+                            {{ child_content }}
+                          </a>
+                        {% endiftruthy %}
+                        {% iffalsy child.href %}
+                          <button class="{{ child_class }}" type="button" {{ child_attributes }}>
+                            {{ child_content }}
+                          </button>
+                        {% endiffalsy %}
+                      </li>
+                    {% endif %}
                   {% endfor %}
                 </ul>
               </div>

package/dist/defaults/dist/_layouts/blueprint/admin/notifications/new.html

@@ -7,15 +7,26 @@ meta:
   title: "Create Notification - Admin"
   description: "Create and send a new notification"
   breadcrumb: "Create Notification"
+
+### ICON PRE-RENDERING ###
+prerender_icons:
+  - name: "mobile"
+    class: "fa-sm me-1"
+  - name: "envelope"
+    class: "fa-sm me-1"
+  - name: "comment-sms"
+    class: "fa-sm me-1"
+  - name: "bell"
+    class: "fa-sm me-1"
 ---
 
 <!-- Success/Error Alerts -->
 <div class="notification-success-alert alert alert-success d-none" role="alert">
-  <i class="bi bi-check-circle"></i> <span class="alert-message">Notification sent successfully!</span>
+  {% uj_icon "circle-check", "fa-sm" %} <span class="alert-message">Notification sent successfully!</span>
 </div>
 
 <div class="notification-error-alert alert alert-danger d-none" role="alert">
-  <i class="bi bi-exclamation-triangle"></i> <span class="alert-message">An error occurred</span>
+  {% uj_icon "triangle-exclamation", "fa-sm" %} <span class="alert-message">An error occurred</span>
 </div>
 
 <!-- Notification Creation Form -->