keep selected plan when changing service level

hub/services/static/js/price-calculator/price-calculator.js

@@ -88,6 +88,9 @@ class PriceCalculator {
 
         // Initialize instances slider
         this.uiManager.updateInstancesSlider(this.domManager, this.pricingDataManager);
+
+        // Setup service level event listeners after UI is created
+        this.setupServiceLevelEventListeners();
     }
 
     // Setup event listeners for calculator controls
@@ -166,20 +169,81 @@ class PriceCalculator {
         window.addEventListener('addon-changed', () => {
             this.updatePricing();
         });
+    }
 
+    // Setup service level event listeners (called after UI setup)
+    setupServiceLevelEventListeners() {
         // Service level change listener
         const serviceLevelInputs = this.domManager.get('serviceLevelInputs');
+
         if (serviceLevelInputs) {
-            serviceLevelInputs.forEach(input => {
+            serviceLevelInputs.forEach((input, index) => {
                 input.addEventListener('change', () => {
-                    // Update plan dropdown for new service level
+                    try {
-                    this.planManager.populatePlanDropdown(this.domManager);
+                        // Check if a plan is currently selected before updating
+                        const planSelect = this.domManager.get('planSelect');
+                        const currentlySelectedPlan = planSelect?.value ? JSON.parse(planSelect.value) : null;
 
-                    // Update addons for new service level
+                        // Update instances slider for the new service level (functionality from UIManager)
-                    this.addonManager.updateAddons(this.domManager);
+                        this.uiManager.updateInstancesSlider(this.domManager, this.pricingDataManager);
 
-                    // Update pricing
+                        // Update plan dropdown for new service level
-                    this.updatePricing();
+                        this.planManager.populatePlanDropdown(this.domManager);
+
+                        // Update addons for new service level first
+                        this.addonManager.updateAddons(this.domManager);
+
+                        // If a plan was previously selected, try to maintain selection
+                        if (currentlySelectedPlan && planSelect) {
+                            // Find the same plan in the new dropdown options
+                            const options = planSelect.querySelectorAll('option');
+                            let planFound = false;
+                            let matchingPlan = null;
+
+                            for (const option of options) {
+                                if (option.value) {
+                                    try {
+                                        const optionPlan = JSON.parse(option.value);
+
+                                        // First, try to match by exact plan name
+                                        if (optionPlan.compute_plan === currentlySelectedPlan.compute_plan) {
+                                            matchingPlan = optionPlan;
+                                            planFound = true;
+                                            break;
+                                        }
+                                    } catch (e) {
+                                        console.warn('Error parsing plan option:', e);
+                                    }
+                                }
+                            }
+
+                            if (planFound && matchingPlan) {
+                                // Set the plan selection
+                                planSelect.value = JSON.stringify(matchingPlan);
+
+                                // Maintain the UI state for manually selected plan
+                                this.planManager.updateSlidersForPlan(matchingPlan, this.domManager);
+                                this.uiManager.fadeOutSliders(this.domManager, ['cpu', 'memory']);
+
+                                // Update pricing with the selected plan
+                                this.updatePricingWithPlan(matchingPlan);
+                            } else {
+                                planSelect.value = '';
+                                // Reset sliders to smart defaults and fade them back in
+                                this.domManager.setSmartDefaults(this.pricingDataManager);
+                                this.uiManager.fadeInSliders(this.domManager, ['cpu', 'memory']);
+                                // Update pricing in auto-select mode
+                                this.updatePricing();
+                            }
+                        } else {
+                            // No plan was previously selected, just update pricing
+                            this.updatePricing();
+                        }
+                    } catch (error) {
+                        console.error('Error in service level change handler:', error);
+                        // Fallback to basic functionality if there's an error
+                        this.updatePricing();
+                    }
                 });
             });
         }

hub/services/static/js/price-calculator/ui-manager.js

@@ -215,8 +215,9 @@ class UIManager {
         // Update the serviceLevelInputs reference
         domManager.elements.serviceLevelInputs = document.querySelectorAll('input[name="serviceLevel"]');
 
-        // Set up event listeners for the dynamically created service level inputs
+        // Note: Event listeners are now handled in price-calculator.js setupEventListeners method
-        this.setupServiceLevelEventListeners(domManager, pricingDataManager);
+        // to properly preserve plan selection when service level changes
+        // this.setupServiceLevelEventListeners(domManager, pricingDataManager);
     }
 
     // Setup event listeners for service level inputs