Add booking system with calendar and email notifications (v0.3.0)
All checks were successful
Create Release Package / build-release (push) Successful in 1m5s
All checks were successful
Create Release Package / build-release (push) Successful in 1m5s
- Booking Custom Post Type with full management features - Room and guest relationship tracking - Check-in/check-out date management with validation - Booking status workflow (pending, confirmed, checked_in, checked_out, cancelled) - Automatic price calculation using existing Calculator - Availability system with real-time conflict detection - AJAX endpoint for instant availability validation - Calendar admin page with monthly view and room/building filters - Color-coded booking status display with legend - Email notifications for new bookings, confirmations, and cancellations - HTML email templates with placeholder-based system - Auto-generated booking references (BNB-YYYY-NNNNN) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -277,6 +277,306 @@
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize booking form functionality.
|
||||
*/
|
||||
function initBookingForm() {
|
||||
var $roomSelect = $('#bnb_booking_room_id');
|
||||
var $checkInInput = $('#bnb_booking_check_in');
|
||||
var $checkOutInput = $('#bnb_booking_check_out');
|
||||
var $nightsDisplay = $('#bnb-booking-nights-display');
|
||||
var $availabilityDisplay = $('#bnb-booking-availability-display');
|
||||
var $priceDisplay = $('#bnb-booking-price-display');
|
||||
var $calculatedPriceInput = $('#bnb_booking_calculated_price');
|
||||
var $priceBreakdownInput = $('#bnb_booking_price_breakdown');
|
||||
var $breakdownDisplay = $('#bnb-booking-breakdown-display');
|
||||
var $recalculateBtn = $('#bnb-recalculate-price');
|
||||
var $statusSelect = $('#bnb_booking_status');
|
||||
var $statusPreview = $('#bnb-status-preview .bnb-status-badge');
|
||||
|
||||
// Check if we're on a booking edit page.
|
||||
if (!$roomSelect.length || !$checkInInput.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current booking ID if editing.
|
||||
var bookingId = null;
|
||||
var $postId = $('input[name="post_ID"]');
|
||||
if ($postId.length) {
|
||||
bookingId = parseInt($postId.val(), 10);
|
||||
}
|
||||
|
||||
// Debounce timer for availability check.
|
||||
var availabilityTimer = null;
|
||||
|
||||
/**
|
||||
* Update nights display based on selected dates.
|
||||
*/
|
||||
function updateNightsDisplay() {
|
||||
var checkIn = $checkInInput.val();
|
||||
var checkOut = $checkOutInput.val();
|
||||
|
||||
if (checkIn && checkOut) {
|
||||
var startDate = new Date(checkIn);
|
||||
var endDate = new Date(checkOut);
|
||||
var nights = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (nights > 0) {
|
||||
var nightText = nights === 1 ? wpBnbAdmin.i18n.night : wpBnbAdmin.i18n.nights;
|
||||
$nightsDisplay.text(nights + ' ' + nightText);
|
||||
} else {
|
||||
$nightsDisplay.text(wpBnbAdmin.i18n.error || 'Invalid date range');
|
||||
$nightsDisplay.css('color', '#d63638');
|
||||
}
|
||||
} else {
|
||||
$nightsDisplay.text(wpBnbAdmin.i18n.selectRoomAndDates);
|
||||
$nightsDisplay.css('color', '');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check availability via AJAX.
|
||||
*/
|
||||
function checkAvailability() {
|
||||
var roomId = $roomSelect.val();
|
||||
var checkIn = $checkInInput.val();
|
||||
var checkOut = $checkOutInput.val();
|
||||
|
||||
if (!roomId || !checkIn || !checkOut) {
|
||||
$availabilityDisplay
|
||||
.text(wpBnbAdmin.i18n.selectRoomAndDates)
|
||||
.removeClass('bnb-available bnb-not-available')
|
||||
.addClass('bnb-checking');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate dates.
|
||||
var startDate = new Date(checkIn);
|
||||
var endDate = new Date(checkOut);
|
||||
if (endDate <= startDate) {
|
||||
$availabilityDisplay
|
||||
.text(wpBnbAdmin.i18n.error || 'Check-out must be after check-in')
|
||||
.removeClass('bnb-available bnb-checking')
|
||||
.addClass('bnb-not-available');
|
||||
return;
|
||||
}
|
||||
|
||||
// Show checking status.
|
||||
$availabilityDisplay
|
||||
.text(wpBnbAdmin.i18n.checking)
|
||||
.removeClass('bnb-available bnb-not-available')
|
||||
.addClass('bnb-checking');
|
||||
|
||||
// Make AJAX request.
|
||||
$.ajax({
|
||||
url: wpBnbAdmin.ajaxUrl,
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'wp_bnb_check_availability',
|
||||
nonce: wpBnbAdmin.nonce,
|
||||
room_id: roomId,
|
||||
check_in: checkIn,
|
||||
check_out: checkOut,
|
||||
exclude_booking: bookingId
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
var data = response.data;
|
||||
|
||||
if (data.available) {
|
||||
$availabilityDisplay
|
||||
.html('<span class="dashicons dashicons-yes-alt"></span> ' + wpBnbAdmin.i18n.available)
|
||||
.removeClass('bnb-not-available bnb-checking')
|
||||
.addClass('bnb-available');
|
||||
|
||||
// Update price display.
|
||||
if (data.price_formatted) {
|
||||
$priceDisplay.html('<strong>' + data.price_formatted + '</strong>');
|
||||
$calculatedPriceInput.val(data.price);
|
||||
|
||||
if (data.breakdown) {
|
||||
$priceBreakdownInput.val(JSON.stringify(data.breakdown));
|
||||
updateBreakdownDisplay(data.breakdown);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
var conflictText = wpBnbAdmin.i18n.notAvailable;
|
||||
if (data.conflicts && data.conflicts.length > 0) {
|
||||
conflictText += ' (' + data.conflicts[0].reference + ')';
|
||||
}
|
||||
$availabilityDisplay
|
||||
.html('<span class="dashicons dashicons-dismiss"></span> ' + conflictText)
|
||||
.removeClass('bnb-available bnb-checking')
|
||||
.addClass('bnb-not-available');
|
||||
}
|
||||
|
||||
// Update nights display with response data.
|
||||
if (data.nights) {
|
||||
var nightText = data.nights === 1 ? wpBnbAdmin.i18n.night : wpBnbAdmin.i18n.nights;
|
||||
$nightsDisplay.text(data.nights + ' ' + nightText);
|
||||
}
|
||||
} else {
|
||||
$availabilityDisplay
|
||||
.text(response.data.message || wpBnbAdmin.i18n.error)
|
||||
.removeClass('bnb-available bnb-checking')
|
||||
.addClass('bnb-not-available');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$availabilityDisplay
|
||||
.text(wpBnbAdmin.i18n.error)
|
||||
.removeClass('bnb-available bnb-checking')
|
||||
.addClass('bnb-not-available');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update breakdown display with formatted data.
|
||||
*
|
||||
* @param {Object} breakdown Price breakdown data.
|
||||
*/
|
||||
function updateBreakdownDisplay(breakdown) {
|
||||
if (!$breakdownDisplay.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '<ul class="bnb-breakdown-list">';
|
||||
|
||||
if (breakdown.tier) {
|
||||
html += '<li><strong>Pricing Tier:</strong> ' + breakdown.tier.replace('_', ' ') + '</li>';
|
||||
}
|
||||
|
||||
if (breakdown.nights && Array.isArray(breakdown.nights)) {
|
||||
html += '<li><strong>Nights:</strong> ' + breakdown.nights.length + '</li>';
|
||||
if (breakdown.nightly_rate) {
|
||||
html += '<li><strong>Nightly Rate:</strong> ' + formatPrice(breakdown.nightly_rate) + '</li>';
|
||||
}
|
||||
} else if (breakdown.weeks) {
|
||||
html += '<li><strong>Weeks:</strong> ' + breakdown.weeks + '</li>';
|
||||
if (breakdown.weekly_rate) {
|
||||
html += '<li><strong>Weekly Rate:</strong> ' + formatPrice(breakdown.weekly_rate) + '</li>';
|
||||
}
|
||||
} else if (breakdown.months) {
|
||||
html += '<li><strong>Months:</strong> ' + breakdown.months + '</li>';
|
||||
if (breakdown.monthly_rate) {
|
||||
html += '<li><strong>Monthly Rate:</strong> ' + formatPrice(breakdown.monthly_rate) + '</li>';
|
||||
}
|
||||
}
|
||||
|
||||
if (breakdown.total) {
|
||||
html += '<li><strong>Total:</strong> ' + formatPrice(breakdown.total) + '</li>';
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
$breakdownDisplay.html(html);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format price for display.
|
||||
*
|
||||
* @param {number} price Price value.
|
||||
* @return {string} Formatted price.
|
||||
*/
|
||||
function formatPrice(price) {
|
||||
// Simple formatting - server-side Calculator::formatPrice is more complete.
|
||||
return parseFloat(price).toFixed(2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Debounced availability check.
|
||||
*/
|
||||
function debouncedAvailabilityCheck() {
|
||||
updateNightsDisplay();
|
||||
|
||||
// Clear existing timer.
|
||||
if (availabilityTimer) {
|
||||
clearTimeout(availabilityTimer);
|
||||
}
|
||||
|
||||
// Set new timer to check availability after 500ms.
|
||||
availabilityTimer = setTimeout(checkAvailability, 500);
|
||||
}
|
||||
|
||||
// Bind change events to trigger availability check.
|
||||
$roomSelect.on('change', debouncedAvailabilityCheck);
|
||||
$checkInInput.on('change', debouncedAvailabilityCheck);
|
||||
$checkOutInput.on('change', debouncedAvailabilityCheck);
|
||||
|
||||
// Recalculate price button.
|
||||
if ($recalculateBtn.length) {
|
||||
$recalculateBtn.on('click', function(e) {
|
||||
e.preventDefault();
|
||||
checkAvailability();
|
||||
});
|
||||
}
|
||||
|
||||
// Status preview update.
|
||||
if ($statusSelect.length && $statusPreview.length) {
|
||||
$statusSelect.on('change', function() {
|
||||
var $selected = $(this).find('option:selected');
|
||||
var color = $selected.data('color') || '#ccc';
|
||||
var text = $selected.text();
|
||||
|
||||
$statusPreview
|
||||
.css('background-color', color)
|
||||
.text(text);
|
||||
});
|
||||
}
|
||||
|
||||
// Set min date for check-in to today.
|
||||
var today = new Date().toISOString().split('T')[0];
|
||||
$checkInInput.attr('min', today);
|
||||
|
||||
// Update check-out min date when check-in changes.
|
||||
$checkInInput.on('change', function() {
|
||||
var checkIn = $(this).val();
|
||||
if (checkIn) {
|
||||
var nextDay = new Date(checkIn);
|
||||
nextDay.setDate(nextDay.getDate() + 1);
|
||||
var minCheckOut = nextDay.toISOString().split('T')[0];
|
||||
$checkOutInput.attr('min', minCheckOut);
|
||||
|
||||
// If check-out is before new min, update it.
|
||||
if ($checkOutInput.val() && $checkOutInput.val() <= checkIn) {
|
||||
$checkOutInput.val(minCheckOut);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize calendar page functionality.
|
||||
*/
|
||||
function initCalendarPage() {
|
||||
var $calendar = $('.bnb-calendar-grid');
|
||||
|
||||
if (!$calendar.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Add hover effect for booking cells.
|
||||
$calendar.on('mouseenter', '.bnb-calendar-day.booked', function() {
|
||||
var bookingId = $(this).data('booking-id');
|
||||
if (bookingId) {
|
||||
$calendar.find('.bnb-calendar-day[data-booking-id="' + bookingId + '"]')
|
||||
.addClass('booking-hover');
|
||||
}
|
||||
}).on('mouseleave', '.bnb-calendar-day.booked', function() {
|
||||
$calendar.find('.bnb-calendar-day.booking-hover')
|
||||
.removeClass('booking-hover');
|
||||
});
|
||||
|
||||
// Click to edit booking.
|
||||
$calendar.on('click', '.bnb-calendar-day.booked', function() {
|
||||
var bookingId = $(this).data('booking-id');
|
||||
if (bookingId) {
|
||||
window.location.href = wpBnbAdmin.ajaxUrl.replace('admin-ajax.php', 'post.php?post=' + bookingId + '&action=edit');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize on document ready.
|
||||
$(document).ready(function() {
|
||||
initLicenseManagement();
|
||||
@@ -284,6 +584,8 @@
|
||||
initPricingSettings();
|
||||
initSeasonForm();
|
||||
initPricingMetaBox();
|
||||
initBookingForm();
|
||||
initCalendarPage();
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
Reference in New Issue
Block a user