order button implementation to send message

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

@@ -8,6 +8,7 @@ class PriceCalculator {
         this.pricingData = null;
         this.storagePrice = 0.15; // CHF per GB per month
         this.currentOffering = null;
+        this.selectedConfiguration = null;
         this.init();
     }
 
@@ -29,6 +30,9 @@ class PriceCalculator {
         if (this.currentOffering) {
             this.loadPricingData();
         }
+
+        // Setup order button click handler
+        this.setupOrderButton();
     }
 
     // Initialize DOM element references
@@ -59,6 +63,77 @@ class PriceCalculator {
         this.storagePriceEl = document.getElementById('storagePrice');
         this.storageAmount = document.getElementById('storageAmount');
         this.totalPrice = document.getElementById('totalPrice');
+
+        // Order button
+        this.orderButton = document.querySelector('a[href="#order-form"]');
+    }
+
+    // Setup order button click handler
+    setupOrderButton() {
+        if (this.orderButton) {
+            this.orderButton.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.handleOrderClick();
+            });
+        }
+    }
+
+    // Handle order button click
+    handleOrderClick() {
+        if (this.selectedConfiguration) {
+            // Pre-fill the contact form with configuration details
+            this.prefillContactForm();
+
+            // Scroll to the contact form
+            const contactForm = document.getElementById('order-form');
+            if (contactForm) {
+                contactForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        }
+    }
+
+    // Pre-fill contact form with selected configuration
+    prefillContactForm() {
+        if (!this.selectedConfiguration) return;
+
+        const config = this.selectedConfiguration;
+
+        // Create configuration summary message
+        const configMessage = this.generateConfigurationMessage(config);
+
+        // Find and fill the message textarea in the contact form
+        const messageField = document.querySelector('#order-form textarea[name="message"]');
+        if (messageField) {
+            messageField.value = configMessage;
+        }
+
+        // Store configuration details in hidden field
+        const detailsField = document.querySelector('#order-form input[name="details"]');
+        if (detailsField) {
+            detailsField.value = JSON.stringify({
+                plan: config.planName,
+                vcpus: config.vcpus,
+                memory: config.memory,
+                storage: config.storage,
+                serviceLevel: config.serviceLevel,
+                totalPrice: config.totalPrice
+            });
+        }
+    }
+
+    // Generate human-readable configuration message
+    generateConfigurationMessage(config) {
+        return `I would like to order the following configuration:
+
+Plan: ${config.planName} (${config.planGroup})
+vCPUs: ${config.vcpus}
+Memory: ${config.memory} GB
+Storage: ${config.storage} GB
+Service Level: ${config.serviceLevel}
+
+Total Monthly Price: CHF ${config.totalPrice}
+
+Please contact me with next steps for ordering this configuration.`;
     }
 
     // Load pricing data from API endpoint
@@ -374,6 +449,17 @@ class PriceCalculator {
         if (this.storagePriceEl) this.storagePriceEl.textContent = storagePriceValue.toFixed(2);
         if (this.storageAmount) this.storageAmount.textContent = storage;
         if (this.totalPrice) this.totalPrice.textContent = totalPriceValue.toFixed(2);
+
+        // Store current configuration for order button
+        this.selectedConfiguration = {
+            planName: plan.compute_plan,
+            planGroup: plan.groupName,
+            vcpus: plan.vcpus,
+            memory: plan.ram,
+            storage: storage,
+            serviceLevel: serviceLevel,
+            totalPrice: totalPriceValue.toFixed(2)
+        };
     }
 
     // Show no matching plan found

hub/services/templates/services/embedded_contact_form.html

@@ -73,14 +73,29 @@
             {% endif %}
             
             <div class="mb-3">
-                <label for="id_message" class="form-label">Your Message (Optional)</label>
+                <label for="id_message" class="form-label">
+                    {% if source == "Configuration Order" %}
+                        Configuration Details & Additional Message
+                    {% else %}
+                        Your Message (Optional)
+                    {% endif %}
+                </label>
                 {{ form.message|addclass:"form-control" }}
                 {% if form.message.errors %}
                 <div class="invalid-feedback d-block">{{ form.message.errors }}</div>
                 {% endif %}
+                {% if source == "Configuration Order" %}
+                <small class="form-text text-muted">Your selected configuration will be automatically filled here when you click "Order This Configuration".</small>
+                {% endif %}
             </div>
             
-            <button type="submit" class="btn btn-primary">Send Message</button>
+            <button type="submit" class="btn btn-primary">
+                {% if source == "Configuration Order" %}
+                    Submit Order Request
+                {% else %}
+                    Send Message
+                {% endif %}
+            </button>
         </form>
     </div>
 </div>

hub/services/templates/services/offering_detail.html

@@ -306,10 +306,20 @@
 
                             <!-- Order Button -->
                             <div class="text-center mt-4">
-                                <a href="#interest" class="btn btn-primary btn-lg px-5 py-3 fw-semibold">
+                                <a href="#order-form" class="btn btn-primary btn-lg px-5 py-3 fw-semibold">
                                     <i class="bi bi-cart me-2"></i>Order This Configuration
                                 </a>
                             </div>
+
+                            <!-- Order Form Section -->
+                            <div id="order-form" class="pt-40" style="scroll-margin-top: 30px;">
+                                <h4 class="fs-22 fw-semibold lh-1 mb-12">Order Your Configuration</h4>
+                                <div class="row">
+                                    <div class="col-12">
+                                        {% embedded_contact_form source="Configuration Order" service=offering.service offering_id=offering.id %}
+                                    </div>
+                                </div>
+                            </div>
                         {% elif offering.plans.all %}
                             <!-- Traditional Plans -->
                             <h3 class="fs-24 fw-semibold lh-1 mb-12">Available Plans</h3>
@@ -356,7 +366,7 @@
                             </div>
                         {% endif %}
                         
-                        {% if offering.plans.exists %}
+                        {% if offering.plans.exists and not pricing_data_by_group_and_service_level %}
                         <div id="form" class="pt-40">
                             <h4 class="fs-22 fw-semibold lh-1 mb-12">I'm interested in a plan</h4>
                             <div class="row">