From 6584bf5a87e0237ad4b0ae4488634960da2e3ed4 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Mon, 6 Apr 2026 22:19:07 +0530
Subject: [PATCH] implement order fulfillment selection and Uber delivery
 integration on checkout page and update docker-compose container naming.

---
 .../views/checkout_address.xml                | 154 +++++++++---------
 1 file changed, 81 insertions(+), 73 deletions(-)

diff --git a/addons/dine360_theme_chennora/views/checkout_address.xml b/addons/dine360_theme_chennora/views/checkout_address.xml
index c6e458c..0fb0a92 100644
--- a/addons/dine360_theme_chennora/views/checkout_address.xml
+++ b/addons/dine360_theme_chennora/views/checkout_address.xml
@@ -13,16 +13,15 @@
         </xpath>
     </template>
 
-    <!-- 2. Hide Uber fee from cart product list -->
+    <!-- 2. Hide Uber fee from cart summary -->
     <template id="chennora_cart_summary_uber_hide" inherit_id="website_sale.checkout_layout" name="Chennora Cart Summary Uber Hide">
         <xpath expr="//table[@id='cart_products']//tr" position="attributes">
             <attribute name="t-if">line.product_id.name != 'Uber Delivery Fee'</attribute>
         </xpath>
     </template>
 
-    <!-- 3. MAIN FORM CHANGES: Morphing Address Form (Pickup vs Delivery) -->
+    <!-- 3. Morphing Address Form (Pickup vs Delivery) -->
     <template id="chennora_address_morphing" inherit_id="website_sale.address" name="Chennora Address Morphing" priority="99">
-        <!-- Add the Selection Cards at the top of the form -->
         <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%; }
@@ -34,7 +33,7 @@
                 .section-header { font-weight: bold; margin: 25px 0 15px 0; padding-bottom: 5px; border-bottom: 1px solid #eee; }
             </style>
 
-            <div class="row mb-4 g-3">
+            <div class="row mb-4 g-3 mt-2">
                 <div class="col-6">
                     <div id="card_delivery" class="order-type-card active" onclick="setOrderType('delivery')">
                         <i class="fa fa-truck"></i>
@@ -53,90 +52,99 @@
             
             <input type="hidden" name="fulfilment_type" id="hidden_fulfilment_type" value="delivery"/>
 
-            <!-- Select Time Section -->
-            <div class="row mb-4">
-                <div class="col-12">
-                    <div class="section-header">Select Time</div>
-                    <input type="datetime-local" name="delivery_time" id="delivery_time" class="form-control" required="required"/>
-                </div>
+            <div class="section-header">Select Time</div>
+            <div class="mb-4">
+                <input type="datetime-local" name="delivery_time" id="delivery_time_input" class="form-control"/>
+                <p class="text-muted small mt-1">Please select your preferred time.</p>
             </div>
 
-            <div class="section-header">Contact &amp; Details</div>
-            
             <div id="uber_message" class="alert d-none my-3" role="alert"></div>
+            <div id="address_section_label" class="section-header">Delivery Address Details</div>
         </xpath>
 
-        <!-- Wrap Address Fields for Toggling -->
-        <xpath expr="//div[@id='div_street']" position="before">
-            <div id="address_fields_wrapper">
-                <div class="section-header">Address Details</div>
-        </xpath>
-        
-        <xpath expr="//div[@id='div_country']" position="after">
-            </div> <!-- End of address_fields_wrapper -->
-        </xpath>
+        <!-- No wrapper needed, we use JS to target the div_street, div_city, etc. -->
 
-        <!-- Script for Dynamic UI and Uber Integration -->
         <xpath expr="//form" position="after">
             <script type="text/javascript">
                 (function() {
-                    const wrap = document.getElementById('address_fields_wrapper');
-                    const hiddenType = document.getElementById('hidden_fulfilment_type');
-                    const msgDiv = document.getElementById('uber_message');
-                    const btn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
-                    
-                    window.setOrderType = function(type) {
-                        hiddenType.value = type;
-                        document.getElementById('card_delivery').classList.toggle('active', type === 'delivery');
-                        document.getElementById('card_pickup').classList.toggle('active', type === 'pickup');
+                    function initAddressLogic() {
+                        const hiddenType = document.getElementById('hidden_fulfilment_type');
+                        const msgDiv = document.getElementById('uber_message');
+                        const addressHeader = document.getElementById('address_section_label');
+                        const btn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
                         
-                        // Toggle address fields
-                        if (type === 'pickup') {
-                            wrap.classList.add('d-none');
-                            msgDiv.classList.add('d-none');
-                            if (btn) btn.disabled = false;
-                        } else {
-                            wrap.classList.remove('d-none');
-                            checkUber();
-                        }
-                    };
+                        // Address fields to toggle
+                        const addressDivs = [
+                            document.getElementById('div_street'),
+                            document.getElementById('div_city'),
+                            document.getElementById('div_zip'),
+                            document.getElementById('div_country'),
+                            document.querySelector('div[id*="div_state"]') // Handle potential different IDs for state
+                        ].filter(el => el != null);
 
-                    function checkUber() {
-                        if (hiddenType.value !== 'delivery') return;
-                        
-                        const street = document.querySelector('input[name="street"]').value;
-                        const zip = document.querySelector('input[name="zip"]').value;
-                        
-                        if (!street || !zip) return;
-
-                        const addressData = {
-                            street: street,
-                            city: document.querySelector('input[name="city"]').value,
-                            zip: zip,
-                            country: document.querySelector('select[name="country_id"] option:checked')?.text || 'Canada'
-                        };
-
-                        fetch('/shop/uber/quote', {
-                            method: 'POST', headers: {'Content-Type': 'application/json'},
-                            body: JSON.stringify({ params: { address_data: addressData } })
-                        }).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: " + data.result.fee + "$";
+                        window.setOrderType = function(type) {
+                            hiddenType.value = type;
+                            document.getElementById('card_delivery').classList.toggle('active', type === 'delivery');
+                            document.getElementById('card_pickup').classList.toggle('active', type === 'pickup');
+                            
+                            if (type === 'pickup') {
+                                addressDivs.forEach(div => div.classList.add('d-none'));
+                                if (addressHeader) addressHeader.classList.add('d-none');
+                                if (msgDiv) msgDiv.classList.add('d-none');
                                 if (btn) btn.disabled = false;
                             } else {
-                                msgDiv.classList.remove('d-none', 'alert-success');
-                                msgDiv.classList.add('alert-danger');
-                                msgDiv.innerText = "✕ Not covered: " + (data.result?.error || "Area not supported.");
-                                if (btn) btn.disabled = true;
+                                addressDivs.forEach(div => div.classList.remove('d-none'));
+                                if (addressHeader) addressHeader.classList.remove('d-none');
+                                checkUber();
                             }
-                        });
-                    }
+                        };
 
-                    // Watch address fields
-                    document.querySelector('input[name="street"]')?.addEventListener('blur', checkUber);
-                    document.querySelector('input[name="zip"]')?.addEventListener('blur', checkUber);
+                        function checkUber() {
+                            if (hiddenType.value !== 'delivery') return;
+                            const street = document.querySelector('input[name="street"]')?.value;
+                            const zip = document.querySelector('input[name="zip"]')?.value;
+                            if (!street || !zip) return;
+
+                            const addressData = {
+                                street: street,
+                                city: document.querySelector('input[name="city"]')?.value,
+                                zip: zip,
+                                country: document.querySelector('select[name="country_id"] option:checked')?.text || 'Canada'
+                            };
+
+                            fetch('/shop/uber/quote', {
+                                method: 'POST', headers: {'Content-Type': 'application/json'},
+                                body: JSON.stringify({ params: { address_data: addressData } })
+                            }).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 = "✓ Uber covers this area! Delivery fee: " + data.result.fee + "$";
+                                    if (btn) btn.disabled = false;
+                                } else {
+                                    msgDiv.classList.remove('d-none', 'alert-success');
+                                    msgDiv.classList.add('alert-danger');
+                                    msgDiv.innerText = "✕ Not covered: " + (data.result?.error || "Area not supported.");
+                                    if (btn) btn.disabled = true;
+                                }
+                            });
+                        }
+
+                        // Event listeners for Uber check
+                        const streetInput = document.querySelector('input[name="street"]');
+                        const zipInput = document.querySelector('input[name="zip"]');
+                        if (streetInput) streetInput.addEventListener('blur', checkUber);
+                        if (zipInput) zipInput.addEventListener('blur', checkUber);
+
+                        // Initial state
+                        setOrderType('delivery');
+                    }
+                    
+                    if (document.readyState === 'loading') {
+                        document.addEventListener('DOMContentLoaded', initAddressLogic);
+                    } else {
+                        initAddressLogic();
+                    }
                 })();
             </script>
         </xpath>