Add booking system with calendar and email notifications (v0.3.0)
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:
2026-01-31 14:37:48 +01:00
parent dabfe1e826
commit 0c601df568
11 changed files with 3419 additions and 28 deletions

View File

@@ -323,3 +323,368 @@
.bnb-season-form input[type="text"].small-text {
width: 80px;
}
/* ==========================================================================
Booking System Styles
========================================================================== */
/* Booking Info Display */
.bnb-booking-info {
padding: 8px 12px;
background: #f6f7f7;
border: 1px solid #c3c4c7;
border-radius: 4px;
font-size: 13px;
}
.bnb-booking-info.bnb-checking {
color: #646970;
font-style: italic;
}
.bnb-booking-info.bnb-available {
background: #d4edda;
border-color: #c3e6cb;
color: #155724;
}
.bnb-booking-info.bnb-not-available {
background: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
}
.bnb-booking-info .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
vertical-align: text-bottom;
margin-right: 3px;
}
/* Booking Price Display */
.bnb-booking-price {
padding: 12px 15px;
background: #f0f6fc;
border: 1px solid #c3c4c7;
border-radius: 4px;
margin-bottom: 10px;
}
.bnb-booking-price strong {
font-size: 18px;
color: #135e96;
}
/* Price Breakdown */
.bnb-booking-breakdown,
.bnb-breakdown-list {
margin: 0;
padding: 0;
list-style: none;
}
.bnb-breakdown-list li {
padding: 5px 0;
border-bottom: 1px dotted #c3c4c7;
}
.bnb-breakdown-list li:last-child {
border-bottom: none;
font-weight: 600;
}
/* Price Override Indicator */
.bnb-price-override {
color: #dba617;
font-weight: bold;
cursor: help;
}
/* Status Preview */
.bnb-status-preview {
margin-top: 10px;
}
.bnb-status-timestamp {
font-size: 11px;
color: #646970;
margin-top: 5px;
}
/* Required Field Indicator */
.required {
color: #d63638;
}
/* Booking Admin Columns */
.column-room,
.column-guest,
.column-dates,
.column-nights,
.column-price {
width: 120px;
}
.column-room small,
.column-guest small,
.column-dates small {
display: block;
color: #646970;
font-size: 11px;
}
/* ==========================================================================
Calendar Page Styles
========================================================================== */
/* Calendar Container */
.bnb-calendar-container {
background: #fff;
border: 1px solid #c3c4c7;
border-radius: 4px;
margin-top: 20px;
}
/* Calendar Header */
.bnb-calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #f6f7f7;
border-bottom: 1px solid #c3c4c7;
}
.bnb-calendar-header h2 {
margin: 0;
font-size: 18px;
}
.bnb-calendar-nav {
display: flex;
gap: 5px;
}
/* Calendar Filters */
.bnb-calendar-filters {
display: flex;
gap: 15px;
padding: 15px 20px;
border-bottom: 1px solid #c3c4c7;
background: #f9f9f9;
}
.bnb-calendar-filters label {
display: flex;
align-items: center;
gap: 8px;
}
.bnb-calendar-filters select {
min-width: 200px;
}
/* Calendar Grid */
.bnb-calendar-grid {
padding: 20px;
overflow-x: auto;
}
.bnb-calendar-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.bnb-calendar-table th,
.bnb-calendar-table td {
border: 1px solid #c3c4c7;
text-align: center;
padding: 0;
min-width: 35px;
}
.bnb-calendar-table th {
background: #f6f7f7;
font-weight: 600;
padding: 8px 4px;
font-size: 11px;
}
.bnb-calendar-table th.room-header {
text-align: left;
padding-left: 10px;
min-width: 150px;
}
/* Calendar Day Cell */
.bnb-calendar-day {
height: 35px;
vertical-align: middle;
position: relative;
cursor: default;
}
.bnb-calendar-day.past {
background: #f0f0f1;
color: #a7aaad;
}
.bnb-calendar-day.today {
background: #f0f6fc;
font-weight: 600;
}
.bnb-calendar-day.today::after {
content: "";
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
background: #2271b1;
border-radius: 50%;
}
.bnb-calendar-day.available {
background: #d4edda;
}
.bnb-calendar-day.booked {
background: #d63638;
color: #fff;
cursor: pointer;
}
.bnb-calendar-day.booked.booking-hover {
background: #a02424;
}
.bnb-calendar-day.booked-start {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.bnb-calendar-day.booked-end {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* Booking Status Colors in Calendar */
.bnb-calendar-day.status-pending {
background: #dba617;
}
.bnb-calendar-day.status-confirmed {
background: #00a32a;
}
.bnb-calendar-day.status-checked_in {
background: #72aee6;
}
/* Room Row in Multi-Room Calendar */
.bnb-calendar-room {
font-weight: 600;
text-align: left;
padding: 8px 10px;
background: #f6f7f7;
}
.bnb-calendar-room small {
font-weight: normal;
color: #646970;
}
/* Calendar Legend */
.bnb-calendar-legend {
display: flex;
gap: 20px;
padding: 15px 20px;
border-top: 1px solid #c3c4c7;
background: #f6f7f7;
}
.bnb-calendar-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.bnb-calendar-legend-color {
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.bnb-calendar-legend-color.available {
background: #d4edda;
}
.bnb-calendar-legend-color.booked {
background: #d63638;
}
.bnb-calendar-legend-color.pending {
background: #dba617;
}
.bnb-calendar-legend-color.confirmed {
background: #00a32a;
}
.bnb-calendar-legend-color.checked-in {
background: #72aee6;
}
/* Tooltip for booking details */
.bnb-calendar-day[title] {
cursor: help;
}
/* No Rooms Message */
.bnb-no-rooms {
padding: 40px;
text-align: center;
color: #646970;
}
.bnb-no-rooms .dashicons {
font-size: 48px;
width: 48px;
height: 48px;
margin-bottom: 15px;
}
/* Calendar Single Room View */
.bnb-calendar-single-room .bnb-calendar-day {
font-size: 12px;
}
.bnb-calendar-single-room .bnb-calendar-day.booked .guest-name {
font-size: 10px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Responsive */
@media screen and (max-width: 782px) {
.bnb-calendar-filters {
flex-direction: column;
}
.bnb-calendar-filters select {
width: 100%;
}
.bnb-calendar-header {
flex-direction: column;
gap: 10px;
}
}

View File

@@ -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);