add container naming to docker-compose and implement custom checkout address UI with delivery/pickup selection
This commit is contained in:
parent
81838e6bc1
commit
798a7839e5
@ -56,6 +56,11 @@
|
|||||||
.active-mark { display: none; position: absolute; top: 10px; right: 10px; color: #00A67E; }
|
.active-mark { display: none; position: absolute; top: 10px; right: 10px; color: #00A67E; }
|
||||||
.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; }
|
||||||
|
|
||||||
|
.animated { animation-duration: 0.5s; animation-fill-mode: both; }
|
||||||
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
.fadeIn { animation-name: fadeIn; }
|
||||||
|
#uber_message strong { display: block; margin-bottom: 4px; }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="row mb-4 g-3 mt-1">
|
<div class="row mb-4 g-3 mt-1">
|
||||||
@ -102,6 +107,7 @@
|
|||||||
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 submitBtn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
|
const submitBtn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
|
||||||
|
let debounceTimer;
|
||||||
|
|
||||||
function getAddressContainers() {
|
function getAddressContainers() {
|
||||||
const addressNames = ['street', 'street2', 'city', 'zip', 'country_id', 'state_id'];
|
const addressNames = ['street', 'street2', 'city', 'zip', 'country_id', 'state_id'];
|
||||||
@ -147,36 +153,65 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
function checkUber() {
|
function checkUber() {
|
||||||
if (hiddenType.value !== 'delivery') return;
|
clearTimeout(debounceTimer);
|
||||||
const street = document.querySelector('input[name="street"]')?.value;
|
debounceTimer = setTimeout(() => {
|
||||||
const zip = document.querySelector('input[name="zip"]')?.value;
|
if (hiddenType.value !== 'delivery') return;
|
||||||
if (!street || !zip) return;
|
const street = document.querySelector('input[name="street"]')?.value;
|
||||||
|
const zip = document.querySelector('input[name="zip"]')?.value;
|
||||||
|
|
||||||
fetch('/shop/uber/quote', {
|
if (!street || !zip) {
|
||||||
method: 'POST', headers: {'Content-Type': 'application/json'},
|
if (msgDiv) msgDiv.style.display = 'none';
|
||||||
body: JSON.stringify({ params: { address_data: {
|
return;
|
||||||
street: street,
|
|
||||||
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 && data.result.success) {
|
|
||||||
msgDiv.className = 'alert alert-success my-3';
|
|
||||||
msgDiv.style.display = '';
|
|
||||||
msgDiv.innerText = "✓ Covered! Delivery charge: " + data.result.fee + "$";
|
|
||||||
if (submitBtn) submitBtn.disabled = false;
|
|
||||||
} else {
|
|
||||||
msgDiv.className = 'alert alert-danger my-3';
|
|
||||||
msgDiv.style.display = '';
|
|
||||||
msgDiv.innerText = "✕ Not covered: " + (data.result?.error || "Distance too far.");
|
|
||||||
if (submitBtn) submitBtn.disabled = true;
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
if (msgDiv) {
|
||||||
|
msgDiv.className = 'alert alert-info my-3';
|
||||||
|
msgDiv.style.display = '';
|
||||||
|
msgDiv.innerText = "Checking Uber coverage...";
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch('/shop/uber/quote', {
|
||||||
|
method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify({ params: { address_data: {
|
||||||
|
street: street,
|
||||||
|
street2: document.querySelector('input[name="street2"]')?.value,
|
||||||
|
city: document.querySelector('input[name="city"]')?.value,
|
||||||
|
zip: zip,
|
||||||
|
country: document.querySelector('select[name="country_id"] option:checked')?.text || 'Canada',
|
||||||
|
state: document.querySelector('select[name="state_id"] option:checked')?.text
|
||||||
|
} } })
|
||||||
|
}).then(r => r.json()).then(data => {
|
||||||
|
msgDiv.classList.remove('fadeIn');
|
||||||
|
void msgDiv.offsetWidth; // Trigger reflow for animation
|
||||||
|
msgDiv.classList.add('fadeIn');
|
||||||
|
|
||||||
|
if (data.result && data.result.success) {
|
||||||
|
msgDiv.className = 'alert alert-success my-3 animated fadeIn';
|
||||||
|
msgDiv.style.display = '';
|
||||||
|
msgDiv.innerHTML = `<strong>✓ Delivery Available!</strong>Uber Delivery Fee: $${data.result.fee} (Distance Based)`;
|
||||||
|
if (submitBtn) submitBtn.disabled = false;
|
||||||
|
} else {
|
||||||
|
msgDiv.className = 'alert alert-danger my-3 animated fadeIn';
|
||||||
|
msgDiv.style.display = '';
|
||||||
|
msgDiv.innerHTML = `<strong>✕ Delivery Unavailable</strong>${data.result?.error || "Distance too far for Uber Direct."}`;
|
||||||
|
if (submitBtn) submitBtn.disabled = true;
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.error("Uber API Error:", err);
|
||||||
|
msgDiv.className = 'alert alert-warning my-3';
|
||||||
|
msgDiv.innerText = "Error connecting to Uber service.";
|
||||||
|
});
|
||||||
|
}, 500); // 500ms debounce
|
||||||
}
|
}
|
||||||
|
|
||||||
const triggers = document.querySelectorAll('input[name="street"], input[name="zip"]');
|
// Trigger on any address field change
|
||||||
triggers.forEach(t => t.addEventListener('blur', checkUber));
|
const addressFields = 'input[name="street"], input[name="street2"], input[name="city"], input[name="zip"], select[name="country_id"], select[name="state_id"]';
|
||||||
|
const triggers = document.querySelectorAll(addressFields);
|
||||||
|
triggers.forEach(t => {
|
||||||
|
t.addEventListener('blur', checkUber);
|
||||||
|
t.addEventListener('change', checkUber);
|
||||||
|
});
|
||||||
|
|
||||||
setOrderType('delivery');
|
setOrderType('delivery');
|
||||||
}
|
}
|
||||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initUnifiedForm); else initUnifiedForm();
|
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initUnifiedForm); else initUnifiedForm();
|
||||||
|
|||||||
@ -49,8 +49,13 @@ class UberDeliveryController(http.Controller):
|
|||||||
company = request.website.company_id
|
company = request.website.company_id
|
||||||
pickup_address = f"{company.street}, {company.city}, {company.zip}, {company.country_id.name}"
|
pickup_address = f"{company.street}, {company.city}, {company.zip}, {company.country_id.name}"
|
||||||
|
|
||||||
# User entered address
|
# User entered address - building comprehensive string for Uber Direct
|
||||||
dropoff_address = f"{address_data.get('street')}, {address_data.get('city')}, {address_data.get('zip')}, {address_data.get('country')}"
|
street = address_data.get('street', '')
|
||||||
|
street2 = address_data.get('street2', '')
|
||||||
|
full_street = f"{street}, {street2}" if street2 else street
|
||||||
|
|
||||||
|
dropoff_address = f"{full_street}, {address_data.get('city', '')}, {address_data.get('state', '')}, {address_data.get('zip', '')}, {address_data.get('country', 'Canada')}"
|
||||||
|
|
||||||
|
|
||||||
result = config.get_uber_quote(pickup_address, dropoff_address)
|
result = config.get_uber_quote(pickup_address, dropoff_address)
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user