alaguraj/odoo-testing-addons
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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>