ultimate-jekyll-manager 0.0.119 → 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/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/defaults/dist/_layouts/themes/classy/frontend/pages/auth/signin.html

@@ -63,7 +63,7 @@ social_signin:
           <label for="email" class="form-label fw-semibold">
             Email <span class="text-danger">*</span>
           </label>
-          <input type="email" class="form-control form-control-md" id="email" name="email" placeholder="Enter your email" autocomplete="email" autofocus required>
+          <input type="email" class="form-control form-control-md" id="email" name="email" placeholder="Enter your email" autocomplete="email" autofocus>
         </div>
 
         <div class="mb-3 text-start">
@@ -71,7 +71,7 @@ social_signin:
             Password <span class="text-danger">*</span>
           </label>
           <div class="input-group">
-            <input type="password" class="form-control form-control-md" id="password" name="password" placeholder="Enter your password" autocomplete="current-password" required>
+            <input type="password" class="form-control form-control-md" id="password" name="password" placeholder="Enter your password" autocomplete="current-password">
             <button class="btn border uj-password-toggle px-3" type="button" aria-label="Toggle password visibility">
               <span class="uj-password-show">{% uj_icon "eye", "fa-fw" %}</span>
               <span class="uj-password-hide d-none">{% uj_icon "eye-slash", "fa-fw" %}</span>

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/auth/signup.html

@@ -73,7 +73,7 @@ social_signup:
           <label for="email" class="form-label fw-semibold">
             Email <span class="text-danger">*</span>
           </label>
-          <input type="email" class="form-control form-control-md" id="email" name="email" placeholder="Enter your email" autocomplete="email" autofocus required>
+          <input type="email" class="form-control form-control-md" id="email" name="email" placeholder="Enter your email" autocomplete="email" autofocus>
         </div>
 
         <div class="mb-3 text-start">
@@ -81,7 +81,7 @@ social_signup:
             Password <span class="text-danger">*</span>
           </label>
           <div class="input-group">
-            <input type="password" class="form-control form-control-md" id="password" name="password" placeholder="Create a strong password" autocomplete="new-password" required>
+            <input type="password" class="form-control form-control-md" id="password" name="password" placeholder="Create a strong password" autocomplete="new-password">
             <button class="btn border uj-password-toggle px-3" type="button" aria-label="Toggle password visibility">
               <span class="uj-password-show">{% uj_icon "eye", "fa-fw" %}</span>
               <span class="uj-password-hide d-none">{% uj_icon "eye-slash", "fa-fw" %}</span>

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

@@ -178,37 +178,24 @@ faqs:
               {% endiftruthy %}
             </div>
 
-            <!-- Error Container -->
-            <div class="alert alert-danger contact-error-alert mb-3 d-none" role="alert"></div>
-
-            <!-- Success Container -->
-            <div class="alert alert-success contact-success-alert mb-3 d-none" role="alert"></div>
-
-            <form id="contact-form" autocomplete="on" novalidate>
+            <form id="contact-form" autocomplete="on">
               <div class="row g-3 mb-4">
                 <div class="col-md-6">
-                  <label for="first_name" class="form-label fw-semibold">
-                    First Name <span class="text-danger">*</span>
-                  </label>
+                  <label for="first_name" class="form-label fw-semibold">First Name <span class="text-danger">*</span></label>
                   <input type="text" class="form-control form-control-lg" id="first_name" name="first_name"
                     placeholder="Enter your first name"
                     autocomplete="given-name"
-                    data-invalid-field="first_name"
-                    data-invalid-description="Please enter your first name"
                     minlength="2"
                     maxlength="50"
+                    autofocus
                     required>
                   <div class="invalid-feedback"></div>
                 </div>
                 <div class="col-md-6">
-                  <label for="last_name" class="form-label fw-semibold">
-                    Last Name <span class="text-danger">*</span>
-                  </label>
+                  <label for="last_name" class="form-label fw-semibold">Last Name <span class="text-danger">*</span></label>
                   <input type="text" class="form-control form-control-lg" id="last_name" name="last_name"
                     placeholder="Enter your last name"
                     autocomplete="family-name"
-                    data-invalid-field="last_name"
-                    data-invalid-description="Please enter your last name"
                     minlength="2"
                     maxlength="50"
                     required>
@@ -222,14 +209,10 @@ faqs:
               </div>
 
               <div class="mb-4">
-                <label for="email" class="form-label fw-semibold">
-                  Email Address <span class="text-danger">*</span>
-                </label>
+                <label for="email" class="form-label fw-semibold">Email Address <span class="text-danger">*</span></label>
                 <input type="email" class="form-control form-control-lg" id="email" name="email"
                   placeholder="Enter your email address"
                   autocomplete="email"
-                  data-invalid-field="email"
-                  data-invalid-description="Please enter a valid email address"
                   required>
                 <div class="invalid-feedback"></div>
               </div>
@@ -240,17 +223,11 @@ faqs:
                   placeholder="Enter your company name (optional)"
                   autocomplete="organization"
                   maxlength="100">
-                <div class="invalid-feedback"></div>
               </div>
 
               <div class="mb-4">
-                <label for="subject" class="form-label fw-semibold">
-                  Subject <span class="text-danger">*</span>
-                </label>
-                <select class="form-select form-select-lg" id="subject" name="subject"
-                  data-invalid-field="subject"
-                  data-invalid-description="Please select a subject"
-                  required>
+                <label for="subject" class="form-label fw-semibold">Subject <span class="text-danger">*</span></label>
+                <select class="form-select form-select-lg" id="subject" name="subject" required>
                   <option value="">Choose a topic...</option>
                   <option value="general">General Inquiry</option>
                   <option value="support">Technical Support</option>
@@ -267,13 +244,9 @@ faqs:
               </div>
 
               <div class="mb-4">
-                <label for="message" class="form-label fw-semibold">
-                  Message <span class="text-danger">*</span>
-                </label>
+                <label for="message" class="form-label fw-semibold">Message <span class="text-danger">*</span></label>
                 <textarea class="form-control form-control-lg" id="message" name="message" rows="3"
                   placeholder="Tell us how we can help you..."
-                  data-invalid-field="message"
-                  data-invalid-description="Please enter your message"
                   minlength="10"
                   maxlength="5000"
                   required></textarea>
@@ -281,9 +254,9 @@ faqs:
               </div>
 
               <div class="d-grid gap-2 d-md-flex justify-content-md-between align-items-center">
-                <button type="submit" class="btn btn-primary btn-lg px-5" disabled>
+                <button type="submit" class="btn btn-primary btn-lg px-5">
                   {% uj_icon "paper-plane", "me-2" %}
-                  <span class="button-text">Send Message</span>
+                  Send Message
                 </button>
                 <a href="{{ site.url }}" class="btn btn-link">
                   {% uj_icon "arrow-left", "me-1" %}

package/dist/defaults/dist/pages/test/libraries/form-manager.html

@@ -0,0 +1,181 @@
+---
+layout: themes/[ site.theme.id ]/frontend/core/base
+title: FormManager Test
+permalink: /test/libraries/form-manager
+sitemap: false
+---
+
+<div class="container py-5">
+  <h1 class="mb-4">FormManager Test Page</h1>
+  <p class="text-muted mb-5">Testing different configurations of the FormManager library.</p>
+
+  <div class="row g-4">
+
+    <!-- Test 1: Full Test (success/fail, nested, change events) -->
+    <div class="col-lg-8">
+      <div class="card">
+        <div class="card-header">
+          <h5 class="mb-0">Test 1: Full Test</h5>
+          <small class="text-muted">Success/failure toggle, nested dot notation, change events (check console)</small>
+        </div>
+        <div class="card-body">
+          <form id="test-form-main">
+            <div class="row">
+              <div class="col-md-6">
+                <div class="mb-3">
+                  <label for="main-name" class="form-label">user.name</label>
+                  <input type="text" class="form-control" id="main-name" name="user.name" value="Ian">
+                </div>
+                <div class="mb-3">
+                  <label for="main-email" class="form-label">user.email</label>
+                  <input type="email" class="form-control" id="main-email" name="user.email" value="ian@example.com">
+                </div>
+                <div class="mb-3">
+                  <label for="main-city" class="form-label">user.address.city</label>
+                  <input type="text" class="form-control" id="main-city" name="user.address.city" value="NYC">
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="mb-3">
+                  <label for="main-outcome" class="form-label">Simulate Outcome</label>
+                  <select class="form-select" id="main-outcome" name="settings.outcome">
+                    <option value="success">Success</option>
+                    <option value="error">Error (throw Error)</option>
+                  </select>
+                </div>
+                <div class="mb-3">
+                  <label class="form-label d-block">preferences.notifications (radio group)</label>
+                  <div class="form-check form-check-inline">
+                    <input type="radio" class="form-check-input" id="notif-all" name="preferences.notifications" value="all" checked>
+                    <label class="form-check-label" for="notif-all">All</label>
+                  </div>
+                  <div class="form-check form-check-inline">
+                    <input type="radio" class="form-check-input" id="notif-important" name="preferences.notifications" value="important">
+                    <label class="form-check-label" for="notif-important">Important</label>
+                  </div>
+                  <div class="form-check form-check-inline">
+                    <input type="radio" class="form-check-input" id="notif-none" name="preferences.notifications" value="none">
+                    <label class="form-check-label" for="notif-none">None</label>
+                  </div>
+                </div>
+                <div class="mb-3">
+                  <label class="form-label d-block">preferences.features (checkbox group)</label>
+                  <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="feat-darkmode" name="preferences.features" value="darkmode">
+                    <label class="form-check-label" for="feat-darkmode">Dark Mode</label>
+                  </div>
+                  <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="feat-analytics" name="preferences.features" value="analytics">
+                    <label class="form-check-label" for="feat-analytics">Analytics</label>
+                  </div>
+                  <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="feat-beta" name="preferences.features" value="beta">
+                    <label class="form-check-label" for="feat-beta">Beta Features</label>
+                  </div>
+                </div>
+                <div class="mb-3 form-check">
+                  <input type="checkbox" class="form-check-input" id="main-subscribe" name="settings.subscribe">
+                  <label class="form-check-label" for="main-subscribe">settings.subscribe (single checkbox)</label>
+                </div>
+              </div>
+            </div>
+            <div class="d-flex gap-2">
+              <button type="submit" data-action="save" class="btn btn-primary">Save</button>
+              <button type="submit" data-action="draft" class="btn btn-outline-secondary">Save as Draft</button>
+              <button type="button" id="main-set-data" class="btn btn-outline-info">Set Data</button>
+            </div>
+          </form>
+          <div class="mt-3 d-flex gap-3">
+            <small class="text-muted" id="main-status">Status: ready</small>
+            <small class="text-muted" id="main-action">Action: -</small>
+          </div>
+          <div class="mt-3">
+            <pre id="main-output" class="bg-body-secondary p-2 rounded small" style="max-height: 200px; overflow: auto;">Submit to see collected data...</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Test 2: Validation -->
+    <div class="col-lg-4">
+      <div class="card">
+        <div class="card-header d-flex justify-content-between align-items-start">
+          <div>
+            <h5 class="mb-0">Test 2: Validation</h5>
+            <small class="text-muted">HTML5 + custom validation event</small>
+          </div>
+          <button type="button" id="validation-set-correct" class="btn btn-sm btn-outline-success">Set Correct</button>
+        </div>
+        <div class="card-body">
+          <form id="test-form-validation">
+            <div class="mb-3">
+              <label for="validation-name" class="form-label">Name (required)</label>
+              <input type="text" class="form-control" id="validation-name" name="name" required>
+            </div>
+            <div class="mb-3">
+              <label for="validation-email" class="form-label">Email (required, valid format)</label>
+              <input type="email" class="form-control" id="validation-email" name="email" required>
+            </div>
+            <div class="mb-3">
+              <label for="validation-age" class="form-label">Age (required, must be 18+)</label>
+              <input type="number" class="form-control" id="validation-age" name="age" required min="1">
+            </div>
+            <div class="mb-3 form-check">
+              <input type="checkbox" class="form-check-input" id="validation-terms" name="terms" required>
+              <label class="form-check-label" for="validation-terms">I agree to the terms (required)</label>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+          </form>
+          <div class="mt-2">
+            <small class="text-muted" id="validation-status">Status: ready</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Test 3: Contact Form (one-time submit, reset on success) -->
+    <div class="col-lg-4">
+      <div class="card">
+        <div class="card-header">
+          <h5 class="mb-0">Test 3: Contact Form</h5>
+          <small class="text-muted">allowResubmit: false, resetOnSuccess: true</small>
+        </div>
+        <div class="card-body">
+          <form id="test-form-contact">
+            <div class="mb-3">
+              <label for="contact-message" class="form-label">Message</label>
+              <textarea class="form-control" id="contact-message" name="message" rows="2">Hello!</textarea>
+            </div>
+            <button type="submit" class="btn btn-primary">Send Message</button>
+          </form>
+          <div class="mt-2">
+            <small class="text-muted" id="contact-status">Status: ready</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Test 4: Manual Ready -->
+    <div class="col-lg-4">
+      <div class="card">
+        <div class="card-header">
+          <h5 class="mb-0">Test 4: Manual Ready</h5>
+          <small class="text-muted">autoReady: false, ready after 2 seconds</small>
+        </div>
+        <div class="card-body">
+          <form id="test-form-manual">
+            <div class="mb-3">
+              <label for="manual-data" class="form-label">Data</label>
+              <input type="text" class="form-control" id="manual-data" name="data">
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+          </form>
+          <div class="mt-2">
+            <small class="text-muted" id="manual-status">Status: initializing</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

package/dist/gulp/tasks/serve.js

@@ -63,6 +63,24 @@ module.exports = async function serve(complete) {
 
     // Write the config file
     jetpack.write('.temp/_config_browsersync.yml', `url: ${externalUrl}`);
+//     jetpack.write('.temp/_config_browsersync.yml', `
+// url: ${externalUrl}
+
+// web_manager:
+//   firebase:
+//     app:
+//       config:
+//         authDomain: "${new URL(externalUrl).host}"
+// `);
+//     jetpack.write('.temp/_config_browsersync.yml', `
+// url: ${externalUrl}
+
+// web_manager:
+//   firebase:
+//     app:
+//       config:
+//         authDomain: "${new URL(localUrl).host}"
+// `);
 
     // Set global variable to access browserSync in other files
     global.browserSync = browserSync;

package/dist/lib/logger.js

@@ -1,5 +1,5 @@
 // Libraries
-const chalk = require('chalk');
+const chalk = require('chalk').default;
 
 // Logger class
 function Logger(name) {