admin/odoo-chennora-pos
1
0
Fork 0
forked from alaguraj/odoo-testing-addons
Code Pull Requests Activity

implement unified checkout address layout with Uber delivery integration and update Docker container naming conventions

Browse Source
This commit is contained in:
Alaguraj0361 2026-04-06 22:25:48 +05:30
parent 3a1f6d0729
commit db88add5f3
1 changed files with 38 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
addons/dine360_theme_chennora/views/checkout_address.xml
View File

@ -23,12 +23,12 @@
<!-- 3. MAIN FORM: Optimized Pickup/Delivery Layout --> <!-- 3. MAIN FORM: Optimized Pickup/Delivery Layout -->
<template id="chennora_address_unified" inherit_id="website_sale.address" name="Chennora Address Unified" priority="99"> <template id="chennora_address_unified" inherit_id="website_sale.address" name="Chennora Address Unified" priority="99">
<!-- Remove the default 'Billing address' title --> <!-- Safely hide the 'Billing address' title by targeting any H2/H3 header at the top of the cart -->
<xpath expr="//h2[contains(@class, 'oe_cart')]" position="attributes"> <xpath expr="//div[contains(@class, 'oe_cart')]//*[self::h2 or self::h3][1]" position="attributes">
<attribute name="class" add="d-none" separator=" "/> <attribute name="class" add="d-none" separator=" "/>
</xpath> </xpath>
<!-- Inject the Selection Cards and Time Picker --> <!-- Inject Selection Cards -->
<xpath expr="//form" position="before"> <xpath expr="//form" position="before">
<style> <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; } .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.active i { color: #00A67E; }
.order-type-card h5 { margin-bottom: 5px; font-weight: bold; } .order-type-card h5 { margin-bottom: 5px; font-weight: bold; }
.order-type-card p { font-size: 0.85rem; color: #888; margin: 0; } .order-type-card p { font-size: 0.85rem; color: #888; margin: 0; }
.active-mark { display: none; position: absolute; top: 10px; right: 10px; color: #00A67E; }
.active-mark { display: none; position: absolute; top: 10px; right: 10px; color: #00A67E; font-size: 1.2rem; }
.order-type-card.active .active-mark { display: block; } .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; } .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> </style>
<div class="row mb-4 g-3 mt-1"> <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"/> <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>
<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> <div id="contact_info_header" class="section-header mt-4"><i class="fa fa-user me-2"></i>Contact Details</div>
</xpath> </xpath>
<!-- Hide the 'Ship to same address' radio button as we are unifying everything --> <!-- Hide the 'Ship to same address' section if it exists -->
<xpath expr="//div[label[contains(., 'Ship to the same address')]]" position="attributes"> <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=" "/> <attribute name="class" add="d-none" separator=" "/>
</xpath> </xpath>
<!-- JS for unified logic --> <!-- Use JS for more reliable UI management -->
<xpath expr="//form" position="after"> <xpath expr="//form" position="after">
<script type="text/javascript"> <script type="text/javascript">
(function() { (function() {
function initUnifiedForm() { function initUnifiedForm() {
const hiddenType = document.getElementById('hidden_fulfilment_type'); const hiddenType = document.getElementById('hidden_fulfilment_type');
const msgDiv = document.getElementById('uber_message'); 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 submitBtn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
const addrDivs = [ const addrDivs = [
@ -103,10 +96,14 @@
document.querySelector('div[id*="div_state"]') document.querySelector('div[id*="div_state"]')
].filter(el => el != null); ].filter(el => el != null);
// Insert address header before street div // Dynamic Address Header
const streetDiv = document.getElementById('div_street'); let addrHeader = document.getElementById('dynamic_address_header');
if (streetDiv &amp;&amp; !document.getElementById('address_section_label')) { if (!addrHeader &amp;&amp; document.getElementById('div_street')) {
streetDiv.parentNode.insertBefore(addressHeader, streetDiv); 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) { window.setOrderType = function(type) {
@ -114,59 +111,52 @@
document.getElementById('card_delivery').classList.toggle('active', type === 'delivery'); document.getElementById('card_delivery').classList.toggle('active', type === 'delivery');
document.getElementById('card_pickup').classList.toggle('active', type === 'pickup'); document.getElementById('card_pickup').classList.toggle('active', type === 'pickup');
const header = document.getElementById('address_section_label');
if (type === 'pickup') { if (type === 'pickup') {
addrDivs.forEach(div => div.classList.add('d-none')); 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 (msgDiv) msgDiv.classList.add('d-none');
if (submitBtn) submitBtn.disabled = false; if (submitBtn) submitBtn.disabled = false;
} else { } else {
addrDivs.forEach(div => div.classList.remove('d-none')); addrDivs.forEach(div => div.classList.remove('d-none'));
if (header) header.classList.remove('d-none'); if (addrHeader) addrHeader.classList.remove('d-none');
checkUberRange(); checkUber();
} }
}; };
function checkUberRange() { function checkUber() {
if (hiddenType.value !== 'delivery') return; if (hiddenType.value !== 'delivery') return;
const streetInput = document.querySelector('input[name="street"]'); const street = document.querySelector('input[name="street"]')?.value;
const zipInput = document.querySelector('input[name="zip"]'); const zip = document.querySelector('input[name="zip"]')?.value;
if (!street || !zip) return;
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'
};
fetch('/shop/uber/quote', { fetch('/shop/uber/quote', {
method: 'POST', headers: {'Content-Type': 'application/json'}, method: 'POST', headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ params: { address_data: data } }) body: JSON.stringify({ params: { address_data: {
}).then(r => r.json()).then(res => { street: street,
if (res.result &amp;&amp; res.result.success) { 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.remove('d-none', 'alert-danger');
msgDiv.classList.add('alert-success'); 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; if (submitBtn) submitBtn.disabled = false;
} else { } else {
msgDiv.classList.remove('d-none', 'alert-success'); msgDiv.classList.remove('d-none', 'alert-success');
msgDiv.classList.add('alert-danger'); 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; if (submitBtn) submitBtn.disabled = true;
} }
}); });
} }
document.querySelector('input[name="street"]')?.addEventListener('blur', checkUberRange); document.querySelector('input[name="street"]')?.addEventListener('blur', checkUber);
document.querySelector('input[name="zip"]')?.addEventListener('blur', checkUberRange); document.querySelector('input[name="zip"]')?.addEventListener('blur', checkUber);
setOrderType('delivery');
// Load initial state
if (hiddenType.value === 'pickup') setOrderType('pickup'); else setOrderType('delivery');
} }
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initUnifiedForm); else initUnifiedForm();
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initUnifiedForm); } else { initUnifiedForm(); }
})(); })();
</script> </script>
</xpath> </xpath>