/**
|
* CartCheckout — Provider-agnostic cart & checkout base class
|
*
|
* Handles: cart add/remove/clear, quantity management, totals,
|
* saved cards UI, order tracking, localStorage persistence.
|
*
|
* Subclasses must implement:
|
* - init() → initialize the payment provider SDK
|
* - processPayment() → handle payment with provider
|
* - submitToServer() → send payment data to WP REST endpoint
|
* - loadSavedCards() → fetch saved cards from provider
|
*
|
* HTML structure expected: see Checkout.php (JVBase\ui\Checkout)
|
*/
|
class Checkout {
|
constructor(config = {}) {
|
this.config = config;
|
|
this.isInitialized = false;
|
this.cartItems = new Map();
|
this.checkout = document.querySelector('aside#cart');
|
this.provider = this.checkout?.querySelector('form')?.dataset.provider || '';
|
|
this.isOpen = this.config.isOpen !== '1' || false;
|
this.isLoggedIn = this.config.is_logged_in || false;
|
this.userEmail = this.config.user_email || '';
|
this.savedCards = [];
|
this.selectedCardId = null;
|
this.cartId = null;
|
this.stepMultiplier = 1;
|
|
this.cache = new window.jvbCache('cart', { TTL: 8.64e+7 });
|
this.a11y = window.jvbA11y;
|
|
this.initCart();
|
|
if (this.checkout) {
|
this.initElements();
|
this.init(); // provider-specific
|
this.initListeners();
|
|
if (this.isLoggedIn) {
|
this.loadSavedCards();
|
}
|
}
|
|
this.popup = window.jvbPopup.registerPopup({
|
popup: this.checkout,
|
toggle: this.toggle,
|
name: 'Cart',
|
onOpen: this.maybeAddEmptyState.bind(this),
|
});
|
}
|
|
/*****************************************************************
|
* ABSTRACT — subclasses must implement
|
*****************************************************************/
|
|
/** Initialize provider SDK (Square payments, Helcim iframe, etc.) */
|
async init() {
|
throw new Error('init() must be implemented by subclass');
|
}
|
|
/** Process payment through provider and return result */
|
async processPayment(orderData) {
|
throw new Error('processPayment() must be implemented by subclass');
|
}
|
|
/** Submit payment token/result to server */
|
async submitToServer(tokenOrData, orderData) {
|
throw new Error('submitToServer() must be implemented by subclass');
|
}
|
|
/** Load saved cards from provider */
|
async loadSavedCards() {
|
// Default no-op; override if provider supports saved cards
|
}
|
|
/*****************************************************************
|
* CART PERSISTENCE
|
*****************************************************************/
|
|
async initCart() {
|
this.cartItems = await this.cache.get('cart') ?? new Map();
|
if (this.cartItems.size > 0) {
|
this.notifyRestoredCart();
|
}
|
}
|
|
saveCart() {
|
this.updateTotal();
|
this.cache.set('cart', this.cartItems);
|
}
|
|
clearCart() {
|
this.cartItems.clear();
|
window.removeChildren(this.table);
|
this.saveCart();
|
}
|
|
getCartId() {
|
if (!this.cartId) {
|
this.cartId = crypto.randomUUID();
|
this.cache.set('cart_id', this.cartId);
|
}
|
return this.cartId;
|
}
|
|
/*****************************************************************
|
* ELEMENT SETUP
|
*****************************************************************/
|
|
initElements() {
|
this.toggle = document.querySelector('.toggle-cart');
|
if (!this.isOpen) {
|
this.toggle.disabled = true;
|
this.toggle.title = 'Currently closed for online ordering';
|
}
|
this.checkoutPanel = this.checkout.querySelector('button[data-tab="checkout"]');
|
this.itemsList = this.checkout.querySelector('.cart-items');
|
this.table = this.checkout.querySelector('.cart-items tbody');
|
this.total = this.checkout.querySelector('.cart-total');
|
this.totalTax = this.total.querySelector('.tax span');
|
this.grandTotal = this.total.querySelector('.total span');
|
this.checkoutForm = this.checkout.querySelector('form');
|
|
this.tabs = new window.jvbTabs(this.checkoutForm, {
|
updateURL: false
|
});
|
}
|
|
initListeners() {
|
this.clickHandler = this.handleClick.bind(this);
|
this.keyHandler = this.handleEscape.bind(this);
|
this.changeHandler = this.handleChange.bind(this);
|
|
this.checkoutForm.addEventListener('submit', (e) => this.handleFormSubmit(e));
|
document.addEventListener('click', this.clickHandler);
|
document.addEventListener('change', this.changeHandler);
|
}
|
|
/*****************************************************************
|
* EVENT HANDLERS
|
*****************************************************************/
|
|
handleClick(e) {
|
if (window.targetCheck(e, 'button') && window.targetCheck(e, 'div.quantity')) {
|
let quantity = window.targetCheck(e, 'div.quantity');
|
this.handleNumberClick(e, quantity);
|
} else if (window.targetCheck(e, '[data-add-to-cart]')) {
|
let add = window.targetCheck(e, '[data-add-to-cart]');
|
this.handleAddToCart(add);
|
} else if (window.targetCheck(e, '[data-remove-from-cart]')) {
|
let remove = window.targetCheck(e, '[data-remove-from-cart]');
|
this.handleRemoveFromCart(remove);
|
} else if (window.targetCheck(e, '[data-clear-cart]')) {
|
this.clearCart();
|
} else if (window.targetCheck(e, '[data-dismiss]')) {
|
window.targetCheck(e, '[data-dismiss]').closest('.restored')?.remove();
|
}
|
}
|
|
handleChange(e) {
|
let input = window.targetCheck(e, '.quantity-input');
|
if (input) {
|
let item = e.target.closest('.quantity');
|
let value = input.value;
|
|
if (window.targetCheck(e, '.cart-items')) {
|
let main = document.querySelector(`.menu-section [data-id="${item.dataset.id}"] input`);
|
if (main) main.value = input.value;
|
}
|
|
if (value > 0) {
|
this.handleAddToCart(item);
|
} else {
|
this.handleRemoveFromCart(item);
|
}
|
}
|
}
|
|
handleEscape(e) {
|
if (e.key === 'Escape') {
|
this.stepMultiplier = 1;
|
} else if (e.ctrlKey && e.shiftKey) {
|
this.stepMultiplier = Math.max(parseInt(this.stepMultiplier) * 100, 1000);
|
} else if (e.shiftKey) {
|
this.stepMultiplier = Math.max(parseInt(this.stepMultiplier) * 10, 1000);
|
}
|
}
|
|
/*****************************************************************
|
* CART ITEM MANAGEMENT
|
*****************************************************************/
|
|
handleAddToCart(item) {
|
let id = item.dataset.id;
|
let price = parseFloat(item.dataset.price);
|
let quantity = parseInt(item.querySelector('.quantity-input')?.value) ?? 1;
|
let total = parseFloat(price * quantity);
|
|
this.createItemElement(item);
|
|
this.cartItems.set(id, {
|
post_id: id,
|
name: item.dataset.name,
|
price: price,
|
quantity: quantity,
|
total: total,
|
catalog_id: item.dataset.catalogId || '',
|
});
|
this.saveCart();
|
}
|
|
handleRemoveFromCart(item) {
|
if (confirm('This will remove this item from the cart. Continue?')) {
|
if (!item.querySelector('[data-id]')) {
|
item = item.closest('.item')?.querySelector('.quantity.field');
|
}
|
let id = item.dataset.id;
|
this.cartItems.delete(id);
|
this.table.querySelector(`[data-id="${id}"]`)?.closest('tr').remove();
|
|
let input = document.querySelector(`[data-id="${id}"] input`);
|
if (input) input.value = 0;
|
|
this.maybeAddEmptyState();
|
this.saveCart();
|
}
|
}
|
|
handleNumberClick(e, container) {
|
e.preventDefault();
|
let change = 0;
|
if (e.target.closest('.increase')) change += 1;
|
else if (e.target.closest('.decrease')) change -= 1;
|
|
if (change !== 0) {
|
let step = parseInt(container.dataset.step);
|
let input = container.querySelector('input');
|
let value = (input.value === '') ? 0 : parseInt(input.value);
|
|
input.value = value + (step * change * this.stepMultiplier);
|
input.dispatchEvent(new Event('change', { bubbles: true }));
|
this.handleNumberLimits(container);
|
}
|
}
|
|
handleNumberLimits(container) {
|
let min = container.dataset.min;
|
let max = container.dataset.max;
|
let input = container.querySelector('input');
|
let increase = container.querySelector('.increase');
|
let decrease = container.querySelector('.decrease');
|
let value = parseInt(input.value);
|
|
if (value <= min) {
|
input.value = min;
|
decrease.disabled = true;
|
} else if (value >= max) {
|
input.value = max;
|
increase.disabled = true;
|
} else {
|
increase.disabled = false;
|
decrease.disabled = false;
|
}
|
}
|
|
/*****************************************************************
|
* ITEM ELEMENT CREATION
|
*****************************************************************/
|
|
createItemElement(item) {
|
let element = this.itemsList.querySelector(`[data-id="${item.dataset.id}"]`);
|
let add = false;
|
let price = item.dataset.price;
|
let quantity = item.querySelector('[name="quantity"]')?.value ?? 1;
|
|
if (!element) {
|
add = true;
|
element = window.getTemplate('cartItem');
|
let field = element.querySelector('.quantity');
|
[
|
field.dataset.id,
|
element.querySelector('label').textContent,
|
element.querySelector('.price').textContent,
|
field.dataset.price,
|
field.dataset.catalogId,
|
] = [
|
item.dataset.id,
|
item.dataset.name,
|
window.formatPrice(price),
|
price,
|
item.dataset.catalogId || '',
|
];
|
} else {
|
element = element.closest('tr');
|
}
|
|
[
|
element.querySelector('[name="quantity"]').value,
|
element.querySelector('.total').textContent,
|
] = [
|
quantity,
|
window.formatPrice(quantity * price),
|
];
|
|
if (add) {
|
element.classList.add('adding');
|
this.table.append(element);
|
setTimeout(() => element.classList.remove('adding'), 500);
|
}
|
}
|
|
/*****************************************************************
|
* CART STATE
|
*****************************************************************/
|
|
maybeAddEmptyState() {
|
let empty = this.itemsList.querySelector('.empty');
|
if (empty) empty.remove();
|
|
if (this.cartItems.size === 0) {
|
this.checkoutPanel.disabled = true;
|
this.checkoutPanel.title = 'Add some things to your cart first!';
|
let emptyEl = window.getTemplate('emptyCart');
|
this.itemsList.append(emptyEl);
|
this.table.closest('table').hidden = true;
|
this.total.hidden = true;
|
this.a11y.announce('Nothing in Cart');
|
} else {
|
this.checkoutPanel.disabled = false;
|
this.table.closest('table').hidden = false;
|
this.total.hidden = false;
|
this.checkoutPanel.title = 'Checkout';
|
}
|
}
|
|
notifyRestoredCart() {
|
let restored = window.getTemplate('restoredCart');
|
this.checkout.querySelector('.tab-content[data-tab=cartItems]').insertBefore(restored, this.itemsList);
|
|
this.cartItems.forEach(item => {
|
let element = window.getTemplate('cartItem');
|
let field = element.querySelector('.quantity');
|
[
|
field.dataset.id,
|
element.querySelector('label').textContent,
|
element.querySelector('.price').textContent,
|
field.dataset.price,
|
field.dataset.catalogId,
|
element.querySelector('[name="quantity"]').value,
|
element.querySelector('.total').textContent,
|
] = [
|
item.post_id,
|
item.name,
|
window.formatPrice(item.price),
|
item.price,
|
item.catalog_id || '',
|
item.quantity,
|
window.formatPrice(item.quantity * item.price),
|
];
|
this.table.append(element);
|
});
|
this.updateTotal();
|
}
|
|
/*****************************************************************
|
* TOTALS
|
*****************************************************************/
|
|
updateTotal() {
|
let total = 0;
|
this.cartItems.forEach(item => total += item.total);
|
let tax = total * 0.05;
|
window.eraseText(this.totalTax);
|
window.eraseText(this.grandTotal);
|
window.typeText(this.totalTax, window.formatPrice(tax));
|
window.typeText(this.grandTotal, window.formatPrice(total + tax));
|
this.totalTax.classList.remove('typeText');
|
}
|
|
/*****************************************************************
|
* FORM SUBMIT
|
*****************************************************************/
|
|
extractOrderData(form) {
|
const items = Array.from(this.cartItems.values()).map(item => ({
|
catalog_id: item.catalog_id,
|
quantity: String(item.quantity),
|
price: item.price,
|
note: item.note || '',
|
}));
|
|
const total = items.reduce((sum, item) =>
|
sum + (item.price * item.quantity), 0
|
);
|
|
return {
|
total: Math.round(total * 100),
|
items: items,
|
customer: {
|
email: this.isLoggedIn ? this.userEmail : (form.querySelector('[name="cart_email"]')?.value || ''),
|
name: form.querySelector('[name="cart_name"]')?.value || '',
|
phone: form.querySelector('[name="cart_phone"]')?.value || '',
|
},
|
note: form.querySelector('[name="special_instructions"]')?.value || '',
|
pickup_time: form.querySelector('[name="pickup_time"]')?.value || '',
|
};
|
}
|
|
async handleFormSubmit(event) {
|
if (!this.isOpen) return;
|
event.preventDefault();
|
|
if (!this.isInitialized) {
|
this.handleError('Checkout not initialized');
|
return;
|
}
|
|
const form = event.target;
|
const orderData = this.extractOrderData(form);
|
|
try {
|
window.jvbLoading?.showLoading?.('Processing payment...');
|
const result = await this.processPayment(orderData);
|
this.handleSuccess(result, form);
|
} catch (error) {
|
this.handleError(error);
|
} finally {
|
window.jvbLoading?.hideLoading?.();
|
}
|
}
|
|
/*****************************************************************
|
* ORDER TRACKING
|
*****************************************************************/
|
|
trackOrder(orderNum) {
|
this.orderId = orderNum;
|
this.scheduleOrderCheck();
|
this.checkout.querySelector('button[data-tab=order]').hidden = false;
|
}
|
|
scheduleOrderCheck() {
|
window.debouncer.schedule(
|
'order',
|
() => this.checkOrderStatus(),
|
30000
|
);
|
}
|
|
async checkOrderStatus() {
|
const response = await fetch(`${this.config.api_url}order-status/${this.orderId}`, {
|
headers: { 'X-WP-Nonce': this.config.nonce }
|
});
|
const data = await response.json();
|
if (data.status !== 'ready') {
|
this.scheduleOrderCheck();
|
}
|
this.updateOrderStatus(data);
|
}
|
|
updateOrderStatus(data) {
|
this.checkout.querySelectorAll('.status-item').forEach(item => {
|
if (item.dataset.status === data.status) {
|
item.classList.add('active');
|
}
|
});
|
this.checkout.querySelector('#eta').textContent = data.eta || 'In progress';
|
}
|
|
/*****************************************************************
|
* SAVED CARDS — shared rendering, provider fetches cards
|
*****************************************************************/
|
|
renderSavedCards() {
|
const container = document.getElementById('saved-cards');
|
if (!container || this.savedCards.length === 0) return;
|
|
const html = `
|
<div class="saved-cards-section">
|
<h4>Saved Payment Methods</h4>
|
${this.savedCards.map(card => `
|
<label class="saved-card">
|
<input type="radio" name="payment-method" value="saved" data-card-id="${card.id}">
|
<span class="card-info">
|
<strong>${card.card_brand}</strong> ending in ${card.last_4}
|
<small>Exp: ${card.exp_month}/${card.exp_year}</small>
|
</span>
|
</label>
|
`).join('')}
|
<label class="saved-card">
|
<input type="radio" name="payment-method" value="new" checked>
|
<span>Use a new card</span>
|
</label>
|
</div>
|
`;
|
|
container.innerHTML = html;
|
|
container.querySelectorAll('input[name="payment-method"]').forEach(radio => {
|
radio.addEventListener('change', (e) => {
|
const useNewCard = e.target.value === 'new';
|
const paymentContainer = document.getElementById('payment-container');
|
if (paymentContainer) {
|
paymentContainer.style.display = useNewCard ? 'block' : 'none';
|
}
|
this.selectedCardId = useNewCard ? null : e.target.dataset.cardId;
|
});
|
});
|
}
|
|
/*****************************************************************
|
* RESULT HANDLERS
|
*****************************************************************/
|
|
handleSuccess(result, form) {
|
document.dispatchEvent(new CustomEvent('checkoutSuccess', {
|
detail: { result, form, provider: this.provider }
|
}));
|
|
const successUrl = form.dataset.successUrl ||
|
`/order-confirmation/?order=${result.order_id || result.wp_order_id}`;
|
window.location.href = successUrl;
|
}
|
|
handleError(error) {
|
console.error(`${this.provider} checkout error:`, error);
|
|
document.dispatchEvent(new CustomEvent('checkoutError', {
|
detail: { error, provider: this.provider }
|
}));
|
|
window.jvbNotifications?.show?.(
|
error.message || error || 'Payment failed',
|
'error'
|
);
|
}
|
}
|
|
window.jvbCheckout = Checkout;
|
