';
// Expected time with countdown if available
if (order.estimated_ready_time && ['confirmed', 'preparing', 'ready', 'out_for_delivery'].includes(order.status)) {
var expectedTime = new Date(order.estimated_ready_time);
var formattedExpectedTime = expectedTime.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
var remaining = expectedTime.getTime() - Date.now();
if (remaining > 0) {
var mins = Math.floor(remaining / 60000);
html += '
⏱️ Ready in ~' + mins + ' min • Expected: ' + formattedExpectedTime + '
';
} else {
html += '
⏰ Expected: ' + formattedExpectedTime + '
';
}
}
html += '
' + currency + (order.total || 0).toFixed(2) + '
';
html += '
';
});
html += '
';
}
html += '';
currentModalContent.innerHTML = html;
// Attach event listeners
var backMenuBtn = currentModalContent.querySelector('#orders-back-menu');
if (backMenuBtn) {
backMenuBtn.onclick = function() {
trackingOpen = false;
accountOpen = false;
renderMenu();
};
}
var logoutBtn = currentModalContent.querySelector('#orders-logout');
if (logoutBtn) {
logoutBtn.onclick = async function() {
var token = null;
try { token = localStorage.getItem('base44_embedder_token'); } catch(e) {}
if (token) {
try {
await fetch(BASE_URL + '/api/functions/embedderAuth', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'logout', token: token })
});
} catch(e) {}
}
try { localStorage.removeItem('base44_embedder_token'); } catch(e) {}
currentUser = null;
isUserLoggedIn = false;
userOrders = [];
trackingOpen = false;
accountOpen = false;
renderMenu();
};
}
var startShoppingBtn = currentModalContent.querySelector('#orders-start-shopping');
if (startShoppingBtn) {
startShoppingBtn.onclick = function() {
trackingOpen = false;
accountOpen = false;
renderMenu();
};
}
// Order card clicks - show order details
var orderCards = currentModalContent.querySelectorAll('.user-order-card');
orderCards.forEach(function(card) {
card.onclick = function() {
var orderId = card.dataset.orderId;
currentOrderId = orderId;
currentOrderData = null;
trackingOpen = false;
confirmationOpen = true;
renderMenu();
// Start polling for real-time updates
fetchOrderData(orderId);
};
});
}
function fetchOrderData(orderId) {
console.log('[Embedder] Fetching order data for:', orderId);
fetch(BASE_URL + '/api/functions/getOrderStatus?orderId=' + orderId + '&t=' + Date.now())
.then(function(res) { return res.json(); })
.then(function(data) {
console.log('[Embedder] Got order data:', data);
if (data.success && data.order) {
// Check if data actually changed before re-rendering
var hasChanged = !previousOrderData ||
previousOrderData.status !== data.order.status ||
JSON.stringify(previousOrderData.driver_location) !== JSON.stringify(data.order.driver_location) ||
previousOrderData.estimated_ready_time !== data.order.estimated_ready_time;
currentOrderData = data.order;
previousOrderData = JSON.parse(JSON.stringify(data.order)); // Deep copy
console.log('[Embedder] Data changed:', hasChanged, 'Status:', data.order.status);
if (confirmationOpen && hasChanged) {
renderMenu();
}
}
// Continue polling every 3 seconds if still on confirmation page
if (confirmationOpen && currentOrderId === orderId) {
setTimeout(function() {
fetchOrderData(orderId);
}, 3000);
}
})
.catch(function(err) {
console.error('[Embedder] Failed to fetch order:', err);
// Continue polling even on error
if (confirmationOpen && currentOrderId === orderId) {
setTimeout(function() {
fetchOrderData(orderId);
}, 4000);
}
});
}
function loadStripe() {
if (!STRIPE_PUBLISHABLE_KEY || window.Stripe) {
if (window.Stripe && STRIPE_PUBLISHABLE_KEY) {
initStripe();
}
return;
}
var script = document.createElement('script');
script.src = 'https://js.stripe.com/v3/';
script.async = true;
script.onload = function() {
initStripe();
};
document.head.appendChild(script);
}
function initStripe() {
if (window.Stripe && STRIPE_PUBLISHABLE_KEY && !stripeInstance) {
stripeInstance = window.Stripe(STRIPE_PUBLISHABLE_KEY);
initPaymentRequest();
}
}
var paymentRequest = null;
var canMakePaymentRequest = false;
function initPaymentRequest() {
if (!stripeInstance || !restaurant) return;
var total = getOrderTotal();
var currencyCode = (restaurant.currency || 'USD').toLowerCase();
paymentRequest = stripeInstance.paymentRequest({
country: 'US',
currency: currencyCode,
total: {
label: restaurant.name || 'Order Total',
amount: Math.round(total * 100),
},
requestPayerName: true,
requestPayerEmail: true,
requestPayerPhone: true,
});
paymentRequest.canMakePayment().then(function(result) {
if (result) {
canMakePaymentRequest = true;
console.log('Apple Pay / Google Pay available');
}
});
paymentRequest.on('paymentmethod', async function(ev) {
try {
var subtotal = getCartTotal();
var deliveryFee = getDeliveryFee();
var tipAmount = getTipAmount();
var total = subtotal + deliveryFee + tipAmount;
var response = await fetch(BASE_URL + '/api/functions/createStripePaymentIntent', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
amount: total,
currency: (restaurant.currency || 'USD').toLowerCase(),
restaurant_id: RESTAURANT_ID,
order_data: {
customer_name: ev.payerName || checkoutData.name,
customer_email: ev.payerEmail || checkoutData.email,
restaurant_location: restaurant.location || null,
delivery_location: checkoutData.deliveryLocation || null
}
})
});
var data = await response.json();
var clientSecret = data.client_secret || data.clientSecret;
if (!clientSecret) {
ev.complete('fail');
return;
}
var confirmResult = await stripeInstance.confirmCardPayment(
clientSecret,
{ payment_method: ev.paymentMethod.id },
{ handleActions: false }
);
if (confirmResult.error) {
ev.complete('fail');
return;
}
if (confirmResult.paymentIntent.status === 'requires_action') {
var actionResult = await stripeInstance.confirmCardPayment(clientSecret);
if (actionResult.error) {
ev.complete('fail');
return;
}
}
ev.complete('success');
submitOrderWithPayment(confirmResult.paymentIntent.id);
} catch (err) {
ev.complete('fail');
console.error('Payment Request error:', err);
}
});
}
function updatePaymentRequestTotal() {
if (paymentRequest) {
var total = getOrderTotal();
paymentRequest.update({
total: {
label: restaurant.name || 'Order Total',
amount: Math.round(total * 100),
}
});
}
}
function mountPaymentRequestButton() {
if (!stripeInstance || !paymentRequest || !canMakePaymentRequest || !currentModalContent) return;
var prButtonContainer = currentModalContent.querySelector('#payment-request-button');
if (!prButtonContainer || prButtonContainer.dataset.mounted === 'true') return;
updatePaymentRequestTotal();
var prButton = stripeInstance.elements().create('paymentRequestButton', {
paymentRequest: paymentRequest,
style: {
paymentRequestButton: {
type: 'default',
theme: 'dark',
height: '48px',
},
},
});
prButton.mount(prButtonContainer);
prButtonContainer.dataset.mounted = 'true';
}
function mountStripeCard() {
if (!stripeInstance || !currentModalContent) return;
var cardContainer = currentModalContent.querySelector('#stripe-card-element');
if (!cardContainer) return;
if (cardElement && cardContainer.children.length > 0) return;
if (cardElement) {
try { cardElement.unmount(); } catch(e) {}
cardElement = null;
stripeElements = null;
}
try {
stripeElements = stripeInstance.elements();
cardElement = stripeElements.create('card', {
style: {
base: {
fontSize: '16px',
color: '#1e293b',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
'::placeholder': { color: '#94a3b8' }
},
invalid: { color: '#ef4444' }
}
});
cardElement.mount(cardContainer);
cardElement.on('change', function(event) {
stripeError = event.error ? event.error.message : '';
var errorDisplay = currentModalContent.querySelector('#stripe-card-errors');
if (errorDisplay) errorDisplay.textContent = stripeError;
});
} catch (err) {
console.error('Error mounting Stripe card:', err);
stripeError = 'Failed to load payment form: ' + err.message;
}
}
async function processStripePayment() {
if (stripePaymentProcessing || !stripeInstance || !cardElement) return;
// Check minimum order based on order type
var subtotal = getCartTotal();
var minimumOrder = checkoutData.orderType === 'delivery'
? (restaurant.delivery_minimum_order || 0)
: checkoutData.orderType === 'pickup'
? (restaurant.pickup_minimum_order || 0)
: (restaurant.dine_in_minimum_order || 0);
if (minimumOrder > 0 && subtotal < minimumOrder) {
var currency = getCurrencySymbol(restaurant.currency);
alert('Minimum order of ' + currency + minimumOrder.toFixed(2) + ' required for ' + checkoutData.orderType.replace(/_/g, ' '));
return;
}
stripePaymentProcessing = true;
stripeError = '';
var payBtn = currentModalContent.querySelector('#stripe-pay-btn');
if (payBtn) {
payBtn.disabled = true;
payBtn.textContent = '⏳ Processing...';
}
try {
var deliveryFee = getDeliveryFee();
var tipAmount = getTipAmount();
var total = subtotal + deliveryFee + tipAmount;
var response = await fetch(BASE_URL + '/api/functions/createStripePaymentIntent', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
amount: total,
currency: (restaurant.currency || 'USD').toLowerCase(),
restaurant_id: RESTAURANT_ID,
order_data: {
customer_name: checkoutData.name,
customer_email: checkoutData.email,
restaurant_location: restaurant.location || null,
delivery_location: checkoutData.deliveryLocation || null
}
})
});
var data = await response.json();
var clientSecret = data.client_secret || data.clientSecret;
if (!clientSecret) {
throw new Error(data.error || 'Failed to create payment intent');
}
var result = await stripeInstance.confirmCardPayment(clientSecret, {
payment_method: {
card: cardElement,
billing_details: {
name: checkoutData.name,
email: checkoutData.email || undefined,
phone: checkoutData.phone
}
}
});
if (result.error) {
stripeError = result.error.message;
stripePaymentProcessing = false;
var errorDisplay = currentModalContent.querySelector('#stripe-card-errors');
if (errorDisplay) errorDisplay.textContent = stripeError;
if (payBtn) {
payBtn.disabled = false;
payBtn.textContent = '💳 Pay with Card';
}
} else if (result.paymentIntent && result.paymentIntent.status === 'succeeded') {
submitOrderWithPayment(result.paymentIntent.id);
}
} catch (err) {
stripeError = err.message || 'Payment failed';
stripePaymentProcessing = false;
var errorDisplay = currentModalContent.querySelector('#stripe-card-errors');
if (errorDisplay) errorDisplay.textContent = stripeError;
if (payBtn) {
payBtn.disabled = false;
payBtn.textContent = '💳 Pay with Card';
}
}
}
function submitOrderWithPayment(paymentId) {
var subtotal = getCartTotal();
var deliveryFee = getDeliveryFee();
var tipAmount = getTipAmount();
var otherFeesTotal = calculateOtherFees();
var discount = calculateDiscount();
var vatCalc = calculateVAT();
var total = restaurant.vat_settings && restaurant.vat_settings.price_inclusive
? subtotal + deliveryFee + tipAmount + otherFeesTotal - discount
: subtotal + deliveryFee + tipAmount + otherFeesTotal - discount + vatCalc.vat_amount;
// Use logged-in user's email if available for order matching
var orderCustomerEmail = (currentUser && currentUser.email) ? currentUser.email : checkoutData.email;
var orderData = {
restaurant_id: RESTAURANT_ID,
restaurant_location: restaurant.location || null,
customer_name: checkoutData.name,
customer_phone: checkoutData.phone,
customer_email: orderCustomerEmail,
order_type: checkoutData.orderType,
delivery_address: checkoutData.orderType === 'delivery' ? checkoutData.address : '',
delivery_location: checkoutData.deliveryLocation || null,
special_notes: checkoutData.notes,
scheduled_time: checkoutData.scheduledTime || null,
items: cart.map(function(item) {
return {
item_id: item.id,
item_name: item.name,
quantity: item.quantity,
price: item.price,
special_instructions: item.special_instructions || '',
selected_options: formatOptionsForOrder(item)
};
}),
subtotal: subtotal,
delivery_fee: deliveryFee,
other_fees: otherFeesTotal,
other_fees_breakdown: getFeeBreakdown().map(function(f) { return { name: f.name, amount: f.amount }; }),
tip_amount: tipAmount,
vat_amount: vatCalc.vat_amount,
vat_rate: vatCalc.vat_rate,
vat_on_products: vatCalc.vat_on_products,
vat_on_delivery: vatCalc.vat_on_delivery,
vat_on_fees: vatCalc.vat_on_fees,
vat_on_tips: vatCalc.vat_on_tips,
total: total,
promotion_code: checkoutData.appliedPromo ? checkoutData.appliedPromo.promo_code : null,
discount_amount: discount,
status: 'pending',
payment_method: 'stripe',
payment_status: 'paid',
payment_id: paymentId
};
fetch(BASE_URL + '/api/functions/createEmbedOrder', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(orderData)
})
.then(function(res) { return res.json(); })
.then(function(data) {
stripePaymentProcessing = false;
if (data.success) {
cart = [];
saveCart();
checkoutData = { name: '', phone: '', email: '', orderType: 'pickup', address: '', notes: '', scheduledTime: '', tipType: 'percentage', tipPercentage: 0, tipFlatAmount: 0, paymentMethod: '', partySize: null };
cardElement = null;
stripeElements = null;
goToConfirmation(data.orderId);
} else {
stripeError = 'Order creation failed: ' + (data.error || 'Unknown error');
renderMenu();
}
})
.catch(function(err) {
stripePaymentProcessing = false;
stripeError = 'Order creation failed';
renderMenu();
});
}
async function submitOrder() {
console.log('[Embedder submitOrder] Called - isSubmitting:', isSubmitting);
console.log('[Embedder submitOrder] checkoutData:', JSON.stringify(checkoutData));
if (isSubmitting) {
console.log('[Embedder submitOrder] Already submitting, returning');
return;
}
if (!checkoutData.name || !checkoutData.phone || !checkoutData.email) {
alert('Please fill in your name, phone number, and email address');
checkoutData.openSection = 'contact';
renderMenu();
return;
}
if (checkoutData.orderType === 'delivery' && !checkoutData.address) {
alert('Please enter your delivery address');
checkoutData.openSection = 'address';
renderMenu();
return;
}
if (checkoutData.orderType === 'delivery' && (!deliveryFeeData || !deliveryFeeData.success)) {
alert('❌ ' + (deliveryFeeError || 'Please verify your delivery address is within our delivery range'));
checkoutData.openSection = 'address';
renderMenu();
return;
}
// Validate timing for delivery and pickup
if (checkoutData.orderType !== 'dine_in') {
if (!checkoutData.timingType) {
alert('Please select when you want your order (ASAP or Schedule)');
checkoutData.openSection = 'time';
renderMenu();
return;
}
if (checkoutData.timingType === 'scheduled' && (!checkoutData.scheduledTime || checkoutData.scheduledTime.indexOf(':') === -1)) {
alert('Please select a date and time for your scheduled order');
checkoutData.openSection = 'time';
renderMenu();
return;
}
}
if (checkoutData.orderType === 'dine_in') {
if (!checkoutData.partySize || checkoutData.partySize < 1) {
alert('Please enter the party size');
checkoutData.openSection = 'dine_in_party';
renderMenu();
return;
}
if (!checkoutData.scheduledTime || checkoutData.scheduledTime.indexOf(':') === -1) {
alert('Please select a date and time for your reservation');
checkoutData.openSection = 'dine_in_time';
renderMenu();
return;
}
}
// Check minimum order based on order type
var subtotal = getCartTotal();
var minimumOrder = checkoutData.orderType === 'delivery'
? (restaurant.delivery_minimum_order || 0)
: checkoutData.orderType === 'pickup'
? (restaurant.pickup_minimum_order || 0)
: (restaurant.dine_in_minimum_order || 0);
if (minimumOrder > 0 && subtotal < minimumOrder) {
var currency = getCurrencySymbol(restaurant.currency);
alert('Minimum order of ' + currency + minimumOrder.toFixed(2) + ' required for ' + checkoutData.orderType.replace(/_/g, ' '));
return;
}
console.log('[Embedder submitOrder] All validations passed, setting isSubmitting = true');
isSubmitting = true;
renderMenu();
try {
// For dine-in: Reservation creation is now handled by createEmbedOrder to prevent duplicates
var subtotal = getCartTotal();
var deliveryFee = getDeliveryFee();
var tipAmount = getTipAmount();
var otherFeesTotal = calculateOtherFees();
var discount = calculateDiscount();
var vatCalc = calculateVAT();
var total = restaurant.vat_settings && restaurant.vat_settings.price_inclusive
? subtotal + deliveryFee + tipAmount + otherFeesTotal - discount
: subtotal + deliveryFee + tipAmount + otherFeesTotal - discount + vatCalc.vat_amount;
// Use logged-in user's email if available for order matching
var submitOrderEmail = (currentUser && currentUser.email) ? currentUser.email : checkoutData.email;
var orderData = {
restaurant_id: RESTAURANT_ID,
restaurant_location: restaurant.location || null,
customer_name: checkoutData.name,
customer_phone: checkoutData.phone,
customer_email: submitOrderEmail,
order_type: checkoutData.orderType,
reservation_details: (checkoutData.orderType === 'dine_in') ? {
party_size: checkoutData.partySize,
reservation_date: checkoutData.scheduledTime ? new Date(checkoutData.scheduledTime).toISOString() : new Date().toISOString(),
special_requests: checkoutData.notes || ''
} : null,
delivery_address: checkoutData.orderType === 'delivery' ? checkoutData.address : '',
delivery_location: checkoutData.deliveryLocation || null,
special_notes: checkoutData.notes,
scheduled_time: checkoutData.scheduledTime || null,
items: cart.map(function(item) {
return {
item_id: item.id,
item_name: item.name,
quantity: item.quantity,
price: item.price,
special_instructions: item.special_instructions || '',
selected_options: formatOptionsForOrder(item)
};
}),
subtotal: subtotal,
delivery_fee: deliveryFee,
other_fees: otherFeesTotal,
other_fees_breakdown: getFeeBreakdown().map(function(f) { return { name: f.name, amount: f.amount }; }),
tip_amount: tipAmount,
vat_amount: vatCalc.vat_amount,
vat_rate: vatCalc.vat_rate,
vat_on_products: vatCalc.vat_on_products,
vat_on_delivery: vatCalc.vat_on_delivery,
vat_on_fees: vatCalc.vat_on_fees,
vat_on_tips: vatCalc.vat_on_tips,
total: total,
promotion_code: checkoutData.appliedPromo ? checkoutData.appliedPromo.promo_code : null,
discount_amount: discount,
status: 'pending',
payment_method: checkoutData.paymentMethod || 'cash_on_delivery',
payment_status: 'pending'
};
fetch(BASE_URL + '/api/functions/createEmbedOrder', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(orderData)
})
.then(function(res) { return res.json(); })
.then(function(data) {
isSubmitting = false;
if (data.success) {
cart = [];
saveCart();
checkoutData = { name: '', phone: '', email: '', orderType: 'pickup', address: '', notes: '', scheduledTime: '', tipType: 'percentage', tipPercentage: 0, tipFlatAmount: 0, paymentMethod: '', partySize: null };
goToConfirmation(data.orderId);
} else {
alert('Failed to place order: ' + (data.error || 'Unknown error'));
renderMenu();
}
})
.catch(function(err) {
isSubmitting = false;
alert('Failed to place order. Please try again.');
renderMenu();
});
} catch (err) {
isSubmitting = false;
console.error('Order submission error:', err);
alert(err.message || 'An unexpected error occurred while placing your order.');
renderMenu();
}
}
// Load Stripe if available
if (STRIPE_PUBLISHABLE_KEY) {
loadStripe();
}
function initGoogleServices() {
if (window.google && window.google.maps && window.google.maps.places && !autocompleteService) {
autocompleteService = new window.google.maps.places.AutocompleteService();
var dummyDiv = document.createElement('div');
placesService = new window.google.maps.places.PlacesService(dummyDiv);
autocompleteSessionToken = new window.google.maps.places.AutocompleteSessionToken();
console.log('Google Maps initialized in embedder');
}
}
function searchAddresses(query) {
if (!query || query.length < 2) {
addressSuggestions = [];
showAddressSuggestions = false;
var suggestionsEl = currentModalContent ? currentModalContent.querySelector('.address-autocomplete-suggestions') : null;
if (suggestionsEl) suggestionsEl.remove();
return;
}
if (!autocompleteService) {
console.log('Autocomplete service not ready, initializing...');
if (window.google && window.google.maps && window.google.maps.places) {
initGoogleServices();
}
return;
}
var request = {
input: query,
sessionToken: autocompleteSessionToken,
types: ['geocode']
};
if (restaurant.location) {
request.location = new window.google.maps.LatLng(restaurant.location.lat, restaurant.location.lng);
request.radius = 50000;
}
autocompleteService.getPlacePredictions(request, function(predictions, status) {
if (status === window.google.maps.places.PlacesServiceStatus.OK && predictions) {
addressSuggestions = predictions.map(function(p) {
return {
placeId: p.place_id,
description: p.description,
mainText: p.structured_formatting ? p.structured_formatting.main_text : p.description,
secondaryText: p.structured_formatting ? p.structured_formatting.secondary_text : ''
};
});
showAddressSuggestions = true;
updateAddressSuggestions();
} else {
addressSuggestions = [];
showAddressSuggestions = false;
var suggestionsEl = currentModalContent ? currentModalContent.querySelector('.address-autocomplete-suggestions') : null;
if (suggestionsEl) suggestionsEl.remove();
}
});
}
function updateAddressSuggestions() {
if (!currentModalContent) return;
var addressWrapper = currentModalContent.querySelector('#address-field-wrapper');
if (!addressWrapper) return;
var existing = addressWrapper.querySelector('.address-autocomplete-suggestions');
if (existing) existing.remove();
if (!showAddressSuggestions || addressSuggestions.length === 0) return;
var suggestionsHtml = '
';
}
// Name + Price for items WITHOUT options, Name only for items WITH options
if (hasOptions) {
html += '
' + item.name + '
';
} else {
html += '
';
html += '
' + item.name + '
';
html += '' + currency + item.price.toFixed(2) + '';
html += '
';
}
if (item.description) {
html += '
' + item.description + '
';
}
// Price + prep time for items WITH options (below description)
if (hasOptions) {
html += '
';
html += '' + currency + item.price.toFixed(2) + '+';
if (item.preparation_time) {
html += '🕐 ' + item.preparation_time + ' min';
}
html += '
';
}
// Prep time for items WITHOUT options (if no hasOptions section showed it)
if (!hasOptions && item.preparation_time) {
html += '
🕐 ' + item.preparation_time + ' min
';
}
if (!hasOptions) {
html += '';
var itemQty = itemQuantities[item.id] || 1;
html += '
';
html += '';
html += '' + itemQty + '';
html += '';
html += '';
html += '
';
} else {
html += '';
}
html += '
';
});
if (items.length === 0) {
html = '
No items found
';
}
container.innerHTML = html;
// Re-attach add button listeners
var addBtns = container.querySelectorAll('.add-btn');
addBtns.forEach(function(btn) {
btn.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
var itemId = btn.dataset.itemId;
var item = menuItems.find(function(i) { return i.id === itemId; });
if (item) {
if (item.options && item.options.length > 0) {
handleItemClick(item);
} else {
var notesInput = container.querySelector('.menu-item-notes[data-item-id="' + itemId + '"]');
var notes = notesInput ? notesInput.value : '';
var qty = itemQuantities[itemId] || 1;
for (var i = 0; i < qty; i++) {
addToCart(item, null, notes);
}
if (notesInput) notesInput.value = '';
itemQuantities[itemId] = 1;
}
}
};
});
// Attach quantity button listeners
var qtyDecreaseBtns = container.querySelectorAll('.qty-decrease-btn');
qtyDecreaseBtns.forEach(function(btn) {
btn.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
var itemId = btn.dataset.itemId;
var current = itemQuantities[itemId] || 1;
if (current > 1) {
itemQuantities[itemId] = current - 1;
renderMenuItemsOnly(getFilteredItems(), container);
}
};
});
var qtyIncreaseBtns = container.querySelectorAll('.qty-increase-btn');
qtyIncreaseBtns.forEach(function(btn) {
btn.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
var itemId = btn.dataset.itemId;
var current = itemQuantities[itemId] || 1;
itemQuantities[itemId] = current + 1;
renderMenuItemsOnly(getFilteredItems(), container);
};
});
}
function initializeInlineMenu(container) {
if (!container) return;
if (FETCH_ERROR) {
container.innerHTML = '
Failed to load menu: ' + FETCH_ERROR + '
';
return;
}
if (!restaurant) {
container.innerHTML = '
Restaurant not found
';
return;
}
if (!menuItems.length) {
container.innerHTML = '
No menu items available
';
return;
}
// Re-merge cart duplicates each time modal opens
var mergedCart = [];
cart.forEach(function(item) {
var itemOptions = item.selected_options;
var itemHasOptions = itemOptions && Object.keys(itemOptions).length > 0;
var optionsKey = itemHasOptions ? JSON.stringify(itemOptions) : '';
var existingIndex = -1;
for (var i = 0; i < mergedCart.length; i++) {
var mergedOptions = mergedCart[i].selected_options;
var mergedHasOptions = mergedOptions && Object.keys(mergedOptions).length > 0;
var mergedOptionsKey = mergedHasOptions ? JSON.stringify(mergedOptions) : '';
if (mergedCart[i].id === item.id && mergedOptionsKey === optionsKey) {
existingIndex = i;
break;
}
}
if (existingIndex !== -1) {
mergedCart[existingIndex].quantity += item.quantity;
} else {
mergedCart.push(item);
}
});
cart = mergedCart;
saveCart();
currentModalContent = container;
categories = getUniqueCategories();
renderMenu();
}
function renderMenu() {
if (!currentModalContent) return;
var currency = getCurrencySymbol(restaurant.currency);
var filteredItems = getFilteredItems();
var cartTotal = getCartTotal();
var cartCount = getCartCount();
var isDeliveryEnabled = restaurant.delivery_enabled !== false;
var isPickupEnabled = restaurant.pickup_enabled !== false;
var isDineInEnabled = restaurant.dine_in_enabled === true;
var isAnyServiceEnabled = isDeliveryEnabled || isPickupEnabled || isDineInEnabled;
// Build the menu HTML
var html = '
';
// Header for inline mode (same as modal)
if (DISPLAY_MODE === 'inline') {
var headerTextColor = restaurant.theme_header_text_color || '#1E293B';
html += '
';
html += '
' + (restaurant.name || 'Order Online') + '
';
html += '
';
html += '';
html += '
';
}
html += '
';
// Service unavailable banner
if (!isAnyServiceEnabled) {
html += '
⚠️ This restaurant is currently not accepting orders.
';
}
// Estimated times banner
var timeBannerParts = [];
if (isPickupEnabled && restaurant.estimated_pickup_time) {
timeBannerParts.push('🛍️ Pickup: ' + restaurant.estimated_pickup_time + ' min');
}
if (timeBannerParts.length > 0) {
html += '
' + timeBannerParts.join(' • ') + '
';
}
// Categories - sticky horizontal scroll like mobile view
var buttonColor = restaurant.theme_button_color || '#f97316';
html += '
';
html += '
';
html += '';
html += '';
html += '';
categories.forEach(function(cat) {
var isActive = selectedCategory === cat;
html += '';
});
html += '
';
html += '
';
// Menu items grid
html += '
';
filteredItems.forEach(function(item) {
var isTemporarilyUnavailable = item.not_available_until && new Date(item.not_available_until) > new Date();
var itemCountInCart = cart.filter(function(c) { return c.id === item.id; }).reduce(function(sum, c) { return sum + c.quantity; }, 0);
var hasOptions = item.options && item.options.length > 0;
html += '
';
if (!isTemporarilyUnavailable && item.popular) {
html += '
⭐ POPULAR
';
}
if (item.image_url) {
html += '';
}
html += '
';
// Availability Status Badge
if (isTemporarilyUnavailable) {
html += '
⏰ Unavailable
';
var availableDate = new Date(item.not_available_until);
var now = new Date();
var hoursUntil = Math.ceil((availableDate - now) / (1000 * 60 * 60));
var daysUntil = Math.ceil((availableDate - now) / (1000 * 60 * 60 * 24));
var availableText;
if (daysUntil > 365) {
availableText = 'Indefinitely';
} else if (hoursUntil < 24) {
availableText = 'Available in ' + hoursUntil + ' hour' + (hoursUntil === 1 ? '' : 's');
} else {
availableText = 'Available ' + availableDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
}
html += '
';
}
// Price + prep time (always below description for ALL items)
html += '
';
html += '' + currency + item.price.toFixed(2) + (hasOptions ? '+' : '') + '';
if (item.preparation_time) {
html += '🕐 ' + item.preparation_time + ' min';
}
html += '
';
// Notes input and quantity controls (only for items WITHOUT options)
if (!hasOptions) {
html += '';
var itemQty = itemQuantities[item.id] || 1;
var btnTextColor = restaurant.theme_button_text_color || '#fff';
html += '
';
html += '';
html += '' + itemQty + '';
html += '';
html += '';
html += '
';
} else {
var btnTextColor = restaurant.theme_button_text_color || '#fff';
html += '';
}
html += '
';
});
html += '
';
// Floating cart button with hover preview
if (cartCount > 0 && !cartOpen && !checkoutOpen && !confirmationOpen) {
var lastItem = cart[cart.length - 1];
// Get total quantity of last item type in cart
var lastItemTotalQty = cart.filter(function(c) { return c.id === lastItem.id; }).reduce(function(sum, c) { return sum + c.quantity; }, 0);
var lastItemName = lastItem.name.length > 20 ? lastItem.name.substring(0, 20) + '...' : lastItem.name;
html += '
';
// Expanded cart preview (hidden by default, shows on hover) - matches cart page design
html += '
';
// Scrollable items area
html += '
';
html += '
🛒 Cart (' + cartCount + ')
';
cart.slice().reverse().forEach(function(item, idx) {
var isNewest = idx === 0;
html += '
';
if (item.image_url) {
html += '';
}
html += '
';
html += '
' + item.quantity + 'x ' + item.name + '
';
if (item.selected_options && Object.keys(item.selected_options).length > 0) {
var optText = [];
Object.keys(item.selected_options).forEach(function(optName) {
var optVal = item.selected_options[optName];
if (Array.isArray(optVal) && optVal.length > 0) {
optText.push(optVal.join(', '));
} else if (optVal && typeof optVal === 'string') {
optText.push(optVal);
}
});
if (optText.length > 0) {
html += '
';
// Account/Tracking overlay
if (accountOpen) {
html = renderAccountPage(currency);
}
// Orders view for logged in users
if (trackingOpen && currentUser) {
// Will be handled by renderOrdersView
}
// Cart overlay
if (cartOpen) {
html = renderCartPage(currency);
}
// Checkout overlay
if (checkoutOpen) {
html = renderCheckoutPage(currency);
}
// Confirmation overlay
if (confirmationOpen) {
if (currentOrderData) {
html = renderConfirmationPage(currency);
} else {
// Show loading state while fetching order data
html = '
' +
'
' +
'
⏳
' +
'
Loading Order...
' +
'
Please wait while we fetch your order details.
' +
'
' +
'
';
}
}
// Options modal
if (optionsModalOpen && selectedItemForOptions) {
html += renderOptionsModal(currency);
}
currentModalContent.innerHTML = html;
attachEventListeners();
// Initialize map if confirmation page with tracking data
if (confirmationOpen && currentOrderData) {
console.log('[Embedder Map] confirmationOpen=true, checking for map data...');
console.log('[Embedder Map] Status:', currentOrderData.status);
console.log('[Embedder Map] Has driver_location:', !!currentOrderData.driver_location);
console.log('[Embedder Map] Has delivery_location:', !!currentOrderData.delivery_location);
console.log('[Embedder Map] Has restaurant_location:', !!currentOrderData.restaurant_location);
if (currentOrderData.status === 'out_for_delivery' &&
currentOrderData.driver_location &&
currentOrderData.delivery_location &&
currentOrderData.restaurant_location) {
console.log('[Embedder Map] All conditions met, loading map...');
loadLeafletAndInitMap(currentOrderData);
} else {
console.log('[Embedder Map] Conditions not met, skipping map');
}
}
// Update delivery fee UI after render
if (checkoutOpen) {
updateDeliveryFeeUI();
// Auto-focus address field when delivery type is selected and address section is active
if (checkoutData.orderType === 'delivery' && checkoutData.openSection === 'address') {
setTimeout(function() {
var addressField = currentModalContent.querySelector('#checkout-address');
if (addressField) {
addressField.focus();
addressField.classList.add('base44-pulse-field');
}
}, 300);
}
}
// Mount Stripe if needed
if (checkoutOpen && checkoutData.paymentMethod === 'stripe' && STRIPE_PUBLISHABLE_KEY && stripeInstance) {
setTimeout(function() {
if (!cardElement) mountStripeCard();
}, 100);
}
}
function renderCartPage(currency) {
var cartTotal = getCartTotal();
var cartCount = getCartCount();
var html = '
';
// Header with back button
html += '
';
html += '';
html += '
🛒 Cart (' + cartCount + ')
';
html += '';
html += '
';
if (cart.length === 0) {
html += '
';
html += '
🛒
';
html += '
Your cart is empty
';
html += '
Add items to get started!
';
html += '
';
} else {
// Grid layout for larger screens, single column for mobile
html += '
';
cart.forEach(function(item, index) {
html += '
';
// Desktop: Large image at top, Mobile: Small image inline
if (item.image_url) {
html += '';
}
html += '
';
// Item header row with delete button (mobile shows small image here)
html += '
';
if (item.image_url) {
html += '';
}
html += '
';
html += '
';
html += '
' + item.name + '
';
html += '';
html += '
';
// Options in compact form
if (item.selected_options && Object.keys(item.selected_options).length > 0) {
var optText = [];
Object.keys(item.selected_options).forEach(function(optName) {
var optVal = item.selected_options[optName];
if (Array.isArray(optVal) && optVal.length > 0) {
optText.push(optVal.join(', '));
} else if (optVal && typeof optVal === 'string') {
optText.push(optVal);
}
});
if (optText.length > 0) {
html += '
' + optText.join(' • ') + '
';
}
}
html += '
';
html += '
';
// Special instructions - styled with pen icon like embedderInline
html += '
';
if (item.special_instructions) {
html += '
' + item.special_instructions + '
';
html += '';
} else {
html += '';
}
html += '
';
// Price row below note: unit price - qty - total
html += '
';
html += '' + currency + item.price.toFixed(2) + '';
html += '
';
html += '';
html += '' + item.quantity + '';
html += '';
html += '
';
html += '' + currency + (item.price * item.quantity).toFixed(2) + '';
html += '
';
html += '
'; // close padding div
html += '
'; // close card
});
html += '
';
// Add responsive styles for cart images
html += '';
}
// Floating checkout button - compact
if (cart.length > 0) {
html += '
';
html += '
';
html += '
';
html += '
Subtotal
';
html += '
' + currency + cartTotal.toFixed(2) + '
';
html += '
';
html += '';
html += '
';
}
html += '
';
return html;
}
function renderCheckoutPage(currency) {
var cartTotal = getCartTotal();
var tipAmount = getTipAmount();
var deliveryFee = getDeliveryFee();
var discount = calculateDiscount();
var feeBreakdown = getFeeBreakdown();
var otherFeesTotal = feeBreakdown.reduce(function(sum, fee) { return sum + fee.amount; }, 0);
var orderTotal = getOrderTotal();
var isDeliveryEnabled = restaurant.delivery_enabled !== false;
var isPickupEnabled = restaurant.pickup_enabled !== false;
var isDineInEnabled = restaurant.dine_in_enabled === true;
var paymentMethods = getAvailablePaymentMethods();
// Determine completion status
var isOrderTypeComplete = !!checkoutData.orderType;
var isTimingComplete = false;
if (checkoutData.orderType === 'dine_in') {
var dateTimeParts = checkoutData.scheduledTime ? checkoutData.scheduledTime.split('T') : [];
var hasDate = dateTimeParts[0] && dateTimeParts[0].trim().length > 0;
var hasTime = dateTimeParts[1] && dateTimeParts[1].trim().length > 0 && dateTimeParts[1].indexOf(':') > -1;
isTimingComplete = !!(checkoutData.partySize && hasDate && hasTime);
} else {
if (checkoutData.timingType === 'asap') {
isTimingComplete = true;
} else if (checkoutData.timingType === 'scheduled') {
isTimingComplete = !!(checkoutData.scheduledTime && checkoutData.scheduledTime.indexOf(':') > -1);
}
}
var isAddressComplete = true;
if (checkoutData.orderType === 'delivery') {
isAddressComplete = !!(checkoutData.address && checkoutData.address.length > 3);
}
var isContactComplete = !!(checkoutData.name && checkoutData.phone && checkoutData.email);
// Determine active section (accordion logic)
var nextIncomplete = 'type';
if (isOrderTypeComplete) {
if (checkoutData.orderType === 'delivery') {
// Delivery Flow: Type -> Address -> Time -> Contact
nextIncomplete = 'address';
if (isAddressComplete) nextIncomplete = 'time';
if (isAddressComplete && isTimingComplete) nextIncomplete = 'contact';
} else if (checkoutData.orderType === 'dine_in') {
// Dine-in Flow: Type -> Booking (combined) -> Contact
nextIncomplete = 'booking';
if (isTimingComplete && checkoutData.partySize) nextIncomplete = 'contact';
} else {
// Pickup Flow: Type -> Time -> Contact
nextIncomplete = 'time';
if (isTimingComplete) nextIncomplete = 'contact';
}
}
if (isOrderTypeComplete && isTimingComplete && isAddressComplete && isContactComplete) nextIncomplete = 'payment';
// CRITICAL: Define activeSection here for use throughout renderCheckoutPage
// ALWAYS keep payment section open
var activeSection = checkoutData.openSection || nextIncomplete;
var isPaymentSectionActive = true; // Payment section is ALWAYS open
// Helper to render accordion section
function renderSection(id, title, icon, isComplete, contentHtml, badgeText) {
// Payment section is ALWAYS open
var isActive = (id === 'payment') ? true : (activeSection === id);
var isDisabled = false;
// Determine if disabled (must complete previous steps)
if (id === 'time') {
if (!isOrderTypeComplete) isDisabled = true;
if (checkoutData.orderType === 'delivery' && !isAddressComplete) isDisabled = true;
}
if (id === 'address' && !isOrderTypeComplete) isDisabled = true;
if (id === 'contact') {
if (!isOrderTypeComplete || !isTimingComplete) isDisabled = true;
if (checkoutData.orderType === 'delivery' && !isAddressComplete) isDisabled = true;
}
if (['payment','notes','promo','tip'].includes(id)) {
if (!isOrderTypeComplete || !isTimingComplete || !isContactComplete) isDisabled = true;
if (checkoutData.orderType === 'delivery' && !isAddressComplete) isDisabled = true;
}
// Special case: Address only shows for delivery
if (id === 'address' && checkoutData.orderType !== 'delivery') return '';
var headerColor = isActive ? '#1e293b' : (isComplete ? '#059669' : '#64748b');
var iconColor = isActive ? (restaurant.theme_button_color || '#f97316') : (isComplete ? '#059669' : '#94a3b8');
var isRequired = ['contact', 'dine_in_contact', 'payment'].includes(id);
var borderColor = isActive ? (restaurant.theme_button_color || '#f97316') : (!isComplete && !isDisabled && isRequired ? '#ef4444' : '#e2e8f0');
var pulseClass = (!isComplete && !isDisabled && isRequired && !isActive) ? 'base44-pulse-field' : '';
var sectionHtml = '
';
// Header
sectionHtml += '
';
sectionHtml += '
';
sectionHtml += '
' + (isComplete && !isActive ? '✅' : icon) + '
';
sectionHtml += '
' + title + '
';
sectionHtml += '
';
if (badgeText && !isActive) {
sectionHtml += '
';
sectionHtml += '
' + badgeText + '
';
if (isComplete) {
sectionHtml += '
✏️
';
} else {
sectionHtml += '';
}
sectionHtml += '
';
} else {
sectionHtml += '';
}
sectionHtml += '
';
// Content
if (isActive) {
sectionHtml += '
' + contentHtml + '
';
}
sectionHtml += '
';
return sectionHtml;
}
var html = '
';
// Back buttons
html += '
';
html += '';
html += '';
html += '
';
html += '
Checkout
';
html += '';
html += '
';
html += '
';
// --- SECTION 1: Order Type ---
var typeHtml = '
';
var typePulseClass = !checkoutData.orderType ? ' base44-pulse-field' : '';
if (isPickupEnabled) typeHtml += '';
if (isDeliveryEnabled) typeHtml += '';
if (isDineInEnabled) typeHtml += '';
typeHtml += '
';
html += renderSection('type', 'Order Type', '🛍️', isOrderTypeComplete, typeHtml, checkoutData.orderType ? (checkoutData.orderType === 'dine_in' ? 'Dine In' : checkoutData.orderType.charAt(0).toUpperCase() + checkoutData.orderType.slice(1)) : '');
// TIMING CONTENT
var timeHtml = '';
var timeLabel = checkoutData.orderType === 'dine_in' ? 'Order Timing & Party Size' : 'Order Timing';
var timeBadge = 'Required';
if (checkoutData.orderType === 'dine_in') {
var pickerBg = restaurant.theme_background_color || '#f8fafc';
var dateNotSelected = !checkoutData.scheduledTime || !checkoutData.scheduledTime.split('T')[0];
var timeNotSelected = !checkoutData.scheduledTime || !checkoutData.scheduledTime.split('T')[1];
timeHtml += '';
timeHtml += '
';
timeHtml += '';
timeHtml += '';
timeHtml += '
';
if (checkoutData.scheduledTime && checkoutData.scheduledTime.indexOf(':') > -1) {
var sched = checkoutData.scheduledTime.split('T');
var dateParts = sched[0].split('-');
var timeH = parseInt(sched[1].split(':')[0]);
var timeMin = sched[1].split(':')[1];
var h12 = (timeH % 12 === 0) ? 12 : (timeH % 12);
var ampm = timeH < 12 ? 'AM' : 'PM';
timeBadge = dateParts[2] + '/' + dateParts[1] + '/' + dateParts[0] + ' ' + String(h12).padStart(2, '0') + ':' + timeMin + ' ' + ampm;
} else {
timeBadge = 'Select Date & Time';
}
} else if (checkoutData.orderType !== 'dine_in') {
var isAsap = checkoutData.timingType === 'asap';
var isScheduled = checkoutData.timingType === 'scheduled';
var timingPulseClass = !checkoutData.timingType ? ' base44-pulse-field' : '';
timeHtml += '';
timeHtml += '
';
timeHtml += '';
timeHtml += '';
timeHtml += '
';
if (isScheduled) {
var pickerBg = restaurant.theme_background_color || '#f8fafc';
var dateNotSelected = !checkoutData.scheduledTime || !checkoutData.scheduledTime.split('T')[0];
var timeNotSelected = !checkoutData.scheduledTime || !checkoutData.scheduledTime.split('T')[1];
timeHtml += '';
timeHtml += '
';
timeHtml += '';
timeHtml += '';
timeHtml += '
';
}
if (isAsap) {
timeBadge = 'ASAP';
} else if (isScheduled) {
if (checkoutData.scheduledTime && checkoutData.scheduledTime.indexOf(':') > -1) {
var sched = checkoutData.scheduledTime.split('T');
var dateParts = sched[0].split('-');
var timeH = parseInt(sched[1].split(':')[0]);
var timeMin = sched[1].split(':')[1];
var h12 = (timeH % 12 === 0) ? 12 : (timeH % 12);
var ampm = timeH < 12 ? 'AM' : 'PM';
timeBadge = dateParts[2] + '/' + dateParts[1] + '/' + dateParts[0] + ' ' + String(h12).padStart(2, '0') + ':' + timeMin + ' ' + ampm;
} else {
timeBadge = 'Select Date & Time';
}
} else {
timeBadge = 'Choose ASAP or Schedule';
}
}
// ADDRESS CONTENT
var addrHtml = '';
if (checkoutData.orderType === 'delivery') {
addrHtml += '
';
// Tip Type Toggle (if both enabled)
var showPercentage = tipsSettings.percentage_enabled;
var showFlat = tipsSettings.flat_amount_enabled;
// Default fallback if undefined
if (showPercentage === undefined) showPercentage = true;
if (showFlat === undefined) showFlat = false;
if (showPercentage && showFlat) {
tipHtml += '
';
tipHtml += '';
tipHtml += '';
tipHtml += '
';
} else if (!showPercentage && showFlat) {
// Force flat amount if percentage is disabled
checkoutData.tipType = 'flat_amount';
} else if (showPercentage && !showFlat) {
checkoutData.tipType = 'percentage';
}
if (checkoutData.tipType === 'percentage' && showPercentage) {
var percentages = tipsSettings.default_percentages || [10, 15, 20, 25];
tipHtml += '
';
// Floating sticky payment button at bottom
html += '
';
html += '
';
if (checkoutData.paymentMethod === 'stripe' && STRIPE_PUBLISHABLE_KEY) {
html += '';
} else {
html += '';
}
html += '
';
return html;
}
function renderAccountPage(currency) {
// This should not be called anymore - redirect to login popup
renderLoginPopup();
return '';
}
function renderConfirmationPage(currency) {
var order = currentOrderData;
console.log('[Embedder] Rendering confirmation page - order status:', order ? order.status : 'NO ORDER');
var statusConfig = {
pending: { icon: '⏳', title: 'Order Pending', desc: "We're reviewing your order. You'll be notified once it's confirmed.", color: '#d97706', bgColor: '#fef3c7' },
confirmed: { icon: '✅', title: 'Confirmed', desc: 'Great! We have confirmed your order and will start preparing it soon.', color: '#059669', bgColor: '#d1fae5' },
preparing: { icon: '👨🍳', title: 'Being Prepared', desc: 'Our kitchen is working on your order right now!', color: '#ea580c', bgColor: '#ffedd5' },
ready: { icon: '🛍️', title: 'Ready', desc: order.order_type === 'delivery' ? 'Your order is ready and waiting for pickup by our delivery driver.' : 'Your order is ready for pickup! Please come to the restaurant.', color: '#2563eb', bgColor: '#dbeafe' },
out_for_delivery: { icon: '🚗', title: 'Out for Delivery', desc: 'Your order is on the way! It should arrive soon.', color: '#7c3aed', bgColor: '#ede9fe' },
completed: { icon: '✅', title: order.order_type === 'delivery' ? 'Delivered' : order.order_type === 'pickup' ? 'Picked Up' : 'Completed', desc: order.order_type === 'delivery' ? 'Your order has been delivered. Enjoy your meal!' : order.order_type === 'pickup' ? 'Your order has been picked up. Enjoy your meal!' : 'Your order is complete. Enjoy your meal!', color: '#059669', bgColor: '#d1fae5' },
cancelled: { icon: '❌', title: 'Cancelled', desc: order.rejection_reason ? 'This order was cancelled. Reason: ' + order.rejection_reason.replace(/_/g, ' ') : 'This order has been cancelled.', color: '#dc2626', bgColor: '#fee2e2' }
};
var status = statusConfig[order.status] || statusConfig.pending;
var stages = ['pending', 'confirmed', 'preparing', 'ready'];
if (order.order_type === 'delivery') stages.push('out_for_delivery');
stages.push('completed');
// Helper function to format time remaining or overdue
function formatTimeRemaining(ms) {
var isOverdue = ms < 0;
var absMs = Math.abs(ms);
var totalSeconds = Math.floor(absMs / 1000);
var hours = Math.floor(totalSeconds / 3600);
var minutes = Math.floor((totalSeconds % 3600) / 60);
var seconds = totalSeconds % 60;
var timeStr = '';
if (hours > 0) timeStr = hours + ' hr ' + minutes + ' min';
else if (minutes > 0) timeStr = minutes + ' min ' + seconds + ' sec';
else timeStr = seconds + ' sec';
return { timeStr: timeStr, isOverdue: isOverdue };
}
// Helper function to format date/time
function formatDateTime(dateStr) {
if (!dateStr) return null;
var d = new Date(dateStr);
return d.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true });
}
function formatTime(dateStr) {
if (!dateStr) return null;
var d = new Date(dateStr);
return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
}
// Calculate time remaining or overdue
var timeRemaining = null;
var expectedAtTime = null;
var isOverdue = false;
if (order.estimated_ready_time && ['confirmed', 'preparing', 'ready', 'out_for_delivery'].includes(order.status)) {
var estimatedTime = new Date(order.estimated_ready_time).getTime();
var now = Date.now();
var remaining = estimatedTime - now;
var timeData = formatTimeRemaining(remaining);
timeRemaining = timeData.timeStr;
isOverdue = timeData.isOverdue;
expectedAtTime = formatTime(order.estimated_ready_time);
}
var requestedTime = order.scheduled_time ? formatDateTime(order.scheduled_time) : null;
var html = '
';
// Optimized layout container with min-width fix for grid items
html += '
';
html += '';
html += '
';
// Left side - Status and Progress
html += '
';
html += '
';
html += '
' + status.icon + '
';
html += '
' + status.title + '
';
html += '
' + status.desc + '
';
// Expected Time Display with Countdown/Overdue
if (order.estimated_ready_time && ['confirmed', 'preparing', 'ready', 'out_for_delivery'].includes(order.status)) {
var bgGradient = isOverdue ? 'linear-gradient(135deg, #fee2e2, #fecaca)' : 'linear-gradient(135deg, #ecfdf5, #d1fae5)';
var borderColor = isOverdue ? '#FF0400' : '#2BB595';
var iconBg = isOverdue ? '#FF0400' : '#2BB595';
var labelColor = isOverdue ? '#991b1b' : '#059669';
var valueColor = isOverdue ? '#7f1d1d' : '#065f46';
html += '
';
// Helper function to get stage timestamp
function getStageTimestamp(order, stage) {
switch (stage) {
case 'pending':
return order.created_date;
case 'confirmed':
return order.confirmed_at;
case 'preparing':
return order.preparing_started_at;
case 'ready':
return order.ready_at;
case 'out_for_delivery':
return order.out_for_delivery_at;
case 'completed':
return order.completed_at;
default:
return null;
}
}
// Progress Tracker - responsive with modern design
html += '
';
html += '
Order Progress
';
html += '
';
html += '';
html += '
';
stages.forEach(function(stage, idx) {
var isActive = stages.indexOf(order.status) >= idx;
var isCurrent = order.status === stage;
var stageConfig = statusConfig[stage] || { icon: '⏳', title: stage, color: '#64748b', bgColor: '#e2e8f0' };
var timestamp = getStageTimestamp(order, stage);
html += '
';
// Connecting line (horizontal line between stages)
if (idx < stages.length - 1) {
var lineColor = isActive && !isCurrent ? '#22c55e' : isActive ? stageConfig.color : '#cbd5e1';
html += '';
}
// Circle with icon
html += '
' + stageConfig.icon + '
';
// Status title and timestamp
html += '
';
html += '
' + stageConfig.title + '
';
if (timestamp) {
var timestampDate = new Date(timestamp);
var formattedTime = timestampDate.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
html += '
' + formattedTime + '
';
}
html += '
';
html += '
';
});
html += '
';
html += '
';
// Live Tracking Map - only for out_for_delivery orders
if (order.status === 'out_for_delivery' && order.driver_location && order.delivery_location && order.restaurant_location) {
html += '
';
html += '
🚗 Live Tracking
';
html += '';
// Driver info card below map
html += '
';
html += '
🚗
';
html += '
';
if (order.driver_name) {
html += '
' + order.driver_name + '
';
}
if (order.driver_phone) {
html += '📞' + order.driver_phone + '';
}
if (order.driver_vehicle_type && order.driver_vehicle_number) {
html += '
';
// Special Notes - mobile friendly
if (order.special_notes) {
html += '
📝 Special Notes:
' + order.special_notes + '
';
}
html += '
';
html += '
';
html += '
';
// Add pulse animation for current status and payment method
var confirmPulseColor = restaurant.theme_button_color || '#f97316';
var confirmPulseRgb = hexToRgb(confirmPulseColor);
html += '';
html += '
';
return html;
}
function renderOptionsModal(currency) {
var item = selectedItemForOptions;
console.log('[Embedder Options Render] =============================');
console.log('[Embedder Options Render] Item:', item.name);
console.log('[Embedder Options Render] Item.options structure:', JSON.stringify(item.options, null, 2));
console.log('[Embedder Options Render] selectedOptions:', JSON.stringify(selectedOptions));
console.log('[Embedder Options Render] =============================');
// Calculate total price with options
var calculatedPrice = item.price;
if (item.options) {
item.options.forEach(function(optGroup) {
var selections = selectedOptions[optGroup.name] || [];
selections.forEach(function(selectedChoice) {
var choice = optGroup.choices.find(function(c) { return c.name === selectedChoice; });
if (choice && choice.price_modifier) {
calculatedPrice += choice.price_modifier;
}
});
});
}
var totalPrice = calculatedPrice * optionsQuantity;
var html = '
';
html += '
';
// Header
html += '
';
html += '
' + item.name + '
';
html += '';
html += '
';
// Scrollable content
html += '
';
// Image
if (item.image_url) {
html += '
';
html += '';
html += '
';
}
// Description
if (item.description) {
html += '
' + item.description + '
';
}
// Base Price
html += '
';
html += 'Base Price:';
html += '' + currency + item.price.toFixed(2) + '';
html += '
';
// Option Groups
if (item.options && item.options.length > 0) {
html += '