From dd194bd83d29408b88fc39ad9797b73f36fa4520 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Mon, 6 Apr 2026 22:14:51 +0530
Subject: [PATCH] implement checkout morphing for delivery/pickup and add order
 fulfillment fields to sale orders

---
 .../models/sale_order.py                      |   2 +-
 .../views/checkout_address.xml                | 217 +++++++++---------
 2 files changed, 106 insertions(+), 113 deletions(-)

diff --git a/addons/dine360_online_orders/models/sale_order.py b/addons/dine360_online_orders/models/sale_order.py
index d41e11a..253fa2d 100644
--- a/addons/dine360_online_orders/models/sale_order.py
+++ b/addons/dine360_online_orders/models/sale_order.py
@@ -41,7 +41,7 @@ class SaleOrderOnline(models.Model):
         ('interac', 'Interac'),
     ], string='Payment Option', tracking=True)
 
-#     delivery_time = fields.Datetime(string='Requested Delivery Time', tracking=True)
+    delivery_time = fields.Datetime(string='Requested Delivery Time', tracking=True)
 
     telephone_number = fields.Char('Telephone Number')
 
diff --git a/addons/dine360_theme_chennora/views/checkout_address.xml b/addons/dine360_theme_chennora/views/checkout_address.xml
index 7845f63..c6e458c 100644
--- a/addons/dine360_theme_chennora/views/checkout_address.xml
+++ b/addons/dine360_theme_chennora/views/checkout_address.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <!-- Display Uber fee in the total summary -->
+    <!-- 1. Global Order Total Display -->
     <template id="chennora_total_uber_display" inherit_id="website_sale.total" name="Chennora Total Uber Display">
         <xpath expr="//tr[@id='order_total_untaxed']" position="after">
             <t t-set="uber_line" t-value="website_sale_order.order_line.filtered(lambda l: l.product_id.name == 'Uber Delivery Fee')"/>
@@ -13,137 +13,130 @@
         </xpath>
     </template>
 
+    <!-- 2. Hide Uber fee from cart product list -->
     <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>
 
-    <!-- Enhanced Checkout: Pickup vs Delivery Selector -->
-    <template id="chennora_checkout_custom" inherit_id="website_sale.checkout" name="Chennora Checkout Custom" priority="99">
-        <!-- 1. Add Order Type Selector (Pickup vs Delivery) -->
-        <xpath expr="//h3" position="before">
-            <div class="row mb-4">
-                <div class="col-12 text-center">
-                    <div class="btn-group btn-group-lg w-100" role="group" aria-label="Order Type Selector">
-                        <input type="radio" class="btn-check" name="fulfilment_type" id="type_pickup" value="pickup" 
-                               t-att-checked="'checked' if order.fulfilment_type == 'pickup' else None"/>
-                        <label class="btn btn-outline-primary py-3 fw-bold shadow-none" for="type_pickup" style="flex: 1;">🏃 STORE PICKUP</label>
+    <!-- 3. MAIN FORM CHANGES: 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%; }
+                .order-type-card.active { border-color: #00A67E; background-color: #f0fffb; }
+                .order-type-card i { font-size: 2rem; margin-bottom: 10px; color: #666; }
+                .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; }
+                .section-header { font-weight: bold; margin: 25px 0 15px 0; padding-bottom: 5px; border-bottom: 1px solid #eee; }
+            </style>
 
-                        <input type="radio" class="btn-check" name="fulfilment_type" id="type_delivery" value="delivery" 
-                               t-att-checked="'checked' if order.fulfilment_type == 'delivery' else None"/>
-                        <label class="btn btn-outline-primary py-3 fw-bold shadow-none" for="type_delivery" style="flex: 1;">🚗 UBER DELIVERY</label>
+            <div class="row mb-4 g-3">
+                <div class="col-6">
+                    <div id="card_delivery" class="order-type-card active" onclick="setOrderType('delivery')">
+                        <i class="fa fa-truck"></i>
+                        <h5>Delivery</h5>
+                        <p>Deliver to my address</p>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div id="card_pickup" class="order-type-card" onclick="setOrderType('pickup')">
+                        <i class="fa fa-shopping-basket"></i>
+                        <h5>Store Pickup</h5>
+                        <p>Pick up at the restaurant</p>
                     </div>
                 </div>
             </div>
+            
+            <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>
+
+            <div class="section-header">Contact &amp; Details</div>
+            
+            <div id="uber_message" class="alert d-none my-3" role="alert"></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>
         
-        <!-- UI cleanup from previous steps -->
-        <xpath expr="//h4[contains(., 'Shipping')]/ancestor::div[1]" position="attributes">
-            <attribute name="style">display: none !important;</attribute>
-            <attribute name="class" add="d-none" separator=" "/>
-        </xpath>
-        <xpath expr="//h4[contains(., 'Billing')]/ancestor::div[1]" position="attributes">
-            <attribute name="class" add="col-12" remove="col-md-6" separator=" "/>
-        </xpath>
-        <xpath expr="//h4[contains(., 'Billing')]" position="replace">
-            <h3 class="mb-4">Delivery Address</h3>
+        <xpath expr="//div[@id='div_country']" position="after">
+            </div> <!-- End of address_fields_wrapper -->
         </xpath>
 
-        <!-- Combined Script for Pickup/Delivery Toggle and Uber Quote -->
-        <xpath expr="//h3" position="after">
-            <div id="uber_error" class="alert alert-danger d-none my-3" role="alert"></div>
+        <!-- Script for Dynamic UI and Uber Integration -->
+        <xpath expr="//form" position="after">
             <script type="text/javascript">
                 (function() {
-                    function initFulfilmentLogic() {
-                        const btn = document.querySelector('a[name="website_sale_main_button"]') || 
-                                    document.querySelector('.oe_cart .btn-primary') ||
-                                    document.querySelector('.btn-primary[href*="/payment"]');
-                        const errorDiv = document.getElementById('uber_error');
-                        const pickupRadio = document.getElementById('type_pickup');
-                        const deliveryRadio = document.getElementById('type_delivery');
+                    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');
                         
-                        if (!btn || !pickupRadio || !deliveryRadio) {
-                            setTimeout(initFulfilmentLogic, 500);
-                            return;
-                        }
-
-                        const updateButton = (state, text = null) => {
-                            if (state === 'disabled') {
-                                btn.classList.add('disabled', 'btn-secondary');
-                                btn.classList.remove('btn-primary');
-                                btn.style.pointerEvents = 'none';
-                            } else {
-                                btn.classList.remove('disabled', 'btn-secondary');
-                                btn.classList.add('btn-primary');
-                                btn.style.pointerEvents = 'auto';
-                            }
-                        };
-
-                        const runUberQuote = () => {
-                            const addressData = {
-                                street: "<t t-esc='order.partner_invoice_id.street'/>",
-                                city: "<t t-esc='order.partner_invoice_id.city'/>",
-                                zip: "<t t-esc='order.partner_invoice_id.zip'/>",
-                                country: "<t t-esc='order.partner_invoice_id.country_id.name'/>"
-                            };
-
-                            if (!addressData.street || !addressData.zip) {
-                                updateButton('enabled'); // Fallback if no addr
-                                return;
-                            }
-
-                            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) {
-                                    updateButton('enabled');
-                                    if (errorDiv) errorDiv.classList.add('d-none');
-                                    const hasFee = "<t t-esc="any(l.product_id.name == 'Uber Delivery Fee' for l in website_sale_order.order_line) and 'true' or 'false'"/>" === "true";
-                                    if (!hasFee &amp;&amp; window.location.search.indexOf('quoted=1') === -1) {
-                                        window.location.href = window.location.pathname + '?quoted=1';
-                                    }
-                                } else {
-                                    updateButton('disabled');
-                                    if (errorDiv) {
-                                        errorDiv.innerText = (data.result &amp;&amp; data.result.error) ? data.result.error : "Uber delivery not available.";
-                                        errorDiv.classList.remove('d-none');
-                                    }
-                                }
-                            });
-                        };
-
-                        const handleToggle = (type) => {
-                            // Update server state via anonymous JSON-RPC call
-                            fetch('/shop_online_details/update_details', {
-                                method: 'POST',
-                                headers: {'Content-Type': 'application/json'},
-                                body: JSON.stringify({ params: { fulfilment_type: type } })
-                            });
-
-                            if (type === 'pickup') {
-                                updateButton('enabled');
-                                if (errorDiv) errorDiv.classList.add('d-none');
-                            } else {
-                                updateButton('disabled');
-                                runUberQuote();
-                            }
-                        };
-
-                        pickupRadio.addEventListener('change', () => handleToggle('pickup'));
-                        deliveryRadio.addEventListener('change', () => handleToggle('delivery'));
-
-                        // Initial Run
-                        if (deliveryRadio.checked) {
-                            updateButton('disabled');
-                            runUberQuote();
+                        // Toggle address fields
+                        if (type === 'pickup') {
+                            wrap.classList.add('d-none');
+                            msgDiv.classList.add('d-none');
+                            if (btn) btn.disabled = false;
                         } else {
-                            updateButton('enabled');
+                            wrap.classList.remove('d-none');
+                            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 = "✓ Covered! Delivery charge: " + 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;
+                            }
+                        });
                     }
-                    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initFulfilmentLogic); } else { initFulfilmentLogic(); }
+
+                    // Watch address fields
+                    document.querySelector('input[name="street"]')?.addEventListener('blur', checkUber);
+                    document.querySelector('input[name="zip"]')?.addEventListener('blur', checkUber);
                 })();
             </script>
         </xpath>