diff --git a/hub/services/static/js/price-calculator.js b/hub/services/static/js/price-calculator.js index 71f56d3..2bdb026 100644 --- a/hub/services/static/js/price-calculator.js +++ b/hub/services/static/js/price-calculator.js @@ -54,6 +54,7 @@ class PriceCalculator { // Addon elements this.addonsContainer = document.getElementById('addonsContainer'); this.addonPricingContainer = document.getElementById('addonPricingContainer'); + this.managedServiceIncludesContainer = document.getElementById('managedServiceIncludesContainer'); // Result display elements this.planMatchStatus = document.getElementById('planMatchStatus'); @@ -1832,6 +1833,59 @@ Please contact me with next steps for ordering this configuration.`; } } +// Override the updateAddonPricingDisplay method to use improved layout +PriceCalculator.prototype.updateAddonPricingDisplay = function(mandatoryAddons, selectedOptionalAddons) { + // Handle mandatory addons - show them in the managed service includes section + if (this.managedServiceIncludesContainer) { + this.managedServiceIncludesContainer.innerHTML = ''; + + if (mandatoryAddons && mandatoryAddons.length > 0) { + mandatoryAddons.forEach(addon => { + const addonRow = document.createElement('div'); + addonRow.className = 'd-flex justify-content-between mb-1 small text-success'; + addonRow.innerHTML = ` + ${addon.name} + (CHF ${addon.price}) + `; + this.managedServiceIncludesContainer.appendChild(addonRow); + }); + } else { + // Show basic compute resources when no specific addons + const basicRow = document.createElement('div'); + basicRow.className = 'small text-success mb-1'; + basicRow.innerHTML = ` + Compute resources & management + `; + this.managedServiceIncludesContainer.appendChild(basicRow); + } + } + + // Handle optional addons - show them in the main addon pricing container + if (!this.addonPricingContainer) return; + + // Clear existing addon pricing display (only for optional addons now) + this.addonPricingContainer.innerHTML = ''; + + // Add optional addons to pricing breakdown (these are added to total) + if (selectedOptionalAddons && selectedOptionalAddons.length > 0) { + // Add a header for optional addons + const optionalHeader = document.createElement('div'); + optionalHeader.className = 'small text-muted mb-2'; + optionalHeader.innerHTML = 'Additional add-ons:'; + this.addonPricingContainer.appendChild(optionalHeader); + + selectedOptionalAddons.forEach(addon => { + const addonRow = document.createElement('div'); + addonRow.className = 'd-flex justify-content-between mb-2'; + addonRow.innerHTML = ` + Add-on: ${addon.name} + CHF ${addon.price} + `; + this.addonPricingContainer.appendChild(addonRow); + }); + } +}; + // Initialize calculator when DOM is loaded document.addEventListener('DOMContentLoaded', () => { // Only initialize if we're on an offering detail page with pricing calculator diff --git a/hub/services/templates/services/offering_detail.html b/hub/services/templates/services/offering_detail.html index 0a3a245..18aa19f 100644 --- a/hub/services/templates/services/offering_detail.html +++ b/hub/services/templates/services/offering_detail.html @@ -348,18 +348,41 @@