Added Paying model

Author: “Ahaanv19”

navigation/favoriteLocations/favoriteLocations.js

@@ -64,6 +64,11 @@ async function populateScores() {
     square.addEventListener('click', () => showPopup(location)); // Add click event to show popup
     grid.appendChild(square);
   });
+  
+  // Update usage display after populating
+  if (typeof window.updateUsageDisplay === 'function') {
+    window.updateUsageDisplay();
+  }
 }
 
 async function filterForUsername(scores) {

navigation/favoriteLocations/favoriteLocations.md

@@ -110,14 +110,57 @@ permalink: /favoriteLocations/
 
 <!-- Main Content (hidden until access verified) -->
 <div id="main-content" style="display: none;">
+  <!-- Usage Display Header -->
+  <div id="usage-header" class="usage-header" style="display: none;">
+    <div class="usage-info">
+      <span id="usage-display" class="usage-text"></span>
+      <a href="{{site.baseurl}}/pricing" id="upgrade-link" class="upgrade-link" style="display: none;">Upgrade for more</a>
+    </div>
+  </div>
   <div id="locations-grid"></div>
   <button id="new-location-button" class="new-location-button">New</button>
 </div>
 
+<style>
+  .usage-header {
+    padding: 12px 20px;
+    margin-bottom: 20px;
+    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+    border-radius: 12px;
+    border: 1px solid #334155;
+  }
+  .usage-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .usage-text {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .usage-text.text-green-400 { color: #4ade80; }
+  .usage-text.text-yellow-400 { color: #facc15; }
+  .usage-text.text-red-400 { color: #f87171; }
+  .upgrade-link {
+    font-size: 13px;
+    color: #22c55e;
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.2s;
+  }
+  .upgrade-link:hover {
+    color: #4ade80;
+    text-decoration: underline;
+  }
+</style>
+
 <!-- Subscription Access Check (runs first) -->
 <script type="module">
   import { pythonURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
 
+  let currentTier = 'free';
+  let locationLimit = 0;
+  
   async function checkAccess() {
     try {
       // Check if user is logged in
@@ -131,6 +174,8 @@ permalink: /favoriteLocations/
 
       // Admins have full access
       if (user.role === 'Admin') {
+        currentTier = 'admin';
+        locationLimit = Infinity;
         showContent();
         return;
       }
@@ -139,7 +184,14 @@ permalink: /favoriteLocations/
       const subResponse = await fetch(`${pythonURI}/api/subscription`, fetchOptions);
       if (subResponse.ok) {
         const subscription = await subResponse.json();
-        if (subscription.tier === 'plus' || subscription.tier === 'pro') {
+        currentTier = subscription.tier || 'free';
+        
+        if (currentTier === 'plus') {
+          locationLimit = 10;
+          showContent();
+          return;
+        } else if (currentTier === 'pro') {
+          locationLimit = Infinity;
           showContent();
           return;
         }
@@ -158,8 +210,19 @@ permalink: /favoriteLocations/
     document.getElementById('access-loading').style.display = 'none';
     document.getElementById('access-denied').style.display = 'none';
     document.getElementById('main-content').style.display = 'block';
-    // Load the main functionality
-    import('{{site.baseurl}}/navigation/favoriteLocations/favoriteLocations.js');
+    
+    // Show usage header
+    document.getElementById('usage-header').style.display = 'block';
+    
+    // Load the main functionality and then update usage display
+    import('{{site.baseurl}}/navigation/favoriteLocations/favoriteLocations.js').then(() => {
+      // Wait a bit for locations to load, then update display
+      setTimeout(updateUsageDisplay, 500);
+    });
+    
+    // Store tier info globally for the usage display
+    window.favoriteLocationsTier = currentTier;
+    window.favoriteLocationsLimit = locationLimit;
   }
 
   function showAccessDenied() {
@@ -168,5 +231,35 @@ permalink: /favoriteLocations/
     document.getElementById('main-content').style.display = 'none';
   }
 
+  // Update the usage display based on current locations count
+  window.updateUsageDisplay = function() {
+    const grid = document.getElementById('locations-grid');
+    const usageDisplay = document.getElementById('usage-display');
+    const upgradeLink = document.getElementById('upgrade-link');
+    const tier = window.favoriteLocationsTier;
+    const limit = window.favoriteLocationsLimit;
+    
+    // Count current locations
+    const locationCount = grid ? grid.querySelectorAll('.location-square').length : 0;
+    
+    if (tier === 'admin' || tier === 'pro' || limit === Infinity) {
+      usageDisplay.textContent = `📍 ${locationCount} locations saved • Unlimited`;
+      usageDisplay.className = 'usage-text text-green-400';
+      upgradeLink.style.display = 'none';
+    } else if (tier === 'plus') {
+      const remaining = limit - locationCount;
+      const colorClass = remaining <= 2 ? 'text-red-400' : remaining <= 5 ? 'text-yellow-400' : 'text-green-400';
+      usageDisplay.textContent = `📍 ${locationCount}/${limit} locations saved`;
+      usageDisplay.className = `usage-text ${colorClass}`;
+      
+      if (remaining <= 3) {
+        upgradeLink.style.display = 'inline';
+        upgradeLink.textContent = remaining <= 0 ? 'Upgrade for unlimited' : 'Upgrade for unlimited';
+      } else {
+        upgradeLink.style.display = 'none';
+      }
+    }
+  };
+  
   checkAccess();
 </script>

navigation/findBestRoute/map.js

@@ -4,6 +4,20 @@ import polyline from 'https://cdn.skypack.dev/@mapbox/polyline';
 const apiUrl = `${pythonURI}/api/get_routes`;
 const routeUsageUrl = `${pythonURI}/api/subscription/route-usage`;
 
+// Get the base URL from the page (set by Jekyll)
+function getBaseUrl() {
+  const trigger = document.querySelector('.trigger');
+  if (trigger && trigger.getAttribute('data-baseurl')) {
+    return trigger.getAttribute('data-baseurl');
+  }
+  // Fallback: try to extract from current URL or use known baseurl
+  const pathMatch = window.location.pathname.match(/^(\/[^\/]+)/);
+  if (pathMatch && pathMatch[1] !== '/route') {
+    return pathMatch[1];
+  }
+  return '/SD_Auto_Frontend'; // Hardcoded fallback
+}
+
 const map = L.map('map').setView([32.7157, -117.1611], 12);
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '© OpenStreetMap contributors',
@@ -65,7 +79,7 @@ function showLimitReachedModal(data) {
             class="flex-1 py-3 px-4 rounded-xl bg-gray-700 text-white font-semibold hover:bg-gray-600 transition-colors">
             Close
           </button>
-          <a href="${data.upgrade_url || '/pricing'}" 
+          <a href="${getBaseUrl()}/pricing" 
             class="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-yellow-500 to-yellow-600 text-white font-semibold text-center hover:from-yellow-600 hover:to-yellow-700 transition-all">
             Upgrade Now
           </a>