From db88add5f3890a6cd5439b418ebf54d886e45c15 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Mon, 6 Apr 2026 22:25:48 +0530
Subject: [PATCH] implement unified checkout address layout with Uber delivery
 integration and update Docker container naming conventions

---
 .../views/checkout_address.xml                | 86 ++++++++-----------
 1 file changed, 38 insertions(+), 48 deletions(-)

diff --git a/addons/dine360_theme_chennora/views/checkout_address.xml b/addons/dine360_theme_chennora/views/checkout_address.xml
index 3af80b5..25a5cc7 100644
--- a/addons/dine360_theme_chennora/views/checkout_address.xml
+++ b/addons/dine360_theme_chennora/views/checkout_address.xml
@@ -23,12 +23,12 @@
     <!-- 3. MAIN FORM: Optimized Pickup/Delivery Layout -->
     <template id="chennora_address_unified" inherit_id="website_sale.address" name="Chennora Address Unified" priority="99">
         
-        <!-- Remove the default 'Billing address' title -->
-        <xpath expr="//h2[contains(@class, 'oe_cart')]" position="attributes">
+        <!-- Safely hide the 'Billing address' title by targeting any H2/H3 header at the top of the cart -->
+        <xpath expr="//div[contains(@class, 'oe_cart')]//*[self::h2 or self::h3][1]" position="attributes">
             <attribute name="class" add="d-none" separator=" "/>
         </xpath>
 
-        <!-- Inject the Selection Cards and Time Picker -->
+        <!-- Inject Selection Cards -->
         <xpath expr="//form" position="before">
             <style>
                 .order-type-card { border: 2px solid #eee; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; padding: 20px; text-align: center; height: 100%; position: relative; overflow: hidden; }
@@ -37,12 +37,9 @@
                 .order-type-card.active i { color: #00A67E; }
                 .order-type-card h5 { margin-bottom: 5px; font-weight: bold; }
                 .order-type-card p { font-size: 0.85rem; color: #888; margin: 0; }
-                
-                .active-mark { display: none; position: absolute; top: 10px; right: 10px; color: #00A67E; font-size: 1.2rem; }
+                .active-mark { display: none; position: absolute; top: 10px; right: 10px; color: #00A67E; }
                 .order-type-card.active .active-mark { display: block; }
-
                 .section-header { font-weight: bold; margin: 30px 0 15px 0; padding-bottom: 8px; border-bottom: 2px solid #f8f9fa; font-size: 1.1rem; }
-                .uber-feedback { border-radius: 8px; padding: 12px; font-weight: 500; }
             </style>
 
             <div class="row mb-4 g-3 mt-1">
@@ -72,27 +69,23 @@
                 <input type="datetime-local" name="delivery_time" id="delivery_time_input" class="form-control form-control-lg border-0 bg-light" required="required"/>
             </div>
 
-            <div id="uber_message" class="uber-feedback d-none my-3 alert" role="alert"></div>
+            <div id="uber_message" class="alert d-none my-3" role="alert"></div>
             <div id="contact_info_header" class="section-header mt-4"><i class="fa fa-user me-2"></i>Contact Details</div>
         </xpath>
 
-        <!-- Hide the 'Ship to same address' radio button as we are unifying everything -->
-        <xpath expr="//div[label[contains(., 'Ship to the same address')]]" position="attributes">
+        <!-- Hide the 'Ship to same address' section if it exists -->
+        <xpath expr="//label[contains(., 'Ship to the same address')]/ancestor::div[1]" position="attributes">
+            <attribute name="style">display: none !important;</attribute>
             <attribute name="class" add="d-none" separator=" "/>
         </xpath>
 
-        <!-- JS for unified logic -->
+        <!-- Use JS for more reliable UI management -->
         <xpath expr="//form" position="after">
             <script type="text/javascript">
                 (function() {
                     function initUnifiedForm() {
                         const hiddenType = document.getElementById('hidden_fulfilment_type');
                         const msgDiv = document.getElementById('uber_message');
-                        const addressHeader = document.createElement('div');
-                        addressHeader.className = 'section-header';
-                        addressHeader.id = 'address_section_label';
-                        addressHeader.innerHTML = '<i class="fa fa-map-marker me-2"></i>Delivery Address';
-
                         const submitBtn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
                         
                         const addrDivs = [
@@ -103,10 +96,14 @@
                             document.querySelector('div[id*="div_state"]')
                         ].filter(el => el != null);
 
-                        // Insert address header before street div
-                        const streetDiv = document.getElementById('div_street');
-                        if (streetDiv &amp;&amp; !document.getElementById('address_section_label')) {
-                            streetDiv.parentNode.insertBefore(addressHeader, streetDiv);
+                        // Dynamic Address Header
+                        let addrHeader = document.getElementById('dynamic_address_header');
+                        if (!addrHeader &amp;&amp; document.getElementById('div_street')) {
+                            addrHeader = document.createElement('div');
+                            addrHeader.id = 'dynamic_address_header';
+                            addrHeader.className = 'section-header';
+                            addrHeader.innerHTML = '<i class="fa fa-map-marker me-2"></i>Delivery Address';
+                            document.getElementById('div_street').parentNode.insertBefore(addrHeader, document.getElementById('div_street'));
                         }
 
                         window.setOrderType = function(type) {
@@ -114,59 +111,52 @@
                             document.getElementById('card_delivery').classList.toggle('active', type === 'delivery');
                             document.getElementById('card_pickup').classList.toggle('active', type === 'pickup');
                             
-                            const header = document.getElementById('address_section_label');
                             if (type === 'pickup') {
                                 addrDivs.forEach(div => div.classList.add('d-none'));
-                                if (header) header.classList.add('d-none');
+                                if (addrHeader) addrHeader.classList.add('d-none');
                                 if (msgDiv) msgDiv.classList.add('d-none');
                                 if (submitBtn) submitBtn.disabled = false;
                             } else {
                                 addrDivs.forEach(div => div.classList.remove('d-none'));
-                                if (header) header.classList.remove('d-none');
-                                checkUberRange();
+                                if (addrHeader) addrHeader.classList.remove('d-none');
+                                checkUber();
                             }
                         };
 
-                        function checkUberRange() {
+                        function checkUber() {
                             if (hiddenType.value !== 'delivery') return;
-                            const streetInput = document.querySelector('input[name="street"]');
-                            const zipInput = document.querySelector('input[name="zip"]');
-                            
-                            if (!streetInput?.value || !zipInput?.value) return;
-
-                            const data = {
-                                street: streetInput.value,
-                                city: document.querySelector('input[name="city"]')?.value,
-                                zip: zipInput.value,
-                                country: document.querySelector('select[name="country_id"] option:checked')?.text || 'Canada'
-                            };
+                            const street = document.querySelector('input[name="street"]')?.value;
+                            const zip = document.querySelector('input[name="zip"]')?.value;
+                            if (!street || !zip) return;
 
                             fetch('/shop/uber/quote', {
                                 method: 'POST', headers: {'Content-Type': 'application/json'},
-                                body: JSON.stringify({ params: { address_data: data } })
-                            }).then(r => r.json()).then(res => {
-                                if (res.result &amp;&amp; res.result.success) {
+                                body: JSON.stringify({ params: { address_data: {
+                                    street: street,
+                                    city: document.querySelector('input[name="city"]')?.value,
+                                    zip: zip,
+                                    country: document.querySelector('select[name="country_id"] option:checked')?.text || 'Canada'
+                                } } })
+                            }).then(r => r.json()).then(data => {
+                                if (data.result &amp;&amp; data.result.success) {
                                     msgDiv.classList.remove('d-none', 'alert-danger');
                                     msgDiv.classList.add('alert-success');
-                                    msgDiv.innerText = "✓ Covered! Delivery charge: " + res.result.fee + "$";
+                                    msgDiv.innerText = "✓ Covered! Delivery charge: " + data.result.fee + "$";
                                     if (submitBtn) submitBtn.disabled = false;
                                 } else {
                                     msgDiv.classList.remove('d-none', 'alert-success');
                                     msgDiv.classList.add('alert-danger');
-                                    msgDiv.innerText = "✕ Oh no! " + (res.result?.error || "We don't deliver to this area yet.");
+                                    msgDiv.innerText = "✕ Not covered: " + (data.result?.error || "Distance too far.");
                                     if (submitBtn) submitBtn.disabled = true;
                                 }
                             });
                         }
 
-                        document.querySelector('input[name="street"]')?.addEventListener('blur', checkUberRange);
-                        document.querySelector('input[name="zip"]')?.addEventListener('blur', checkUberRange);
-
-                        // Load initial state
-                        if (hiddenType.value === 'pickup') setOrderType('pickup'); else setOrderType('delivery');
+                        document.querySelector('input[name="street"]')?.addEventListener('blur', checkUber);
+                        document.querySelector('input[name="zip"]')?.addEventListener('blur', checkUber);
+                        setOrderType('delivery');
                     }
-                    
-                    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initUnifiedForm); } else { initUnifiedForm(); }
+                    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initUnifiedForm); else initUnifiedForm();
                 })();
             </script>
         </xpath>