odoo-chennora-pos/addons/dine360_theme_chennora/views/checkout_address.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!-- Custom Address Form - Remove Company/VAT and Rename Zip to Postal Code -->
    <!-- Increased priority to 99 to ensure it overrides other theme or base overrides -->
    <template id="chennora_address_custom" inherit_id="website_sale.address" name="Chennora Address Custom" priority="99">
        
        <!-- 1. Remove Company Name Field -->
        <xpath expr="//div[label[@for='company_name']]" position="replace"/>

        <!-- 2. Remove VAT Field -->
        <xpath expr="//div[label[@for='vat']]" position="replace"/>
        
        <!-- 3. Remove VAT Warning Message if it exists (Optional/Resilient) -->
        <!-- <xpath expr="//small[contains(text(), 'VAT number is not allowed')]/.." position="replace"/> -->

        <!-- 4. Rename ALL Zip Code Labels to Postal Code (Handles both layout versions) -->
        <xpath expr="(//label[@for='zip'])[1]" position="replace">
            <label class="col-form-label label-optional" for="zip">Postal Code</label>
        </xpath>
        <xpath expr="(//label[@for='zip'])[2]" position="replace">
            <label class="col-form-label label-optional" for="zip">Postal Code</label>
        </xpath>
        
        <!-- 6. Update Placeholder for Zip Input -->
        <xpath expr="//input[@name='zip']" position="attributes">
            <attribute name="placeholder">Postal Code</attribute>
        </xpath>



        <!-- 8. Change "Shipping address" / "Billing address" title to just "Address Details" -->
        <xpath expr="//h3[contains(., 'address')]" position="replace">
            <h3 class="mb-3">Address Details</h3>
        </xpath>

        <!-- Pickup / Delivery Order Type Toggle -->
        <xpath expr="//form[contains(@class, 'checkout_autoformat')]" position="before">
            <div class="checkout-order-type-selector mb-5 mt-4">
                <style>
                    .order-type-card {
                        border: 2px solid #e9ecef;
                        border-radius: 10px;
                        padding: 15px;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        background: #fff;
                    }
                    .order-type-card:hover {
                        border-color: #FECD4F;
                        background: #fffbf0;
                    }
                    .order-type-input:checked + .order-type-card {
                        border-color: #2BB1A5;
                        background: #f0fdfc;
                        box-shadow: 0 4px 15px rgba(43, 177, 165, 0.15);
                    }
                    .order-type-icon {
                        width: 50px;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #f8f9fa;
                        border-radius: 50%;
                        font-size: 20px;
                        color: #04121D;
                    }
                    .order-type-input:checked + .order-type-card .order-type-icon {
                        background: #2BB1A5;
                        color: #fff;
                    }
                    
                    /* Aggressive hiding for pickup fields to prevent empty space */
                    form.is-pickup-mode .div_street,
                    form.is-pickup-mode .div_street2,
                    form.is-pickup-mode .div_city,
                    form.is-pickup-mode .div_zip,
                    form.is-pickup-mode .div_country,
                    form.is-pickup-mode .div_state,
                    form.is-pickup-mode div:has(> label[for="street"]),
                    form.is-pickup-mode div:has(> label[for="street2"]),
                    form.is-pickup-mode div:has(> label[for="city"]),
                    form.is-pickup-mode div:has(> label[for="zip"]),
                    form.is-pickup-mode div:has(> label[for="country_id"]),
                    form.is-pickup-mode div:has(> label[for="state_id"]) {
                        display: none !important;
                        margin: 0 !important;
                        padding: 0 !important;
                        height: 0 !important;
                        opacity: 0 !important;
                        overflow: hidden !important;
                    }
                </style>
                <div class="row align-items-center justify-content-center">
                    <div class="col-md-6 mb-3 mb-md-0">
                        <input type="radio" name="delivery_method_switch" id="method_delivery" class="d-none order-type-input" value="delivery" checked="checked"/>
                        <label for="method_delivery" class="order-type-card w-100 m-0">
                            <div class="order-type-icon">
                                <i class="fa fa-truck"></i>
                            </div>
                            <div>
                                <h5 class="mb-1 fw-bold" style="color: #04121D;">Delivery</h5>
                                <small class="text-muted">Deliver to my address</small>
                            </div>
                        </label>
                    </div>
                    <div class="col-md-6">
                        <input type="radio" name="delivery_method_switch" id="method_pickup" class="d-none order-type-input" value="pickup"/>
                        <label for="method_pickup" class="order-type-card w-100 m-0">
                            <div class="order-type-icon">
                                <i class="fa fa-shopping-bag"></i>
                            </div>
                            <div>
                                <h5 class="mb-1 fw-bold" style="color: #04121D;">Store Pickup</h5>
                                <small class="text-muted">Pick up at the restaurant</small>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            
            <script type="text/javascript">
                document.addEventListener("DOMContentLoaded", function() {
                    const typeDelivery = document.getElementById('method_delivery');
                    const typePickup = document.getElementById('method_pickup');
                    const streetInput = document.querySelector('input[name="street"]');
                    const cityInput = document.querySelector('input[name="city"]');
                    const zipInput = document.querySelector('input[name="zip"]');
                    const countrySelect = document.querySelector('select[name="country_id"]');
                    const stateSelect = document.querySelector('select[name="state_id"]');
                    const formElement = document.querySelector('form.checkout_autoformat');
                    
                    const allRequiredInputs = [streetInput, cityInput, zipInput, countrySelect, stateSelect];
                    
                    function applyMethod() {
                        if(typePickup.checked) {
                            if(formElement) formElement.classList.add('is-pickup-mode');
                            
                            // Remove "required" so HTML5 validation doesn't block submission
                            allRequiredInputs.forEach(input => {
                                if (input) {
                                    if (input.hasAttribute('required') || input.dataset.wasRequired) {
                                        input.dataset.wasRequired = 'true';
                                        input.removeAttribute('required');
                                        input.classList.remove('s_website_form_required');
                                    }
                                }
                            });
                            
                            // Add dummy values exactly when they are blank
                            if(streetInput &amp;&amp; !streetInput.value) { streetInput.value = 'In-Store Pickup'; }
                            if(cityInput &amp;&amp; !cityInput.value) { cityInput.value = 'Brampton'; }
                            if(zipInput &amp;&amp; (!zipInput.value || zipInput.value === '')) { zipInput.value = 'L6Y0N1'; }
                            
                            // For country, just select Canada or first available if blank
                            if(countrySelect &amp;&amp; (!countrySelect.value || countrySelect.value == "")) {
                                let caOption = Array.from(countrySelect.options).find(o => o.text.includes('Canada'));
                                if (caOption) {
                                    countrySelect.value = caOption.value;
                                } else if (countrySelect.options.length > 1) {
                                    countrySelect.selectedIndex = 1;
                                }
                                countrySelect.dispatchEvent(new Event('change'));
                            }
                            
                            // Ensure state is set if country is Canada
                            if(stateSelect &amp;&amp; countrySelect &amp;&amp; countrySelect.options[countrySelect.selectedIndex]?.text.includes('Canada')) {
                                if(!stateSelect.value || stateSelect.value == "") {
                                    let onOption = Array.from(stateSelect.options).find(o => o.text.includes('Ontario'));
                                    if(onOption) { stateSelect.value = onOption.value; }
                                    else if (stateSelect.options.length > 1) { stateSelect.selectedIndex = 1; }
                                }
                            }
                        } else {
                            if(formElement) formElement.classList.remove('is-pickup-mode');
                            
                            // Restore required state
                            allRequiredInputs.forEach(input => {
                                if (input &amp;&amp; input.dataset.wasRequired === 'true') {
                                    input.setAttribute('required', 'required');
                                    input.classList.add('s_website_form_required');
                                }
                            });
                            
                            // Revert dummy values so user can type real ones
                            if(streetInput &amp;&amp; streetInput.value === 'In-Store Pickup') { streetInput.value = ''; }
                            if(cityInput &amp;&amp; cityInput.value === 'Brampton') { cityInput.value = ''; }
                            if(zipInput &amp;&amp; zipInput.value === 'L6Y0N1') { zipInput.value = ''; }
                        }
                    }

                    if (typeDelivery &amp;&amp; typePickup) {
                        typeDelivery.addEventListener('change', applyMethod);
                        typePickup.addEventListener('change', applyMethod);
                        
                        // Remember state if validation fails
                        const savedMethod = sessionStorage.getItem('chennora_checkout_method');
                        if (savedMethod === 'pickup') {
                            typePickup.checked = true;
                        }
                        
                        // Initial run
                        applyMethod();

                        typePickup.addEventListener('change', () => sessionStorage.setItem('chennora_checkout_method', 'pickup'));
                        typeDelivery.addEventListener('change', () => sessionStorage.setItem('chennora_checkout_method', 'delivery'));
                    }
                });
            </script>
        </xpath>



        <!-- 9. Remove the "Be aware!" warning box completely -->
        <xpath expr="//div[@role='alert' and .//h4[contains(text(), 'Be aware')]]" position="replace"/>
    </template>

    <!-- Change Billing & Shipping Label on Payment Page -->
    <template id="chennora_address_on_payment_custom" inherit_id="website_sale.address_on_payment" name="Chennora Address Label Custom" priority="99">
        <!-- Customize address display for Pickup orders -->
        <xpath expr="//div[@id='shipping_and_billing']" position="replace">
            <div id="shipping_and_billing" class="mt-4">
                <div>
                    <b t-if="not order.partner_id.street == 'In-Store Pickup'">Billing: </b>
                    <b t-else="">Customer: </b>
                    
                    <t t-if="order.partner_id.street == 'In-Store Pickup'">
                        <span t-out="order.partner_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
                    </t>
                    <t t-else="">
                        <span t-out="order.partner_id" t-options='{"widget": "contact", "fields": ["address", "name", "phone"], "no_marker": True}'/>
                    </t>
                </div>
            </div>
        </xpath>
    </template>

    <!-- Custom Checkout Page - Remove Shipping Section entirely -->
    <template id="chennora_checkout_custom" inherit_id="website_sale.checkout" name="Chennora Checkout Custom" priority="99">
        <!-- 1. Remove the "Billing" sub-header -->
        <xpath expr="//h4[contains(., 'Billing')]" position="replace"/>
        
        <!-- 2. Rename the "Shipping Address" header if it exists -->
        <xpath expr="//h4[contains(., 'Shipping')]" position="replace">
            <h4 class="mb-0">Address Details</h4>
        </xpath>

        <!-- 3. Completely remove the "Shipping" section block -->
        <xpath expr="//t[@groups='account.group_delivery_invoice_address']" position="replace"/>
    </template>

    <!-- Custom Wizard - Rename Shipping step to Billing safely without python errors -->
    <template id="chennora_wizard_checkout_custom" inherit_id="website_sale.wizard_checkout" name="Chennora Wizard Custom" priority="99">
        <xpath expr="//*[@t-call='website.step_wizard']" position="after">
            <script type="text/javascript">
                document.addEventListener("DOMContentLoaded", function() {
                    const steps = document.querySelectorAll('.nav-wizard .nav-item .nav-link .text-truncate, .nav-wizard .text-truncate');
                    steps.forEach(node => {
                        if (node.innerText.trim() === 'Shipping') {
                            node.innerText = 'Billing';
                        }
                    });
                });
            </script>
        </xpath>
    </template>

    <!-- Custom Address Kanban - Hide address for Pickup in the cards -->
    <template id="chennora_address_kanban_custom" inherit_id="website_sale.address_kanban" name="Chennora Address Kanban Custom" priority="99">
        <xpath expr="//*[@t-options]" position="attributes">
            <attribute name="t-options">
                {'widget': 'contact', 'fields': contact.street == 'In-Store Pickup' and ['name', 'phone'] or ['address', 'name', 'phone'], 'no_marker': True}
            </attribute>
        </xpath>
    </template>
</odoo>