magdev
0c601df568
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>
592 lines
16 KiB
JavaScript
592 lines
16 KiB
JavaScript
/**
|
|
* WP BnB Admin JavaScript
|
|
*
|
|
* @package Magdev\WpBnb
|
|
*/
|
|
|
|
(function($) {
|
|
'use strict';
|
|
|
|
/**
|
|
* Initialize license management functionality.
|
|
*/
|
|
function initLicenseManagement() {
|
|
var $validateBtn = $('#wp-bnb-validate-license');
|
|
var $activateBtn = $('#wp-bnb-activate-license');
|
|
var $spinner = $('#wp-bnb-license-spinner');
|
|
var $message = $('#wp-bnb-license-message');
|
|
|
|
if (!$validateBtn.length) {
|
|
return;
|
|
}
|
|
|
|
// Validate license button click.
|
|
$validateBtn.on('click', function(e) {
|
|
e.preventDefault();
|
|
performLicenseAction('wp_bnb_validate_license', wpBnbAdmin.i18n.validating);
|
|
});
|
|
|
|
// Activate license button click.
|
|
$activateBtn.on('click', function(e) {
|
|
e.preventDefault();
|
|
performLicenseAction('wp_bnb_activate_license', wpBnbAdmin.i18n.activating);
|
|
});
|
|
|
|
/**
|
|
* Perform a license AJAX action.
|
|
*
|
|
* @param {string} action AJAX action name.
|
|
* @param {string} loadingText Loading text to display.
|
|
*/
|
|
function performLicenseAction(action, loadingText) {
|
|
// Disable buttons and show spinner.
|
|
$validateBtn.prop('disabled', true);
|
|
$activateBtn.prop('disabled', true);
|
|
$spinner.addClass('is-active');
|
|
$message.hide();
|
|
|
|
$.ajax({
|
|
url: wpBnbAdmin.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: action,
|
|
nonce: wpBnbAdmin.nonce
|
|
},
|
|
success: function(response) {
|
|
$spinner.removeClass('is-active');
|
|
$validateBtn.prop('disabled', false);
|
|
$activateBtn.prop('disabled', false);
|
|
|
|
if (response.success) {
|
|
showMessage('success', response.data.message);
|
|
// Reload page after short delay to show updated status.
|
|
setTimeout(function() {
|
|
window.location.reload();
|
|
}, 1500);
|
|
} else {
|
|
showMessage('error', response.data.message || wpBnbAdmin.i18n.error);
|
|
}
|
|
},
|
|
error: function() {
|
|
$spinner.removeClass('is-active');
|
|
$validateBtn.prop('disabled', false);
|
|
$activateBtn.prop('disabled', false);
|
|
showMessage('error', wpBnbAdmin.i18n.error);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Show a message.
|
|
*
|
|
* @param {string} type Message type (success or error).
|
|
* @param {string} message Message text.
|
|
*/
|
|
function showMessage(type, message) {
|
|
$message
|
|
.removeClass('success error')
|
|
.addClass(type)
|
|
.text(message)
|
|
.fadeIn();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialize room gallery functionality.
|
|
*/
|
|
function initRoomGallery() {
|
|
var $container = $('#bnb-room-gallery');
|
|
var $addButton = $('#bnb-add-gallery-images');
|
|
var $input = $('#bnb_room_gallery');
|
|
var $imagesContainer = $container.find('.bnb-gallery-images');
|
|
|
|
if (!$addButton.length) {
|
|
return;
|
|
}
|
|
|
|
// Media frame for selecting images.
|
|
var mediaFrame;
|
|
|
|
// Add images button click.
|
|
$addButton.on('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// If frame exists, reopen it.
|
|
if (mediaFrame) {
|
|
mediaFrame.open();
|
|
return;
|
|
}
|
|
|
|
// Create media frame.
|
|
mediaFrame = wp.media({
|
|
title: wpBnbAdmin.i18n.selectImages,
|
|
button: {
|
|
text: wpBnbAdmin.i18n.addToGallery
|
|
},
|
|
multiple: true,
|
|
library: {
|
|
type: 'image'
|
|
}
|
|
});
|
|
|
|
// Handle selection.
|
|
mediaFrame.on('select', function() {
|
|
var selection = mediaFrame.state().get('selection');
|
|
selection.each(function(attachment) {
|
|
var data = attachment.toJSON();
|
|
var thumbnail = data.sizes.thumbnail ? data.sizes.thumbnail.url : data.url;
|
|
|
|
// Check if already in gallery.
|
|
if ($imagesContainer.find('[data-id="' + data.id + '"]').length) {
|
|
return;
|
|
}
|
|
|
|
// Add image to gallery.
|
|
var $image = $('<div class="bnb-gallery-image" data-id="' + data.id + '">' +
|
|
'<img src="' + thumbnail + '" alt="">' +
|
|
'<button type="button" class="bnb-remove-image">×</button>' +
|
|
'</div>');
|
|
$imagesContainer.append($image);
|
|
});
|
|
|
|
updateGalleryInput();
|
|
});
|
|
|
|
mediaFrame.open();
|
|
});
|
|
|
|
// Remove image button click.
|
|
$imagesContainer.on('click', '.bnb-remove-image', function(e) {
|
|
e.preventDefault();
|
|
$(this).closest('.bnb-gallery-image').remove();
|
|
updateGalleryInput();
|
|
});
|
|
|
|
// Make gallery sortable.
|
|
$imagesContainer.sortable({
|
|
items: '.bnb-gallery-image',
|
|
cursor: 'move',
|
|
update: function() {
|
|
updateGalleryInput();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Update the hidden input with gallery image IDs.
|
|
*/
|
|
function updateGalleryInput() {
|
|
var ids = [];
|
|
$imagesContainer.find('.bnb-gallery-image').each(function() {
|
|
ids.push($(this).data('id'));
|
|
});
|
|
$input.val(ids.join(','));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialize pricing settings functionality.
|
|
*/
|
|
function initPricingSettings() {
|
|
var $midTermInput = $('#wp_bnb_mid_term_max_nights');
|
|
var $longTermMin = $('#wp-bnb-long-term-min');
|
|
|
|
if (!$midTermInput.length || !$longTermMin.length) {
|
|
return;
|
|
}
|
|
|
|
// Update long-term minimum display when mid-term max changes.
|
|
$midTermInput.on('input', function() {
|
|
$longTermMin.text($(this).val());
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Initialize season form validation.
|
|
*/
|
|
function initSeasonForm() {
|
|
var $form = $('.bnb-season-form');
|
|
|
|
if (!$form.length) {
|
|
return;
|
|
}
|
|
|
|
// Validate date format on input.
|
|
$form.find('#season_start_date, #season_end_date').on('input', function() {
|
|
var value = $(this).val();
|
|
var isValid = /^\d{2}-\d{2}$/.test(value);
|
|
|
|
if (value.length > 0 && !isValid) {
|
|
$(this).css('border-color', '#d63638');
|
|
} else {
|
|
$(this).css('border-color', '');
|
|
}
|
|
});
|
|
|
|
// Validate modifier range.
|
|
$form.find('#season_modifier').on('input', function() {
|
|
var value = parseFloat($(this).val());
|
|
var $preview = $(this).siblings('.bnb-modifier-preview');
|
|
|
|
if ($preview.length === 0) {
|
|
$preview = $('<span class="bnb-modifier-preview"></span>');
|
|
$(this).after($preview);
|
|
}
|
|
|
|
if (!isNaN(value) && value > 0) {
|
|
var percentage = ((value - 1) * 100).toFixed(0);
|
|
var text = '';
|
|
if (percentage > 0) {
|
|
text = '+' + percentage + '% ' + (wpBnbAdmin.i18n.increase || 'increase');
|
|
$preview.css('color', '#d63638');
|
|
} else if (percentage < 0) {
|
|
text = percentage + '% ' + (wpBnbAdmin.i18n.discount || 'discount');
|
|
$preview.css('color', '#00a32a');
|
|
} else {
|
|
text = wpBnbAdmin.i18n.normalPrice || 'Normal price';
|
|
$preview.css('color', '#646970');
|
|
}
|
|
$preview.text(' = ' + text);
|
|
} else {
|
|
$preview.text('');
|
|
}
|
|
}).trigger('input');
|
|
}
|
|
|
|
/**
|
|
* Initialize pricing meta box interactions.
|
|
*/
|
|
function initPricingMetaBox() {
|
|
var $pricingTable = $('.bnb-pricing-table');
|
|
|
|
if (!$pricingTable.length) {
|
|
return;
|
|
}
|
|
|
|
// Highlight empty required prices.
|
|
$pricingTable.find('input[type="number"]').on('blur', function() {
|
|
var $input = $(this);
|
|
var value = $input.val();
|
|
var isShortTerm = $input.attr('id').indexOf('short_term') !== -1;
|
|
|
|
// Short-term price is recommended.
|
|
if (isShortTerm && (value === '' || parseFloat(value) <= 0)) {
|
|
$input.css('background-color', '#fcf0f1');
|
|
} else {
|
|
$input.css('background-color', '');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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();
|
|
initRoomGallery();
|
|
initPricingSettings();
|
|
initSeasonForm();
|
|
initPricingMetaBox();
|
|
initBookingForm();
|
|
initCalendarPage();
|
|
});
|
|
|
|
})(jQuery);
|