ultimate-jekyll-manager 0.0.96 → 0.0.98

package/_backup/cover-old.html

@@ -0,0 +1,55 @@
+---
+### FULLSCREEN LAYOUT ###
+layout: themes/[ site.theme.id ]/frontend/core/base
+
+### FULLSCREEN PAGES ###
+theme:
+  nav:
+    enabled: false
+  main:
+    class: "d-flex align-items-{{ page.resolved.theme.main.align | default: 'center' }} justify-content-center_ pt-0"
+  footer:
+    enabled: false
+  ### CORE CONFIG ###
+  # core:
+  #   cover:
+  #     class: "align-top" # USED TO HAVE {{ page.resolved.theme.core.cover.class }} IN THE TOP LEVEL CLASS WITH w-100
+---
+
+<!-- Critical inline CSS to prevent FOUC on cover pages -->
+<style>
+  main.d-flex {
+    display: flex !important;
+    min-height: calc(100vh);
+  }
+
+  main.d-flex.align-items-center {
+    align-items: center !important;
+  }
+
+  main.d-flex.justify-content-center {
+    justify-content: center !important;
+  }
+</style>
+
+<!-- <div class="w-100">
+  <div class="row justify-content-center">
+    <div class="col-12 text-center">
+    </div>
+  </div>
+</div> -->
+
+<!-- <div class="w-100">
+  <div class="row justify-content-center">
+    <div class="col-12 text-center px-0">
+    </div>
+  </div>
+</div> -->
+
+<div class="w-100">
+  <div class="d-flex justify-content-center">
+    {{ content | uj_content_format }}
+  </div>
+</div>
+
+

package/dist/assets/css/core/bindings.scss

@@ -24,6 +24,11 @@
 
   // Subtle color overlay for text elements
   color: transparent !important;
+  * {
+    // color: transparent !important;
+    // z-index: -1 !important;
+    opacity: 0 !important;
+  }
 
   // Prevent text selection during loading
   user-select: none;
@@ -31,8 +36,8 @@
 
   // Minimum dimensions for empty elements
   min-width: 50px;
-  min-height: 1em;
-  display: inline-block;
+  min-height: 1lh;
+  // display: inline-block;
 }
 
 // Dark theme overrides

package/dist/assets/css/core/utilities.scss

@@ -12,7 +12,9 @@
 
 .disabled,
 [disabled],
-:disabled {
+:disabled,
+[data-page-loading] button.btn,
+[data-page-loading] .btn-action {
   cursor: not-allowed !important;
   pointer-events: all !important;
 
@@ -23,6 +25,12 @@
   }
 }
 
+[data-page-loading] button.btn,
+[data-page-loading] .btn-action {
+  opacity: var(--bs-btn-disabled-opacity);
+  color: var(--bs-btn-disabled-color);
+}
+
 // Prevent pointer events on all children inside buttons and links
 // This helps fix event bubbling issues for click listeners
 button *, a * {

package/dist/assets/css/pages/payment/checkout/index.scss

@@ -1,15 +1,21 @@
-// Checkout Page Styles - Minimal custom CSS
+// Checkout Page Styles
 
-// Order summary sticky behavior (can't be done with Bootstrap)
+// ============================================
+// Order Summary Sticky Positioning
+// ============================================
 .order-summary-sticky {
   position: sticky;
   top: 2rem;
 }
 
-// Product thumbnail size (specific dimension needed)
+// ============================================
+// Product Thumbnail
+// ============================================
 .product-thumbnail {
   width: 60px;
   height: 60px;
+  min-width: 60px;
+  min-height: 60px;
 }
 
 // Save badge positioning adjustment
@@ -62,8 +68,47 @@
 #pay-with-paypal img {
   filter: brightness(0.9);
 }
-// .btn-check:checked + .btn {
-//     color: var(--bs-btn-active-color);
-//     background-color: var(--bs-btn-active-bg);
-//     border-color: var(--bs-btn-active-border-color);
+
+// ============================================
+// Loading States Enhancement for Bindings
+// ============================================
+// Smooth transitions when bindings update
+// [data-wm-bind] {
+//   transition: opacity 0.3s ease-in-out;
+// }
+
+// Animation for elements appearing via bindings
+// [data-wm-bind*="@show"]:not([hidden]) {
+//   animation: fadeIn 0.3s ease-in-out;
+// }
+
+// @keyframes fadeIn {
+//   from {
+//     opacity: 0;
+//     transform: translateY(-5px);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translateY(0);
+//   }
+// }
+
+// ============================================
+// Discount Messages Animation
+// ============================================
+// [data-wm-bind*="checkout.discount"] {
+//   &:not([hidden]) {
+//     animation: slideDown 0.2s ease-out;
+//   }
+// }
+
+// @keyframes slideDown {
+//   from {
+//     opacity: 0;
+//     max-height: 0;
+//   }
+//   to {
+//     opacity: 1;
+//     max-height: 50px;
+//   }
 // }

package/dist/assets/js/core/complete.js

@@ -0,0 +1,56 @@
+// Page Loader Module - Handles page loading state indicator
+export default function (Manager, options) {
+  // Shortcuts
+  const { webManager } = Manager;
+  let removed = false;
+
+  // Log
+  console.log('Running complete()');
+
+  // Remove page loading state indicator
+  const removeLoadingState = (source) => {
+    // Check if already removed
+    if (removed) return;
+    removed = true;
+
+    // Log
+    console.log(`Removing page loading state (source: ${source})`);
+
+    // Use requestAnimationFrame for smooth transition
+    requestAnimationFrame(() => {
+      document.documentElement.removeAttribute('data-page-loading');
+      document.documentElement.setAttribute('aria-busy', 'false');
+    });
+  };
+
+  // Check document ready state
+  console.log('Document readyState:', document.readyState);
+
+  // For interactive state, we need to wait a bit for resources
+  // Since window.load is unreliable with async scripts, use a hybrid approach
+
+  // Immediately remove if already complete
+  if (document.readyState === 'complete') {
+    removeLoadingState('Complete');
+    return;
+  }
+
+  // Strategy 1: Try window load event (might not fire)
+  window.addEventListener('load', () => {
+    removeLoadingState('Load');
+  }, { once: true });
+
+  // Strategy 2: Poll for complete state
+  const pollInterval = setInterval(() => {
+    if (document.readyState === 'complete') {
+      clearInterval(pollInterval);
+      removeLoadingState('Polling');
+    }
+  }, 50);
+
+  // Strategy 3: Timeout fallback (max 3 seconds)
+  setTimeout(() => {
+    clearInterval(pollInterval);
+    removeLoadingState('Timeout');
+  }, 3000);
+}

package/dist/assets/js/core/initialize.js

@@ -0,0 +1,11 @@
+// Page Loader Module - Initialization
+export default function (Manager, options) {
+  // Shortcuts
+  const { webManager } = Manager;
+
+  // Log
+  console.log('Running initialize()');
+
+  // The click prevention logic has been moved to an inline script in base.html
+  // for immediate execution to prevent race conditions
+}

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

@@ -2,7 +2,6 @@
 let webManager = null;
 
 // Global variables
-let hasLostFocus = false;
 let launchTimeout;
 let errorTimeout;
 
@@ -10,6 +9,7 @@ let errorTimeout;
 let $launchButton;
 let $downloadButton;
 let $errorAlert;
+let $spinner;
 
 // Module
 export default (Manager, options) => {
@@ -33,33 +33,16 @@ function setupPage() {
   $launchButton = document.getElementById('launch-button');
   $downloadButton = document.getElementById('download-button');
   $errorAlert = document.getElementById('error-alert');
-  const urlParams = window.location.search;
+  $spinner = document.querySelector('.spinner-border');
 
-  // Enable both buttons
-  [$launchButton, $downloadButton].forEach(button => {
-    button.removeAttribute('disabled');
-    button.classList.remove('disabled');
-  });
+  // Hide spinner initially (will be shown again on launch)
+  $spinner.setAttribute('hidden', true);
 
-  // window.addEventListener('blur', () => {
-  //   hasLostFocus = true;
-  //   if (launchTimeout) {
-  //     clearTimeout(launchTimeout);
-  //   }
-  // });
-
-  // window.addEventListener('focus', () => {
-  //   if (hasLostFocus) {
-  //     window.close();
-  //   }
-  // });
-
-  // Build app URL with parameters
-  const baseUrl = $launchButton.getAttribute('href');
-  const appUrl = `${baseUrl}${urlParams}`;
+  // Build deep link URL
+  const appUrl = buildDeepLinkUrl();
   $launchButton.setAttribute('href', appUrl);
 
-  // Handle launch button click
+  // Launch app immediately on page load
   launchApp(appUrl);
 
   // Handle launch button click
@@ -67,32 +50,88 @@ function setupPage() {
     event.preventDefault();
     launchApp(appUrl);
   });
+}
+
+// Build deep link URL with path extraction and query passthrough
+function buildDeepLinkUrl() {
+  const baseUrl = $launchButton.getAttribute('href'); // e.g., "myapp://"
+  const urlParams = new URLSearchParams(window.location.search);
+
+  // Define the special parameter name for the app path
+  const PATH_PARAM_NAMES = ['path']
 
-  // Close window after 5 seconds regardless
-  // launchTimeout = setTimeout(() => {
-  //   if (!hasLostFocus) {
-  //     console.log('App did not launch, closing window');
-  //   }
-  //   window.close();
-  // }, 5000)
+  // Find which path parameter is being used (if any)
+  let appPath = '';
+  let pathParamUsed = null;
+
+  for (const paramName of PATH_PARAM_NAMES) {
+    const value = urlParams.get(paramName);
+    if (value !== null) {
+      appPath = value;
+      pathParamUsed = paramName;
+      break;
+    }
+  }
+
+  // Build the query string for the deep link
+  // This includes all parameters EXCEPT the special path parameter
+  const deepLinkParams = new URLSearchParams();
+
+  for (const [key, value] of urlParams.entries()) {
+    // Skip the special path parameter
+    if (!PATH_PARAM_NAMES.includes(key)) {
+      deepLinkParams.append(key, value);
+    }
+  }
+
+  // Construct the final deep link URL
+  // Remove leading slash from path if present to avoid double slashes
+  const cleanPath = appPath.startsWith('/') ? appPath.substring(1) : appPath;
+
+  // Build the final URL
+  let finalUrl = baseUrl;
+  if (cleanPath) {
+    finalUrl += cleanPath;
+  }
+
+  // Add query parameters if there are any
+  const queryString = deepLinkParams.toString();
+  if (queryString) {
+    // Add ? or & depending on whether the path already has query params
+    const separator = cleanPath.includes('?') ? '&' : '?';
+    finalUrl += separator + queryString;
+  }
+
+  console.log('Deep link constructed:', {
+    baseUrl: baseUrl,
+    pathParam: pathParamUsed,
+    appPath: appPath,
+    passedParams: queryString,
+    finalUrl: finalUrl
+  });
+
+  return finalUrl;
 }
 
 function launchApp(appUrl) {
-  // Attempt to launch app
-  const launchTime = Date.now();
-  window.location.href = appUrl;
+  // Show spinner when attempting to launch
+  $spinner.removeAttribute('hidden');
 
-  // Clear any previous error timeout
+  // Clear any previous error timeout and hide error alert
   clearTimeout(errorTimeout);
   $errorAlert.setAttribute('hidden', true);
 
-  // Check if deep link failed after 2 seconds
+  // Attempt to launch app
+  window.location.href = appUrl;
+
+  // Check if deep link failed after a delay
+  // Since browser prompts don't trigger blur, we can't reliably detect if app launched
+  // We'll show download options after a delay - user can dismiss if app actually launched
   errorTimeout = setTimeout(() => {
-    if (hasLostFocus) {
-      console.log('Deep link launched app successfully');
-    } else {
-      console.log('Deep link failed to launch app');
-      $errorAlert.removeAttribute('hidden');
-    }
-  }, 1000);
+    // Hide spinner
+    $spinner.setAttribute('hidden', true);
+
+    // Show download options
+    $errorAlert.removeAttribute('hidden');
+  }, 2000);
 }

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

@@ -48,12 +48,6 @@ function setupPlatformDetection() {
 
   // Show loading state initially, then switch to detected platform
   setTimeout(() => {
-    // Enable all platform buttons
-    const $platformButtons = document.querySelectorAll('.platform-btn');
-    $platformButtons.forEach($btn => {
-      $btn.disabled = false;
-    });
-
     // Activate the detected platform tab using Bootstrap's tab API
     const $detectedTab = document.querySelector(`#${detectedPlatform}-tab`);
     if ($detectedTab) {

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

@@ -1,21 +1,22 @@
 // Libraries
-import { state } from './modules/state.js';
+import { raw } from './modules/state.js';
 import { fetchProductDetails, fetchTrialEligibility, warmupServer } from './modules/api.js';
 import { initializeRecaptcha } from './modules/recaptcha.js';
 import {
   updateAllUI,
   handleBillingCycleChange,
   showError,
-  hidePreloader,
-  updatePaymentButtonVisibility
-} from './modules/ui.js';
-import { applyDiscountCode, autoApplyWelcomeCoupon } from './modules/discount.js';
+  updatePaymentButtonVisibility,
+  initializeCheckoutUI
+} from './modules/ui-bindings.js';
+import { applyDiscountCode, autoApplyWelcomeCoupon } from './modules/discount-bindings.js';
 import { paymentManager } from './modules/processors-main.js';
 import { FormManager } from '__main_assets__/js/libs/form-manager.js';
 import {
   generateCheckoutId,
   buildPaymentIntentData,
 } from './modules/session.js';
+import { calculatePrices } from './modules/pricing.js';
 let webManager = null;
 let formManager = null;
 
@@ -134,7 +135,7 @@ function setupEventListeners() {
 
     // Handle billing cycle changes
     if (fieldName === 'billing-cycle') {
-      handleBillingCycleChange(fieldValue);
+      handleBillingCycleChange(fieldValue, webManager);
     }
   });
 
@@ -143,7 +144,7 @@ function setupEventListeners() {
     const { action } = event.detail;
 
     if (action === 'apply-discount') {
-      applyDiscountCode();
+      applyDiscountCode(webManager);
     }
   });
 
@@ -165,15 +166,15 @@ function setupEventListeners() {
       return;
     }
 
-    // Set payment method in state
-    state.paymentMethod = paymentMethod;
+    // Set payment method in raw
+    raw.paymentMethod = paymentMethod;
 
     // Track add_payment_info event when payment method is selected
-    const basePrice = state.isSubscription
-      ? (state.billingCycle === 'monthly' ? state.product.price_monthly : state.product.price_annually)
-      : state.product.price;
+    const basePrice = raw.product.is_subscription
+      ? (raw.billingCycle === 'monthly' ? raw.product.price_monthly : raw.product.price_annually)
+      : raw.product.price;
 
-    trackAddPaymentInfo(state.product, state.total || basePrice, state.billingCycle, paymentMethod);
+    trackAddPaymentInfo(raw.product, basePrice, raw.billingCycle, paymentMethod);
     console.log('Tracked add_payment_info event:', paymentMethod);
 
     // Process the payment
@@ -203,8 +204,8 @@ async function completePurchase() {
     // Get form data from FormManager
     const formData = formManager.getData();
 
-    // Store form data in state
-    state.formData = formData;
+    // Store form data in raw
+    raw.formData = formData;
 
     // Wait 1 second to simulate processing time
     if (webManager.isDevelopment()) {
@@ -212,7 +213,7 @@ async function completePurchase() {
     }
 
     // Add custom validation if needed
-    if (!state.paymentMethod) {
+    if (!raw.paymentMethod) {
       throw new Error('Please select a payment method');
     }
 
@@ -222,14 +223,17 @@ async function completePurchase() {
     // Log the structured payment data
     console.log('🟢 Payment intent data:', paymentIntentData);
 
+    // Calculate pricing for analytics
+    const prices = calculatePrices(raw);
+
     // Store pre-payment analytics data
     const analyticsData = {
-      transaction_id: state.checkoutId,
-      value: state.total,
+      transaction_id: raw.checkoutId,
+      value: prices.total,
       currency: 'USD',
       items: [{
-        item_name: state.product.name,
-        price: state.total,
+        item_name: raw.product.name,
+        price: prices.total,
         quantity: 1
       }]
     };
@@ -241,15 +245,15 @@ async function completePurchase() {
 
     // Store order data for confirmation page (legacy format for now)
     const orderData = {
-      orderId: state.checkoutId,
-      product: state.product.name,
-      productId: state.product.id,
-      total: state.total,
-      subtotal: state.subtotal,
-      discountPercent: state.discountPercent,
-      billingCycle: state.billingCycle,
-      hasFreeTrial: state.hasFreeTrial && state.isSubscription,
-      paymentMethod: state.paymentMethod,
+      orderId: raw.checkoutId,
+      product: raw.product.name,
+      productId: raw.product.id,
+      total: prices.total,
+      subtotal: prices.subtotal,
+      discountPercent: raw.discountPercent,
+      billingCycle: raw.billingCycle,
+      hasFreeTrial: raw.product.has_free_trial,
+      paymentMethod: raw.paymentMethod,
       email: webManager.auth().getUser().email,
       timestamp: new Date().toISOString(),
       formData: formData
@@ -257,11 +261,11 @@ async function completePurchase() {
 
     sessionStorage.setItem('pendingOrder', JSON.stringify(orderData));
 
-    // Store the payment intent data in state for processors to use
-    state.paymentIntentData = paymentIntentData;
+    // Store the payment intent data in raw for processors to use
+    raw.paymentIntentData = paymentIntentData;
 
     // Process payment with selected processor (will redirect)
-    await paymentManager.processPayment(state.paymentMethod);
+    await paymentManager.processPayment(raw.paymentMethod);
 
     // This code won't run if redirect is successful
     // If we get here, something went wrong
@@ -283,9 +287,12 @@ async function completePurchase() {
 // Initialize checkout with parallel API calls
 async function initializeCheckout() {
   try {
+    // Initialize UI with loading states (replaces fullscreen loader)
+    initializeCheckoutUI();
+
     // Generate or retrieve checkout session ID
-    state.checkoutId = generateCheckoutId();
-    console.log('Checkout session ID:', state.checkoutId);
+    raw.checkoutId = generateCheckoutId();
+    console.log('Checkout session ID:', raw.checkoutId);
 
     // Get product ID from URL params
     const urlParams = new URLSearchParams(window.location.search);
@@ -318,9 +325,7 @@ async function initializeCheckout() {
     }
 
     // Set product data
-    state.product = productData.value;
-    state.isSubscription = state.product.is_subscription;
-    state.hasFreeTrial = state.product.has_free_trial;
+    raw.product = productData.value;
 
     // Create mutable trial eligibility result for testing
     let trialEligibilityResult = trialEligible;
@@ -336,12 +341,12 @@ async function initializeCheckout() {
 
     // Apply trial eligibility with server/test response
     if (trialEligibilityResult.status === 'fulfilled') {
-      state.hasFreeTrial = trialEligibilityResult.value && state.product.has_free_trial;
+      raw.product.has_free_trial = trialEligibilityResult.value && raw.product.has_free_trial;
     }
 
     // Initialize payment processors with API keys
-    if (state.apiKeys) {
-      paymentManager.initialize(state.apiKeys, webManager);
+    if (raw.apiKeys) {
+      paymentManager.initialize(raw.apiKeys, webManager);
     }
 
     // Update payment button visibility based on available processors
@@ -356,7 +361,7 @@ async function initializeCheckout() {
 
     if (availableMethods.length === 0) {
       console.error('No payment methods available! Check API keys configuration.');
-      showError('No payment methods are currently available. Please contact support for assistance.');
+      showError('No payment methods are currently available. Please contact support for assistance.', webManager);
       return; // Stop initialization since we can't proceed without payment methods
     }
 
@@ -369,12 +374,12 @@ async function initializeCheckout() {
 
     // Set billing cycle from URL parameter (before UI updates)
     if (frequency === 'monthly' || frequency === 'annually') {
-      state.billingCycle = frequency;
+      raw.billingCycle = frequency;
       console.log('Setting billing cycle from URL:', frequency);
     }
 
     // Update UI with product details
-    updateAllUI();
+    updateAllUI(webManager);
 
     // Set up event listeners and FormManager
     setupEventListeners();
@@ -383,23 +388,24 @@ async function initializeCheckout() {
     formManager.setFormState('ready');
 
     // Track begin_checkout event on page load
-    const basePrice = state.isSubscription
-      ? (state.billingCycle === 'monthly' ? state.product.price_monthly : state.product.price_annually)
-      : state.product.price;
+    const basePrice = raw.product.is_subscription
+      ? (raw.billingCycle === 'monthly' ? raw.product.price_monthly : raw.product.price_annually)
+      : raw.product.price;
 
-    trackBeginCheckout(state.product, basePrice, state.billingCycle);
-    console.log('Tracked begin_checkout event for:', state.product.id);
+    trackBeginCheckout(raw.product, basePrice, raw.billingCycle);
+    console.log('Tracked begin_checkout event for:', raw.product.id);
 
     // Auto-apply welcome coupon
-    autoApplyWelcomeCoupon();
+    autoApplyWelcomeCoupon(webManager);
 
   } catch (error) {
     console.error('Checkout initialization failed:', error);
-    showError(error.message || 'Failed to load checkout. Please refresh the page and try again.');
+    showError(error.message || 'Failed to load checkout. Please refresh the page and try again.', webManager);
   } finally {
-    // Hide preloader once everything is loaded (success or failure)
+    // The bindings system handles loading states, no need for a separate preloader
+    // Auth listener is still useful for other purposes
     webManager.auth().listen({}, () => {
-      hidePreloader();
+      console.log('Auth state updated');
     });
   }
 }