/**
* Generic Confirmation Modal
*
* A reusable confirmation modal that can be used across all EasyInvoice pages.
*
* @package EasyInvoice
* @since 1.0.0
*
* USAGE EXAMPLES:
*
* 1. Regular confirmation dialog:
* EasyInvoiceConfirmation.show({
* title: 'Delete Item',
* message: 'Are you sure you want to delete this item?',
* confirmText: 'Delete',
* confirmClass: 'bg-red-600 hover:bg-red-700',
* onConfirm: function() { // delete logic }
* });
*
* 2. Quick confirmation for common actions:
* EasyInvoiceConfirmation.confirmAction('delete', 'invoice INV-001', function() {
* // delete logic
* });
*
* 3. Generic upgrade dialog for premium features:
* EasyInvoiceConfirmation.showFeatureUpgrade('Quote Duplication');
*
* 4. Custom upgrade dialog:
* EasyInvoiceConfirmation.showUpgradeDialog({
* featureName: 'Custom Feature',
* description: 'Custom description of the feature benefits',
* onUpgrade: function() { window.open('https://upgrade-url.com', '_blank'); },
* onCancel: function() { }
* });
*
* AVAILABLE PREMIUM FEATURES:
* - Quote Duplication
* - Advanced Reporting
* - Custom Branding
* - Bulk Operations
* - Email Templates
* - Payment Integration
* - Client Portal
* - Recurring Invoices
*/
(function($) {
'use strict';
// Create the modal HTML if it doesn't exist
if ($('#easy-invoice-confirmation-modal').length === 0) {
const modalHTML = `
Confirm Action
Are you sure you want to perform this action?
`;
$('body').append(modalHTML);
}
// Global confirmation modal object
window.EasyInvoiceConfirmation = {
/**
* Show confirmation modal
*
* @param {Object} options Configuration options
* @param {string} options.title Modal title
* @param {string} options.message Modal message
* @param {string} options.confirmText Confirm button text (default: "Confirm")
* @param {string} options.cancelText Cancel button text (default: "Cancel")
* @param {string} options.confirmClass CSS class for confirm button (default: "bg-red-600 hover:bg-red-700")
* @param {Function} options.onConfirm Callback function when confirmed
* @param {Function} options.onCancel Callback function when cancelled
*/
show: function(options) {
const defaults = {
title: 'Confirm Action',
message: 'Are you sure you want to perform this action?',
confirmText: 'Confirm',
cancelText: 'Cancel',
confirmClass: 'bg-red-600 hover:bg-red-700',
onConfirm: function() {},
onCancel: function() {}
};
const config = $.extend({}, defaults, options);
// Update modal content
$('#confirmation-title').text(config.title);
$('#confirmation-message').text(config.message);
$('#confirmation-confirm').text(config.confirmText);
$('#confirmation-cancel').text(config.cancelText);
// Update confirm button styling
var btnClass = config.confirmClass && config.confirmClass.trim() !== ''
? config.confirmClass
: 'bg-red-600 hover:bg-red-700';
$('#confirmation-confirm')
.removeClass()
.addClass('px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 ' + btnClass);
// Store callbacks
$('#easy-invoice-confirmation-modal').data('onConfirm', config.onConfirm);
$('#easy-invoice-confirmation-modal').data('onCancel', config.onCancel);
// Show modal
$('#easy-invoice-confirmation-modal').removeClass('hidden');
},
/**
* Show upgrade to pro modal - Special encouraging dialog
*
* @param {Object} options Configuration options
* @param {string} options.featureName Name of the premium feature (e.g., "Quote Duplication")
* @param {string} options.description Custom description (optional)
* @param {Function} options.onUpgrade Callback function when user clicks upgrade
* @param {Function} options.onCancel Callback function when user cancels
*/
showUpgradeDialog: function(options) {
const defaults = {
featureName: 'Premium Feature',
description: '',
onUpgrade: function() {
// Default upgrade action - redirect to upgrade page
window.open('https://matrixaddons.com/plugins/easy-invoice/#pricing', '_blank');
},
onCancel: function() {}
};
const config = $.extend({}, defaults, options);
// Create upgrade modal HTML if it doesn't exist
if ($('#easy-invoice-upgrade-modal').length === 0) {
const upgradeModalHTML = `
Unlock Premium Features
${config.featureName}
${config.description || `Upgrade to Easy Invoice Pro to unlock ${config.featureName} and many other premium features that will help you manage your business more efficiently.`}
Why teams upgrade to Pro
Advanced reporting & analytics
Client Portal with secure online payments
Partial payments & deposits
Recurring invoices & subscriptions
Payment gateways: Stripe, Square, Mollie, Bank Transfer
Smart reminders & automated emails
Custom branding, premium templates & PDF watermarking
Unlimited quotes & invoices
CSV export & integrations-ready
Priority support & automatic updates
No coding requiredCancel anytimeFast, friendly support
You can activate your license instantly after purchase.
`;
$('body').append(upgradeModalHTML);
// Event handlers for upgrade modal
$(document).on('click', '#upgrade-confirm', function() {
const modal = $('#easy-invoice-upgrade-modal');
const onUpgrade = modal.data('onUpgrade');
if (typeof onUpgrade === 'function') {
onUpgrade();
}
EasyInvoiceConfirmation.hideUpgradeDialog();
});
// Close button handler
$(document).on('click', '#upgrade-close', function() {
const modal = $('#easy-invoice-upgrade-modal');
const onCancel = modal.data('onCancel');
if (typeof onCancel === 'function') {
onCancel();
}
EasyInvoiceConfirmation.hideUpgradeDialog();
});
// Close modal on backdrop click
$(document).on('click', '#easy-invoice-upgrade-modal', function(e) {
if (e.target === this) {
EasyInvoiceConfirmation.hideUpgradeDialog();
}
});
// Close modal on escape key
$(document).on('keydown', function(e) {
if (e.key === 'Escape' && !$('#easy-invoice-upgrade-modal').hasClass('hidden')) {
EasyInvoiceConfirmation.hideUpgradeDialog();
}
});
}
// Update modal content
$('#upgrade-feature').text(config.featureName);
$('#upgrade-description').html(config.description || `Upgrade to Easy Invoice Pro to unlock ${config.featureName} and many other premium features that will help you manage your business more efficiently.`);
// Store callbacks
$('#easy-invoice-upgrade-modal').data('onUpgrade', config.onUpgrade);
$('#easy-invoice-upgrade-modal').data('onCancel', config.onCancel);
// Show modal
$('#easy-invoice-upgrade-modal').removeClass('hidden');
},
/**
* Quick upgrade dialog for common premium features
*
* @param {string} featureName Name of the premium feature
* @param {string} customDescription Custom description (optional)
* @param {string} upgradeUrl Custom upgrade URL (optional)
*/
showFeatureUpgrade: function(featureName, customDescription, upgradeUrl) {
const featureConfigs = {
'Quote Duplication': {
description: 'Create copies of your quotes instantly to save time and maintain consistency across similar projects. Perfect for recurring clients and template-based work.',
icon: 'copy'
},
'Invoice Duplication': {
description: 'Create copies of your invoices instantly to save time and maintain consistency across similar projects. Perfect for recurring clients and template-based work.',
icon: 'copy'
},
'Advanced Reporting': {
description: 'Get detailed insights into your business performance with advanced analytics, charts, and customizable reports to make data-driven decisions.',
icon: 'chart'
},
'Custom Branding': {
description: 'Add your company logo, colors, and branding to all your quotes and invoices for a professional, branded appearance.',
icon: 'paint'
},
'Bulk Operations': {
description: 'Perform actions on multiple quotes or invoices at once to save time and streamline your workflow.',
icon: 'bulk'
},
'Email Templates': {
description: 'Create and customize professional email templates for sending quotes and invoices to clients.',
icon: 'email'
},
'Payment Integration': {
description: 'Accept online payments directly through your quotes and invoices with popular payment gateways.',
icon: 'payment'
},
'Client Portal': {
description: 'Give your clients access to view and manage their quotes and invoices through a secure client portal.',
icon: 'portal'
},
'Recurring Invoices': {
description: 'Automate your billing with recurring invoices that are sent automatically on your schedule.',
icon: 'recurring'
}
};
const config = featureConfigs[featureName] || {
description: customDescription || `Upgrade to Easy Invoice Pro to unlock ${featureName} and many other premium features.`,
icon: 'star'
};
this.showUpgradeDialog({
featureName: featureName,
description: config.description,
onUpgrade: function() {
// Redirect to upgrade page
window.open(upgradeUrl || 'https://matrixaddons.com/plugins/easy-invoice/#pricing', '_blank');
},
onCancel: function() {
// User chose to skip for now
}
});
},
/**
* Hide upgrade dialog
*/
hideUpgradeDialog: function() {
$('#easy-invoice-upgrade-modal').addClass('hidden');
},
/**
* Hide confirmation modal
*/
hide: function() {
$('#easy-invoice-confirmation-modal').addClass('hidden');
},
/**
* Quick confirmation for common actions
*
* @param {string} action Action type (delete, trash, draft, etc.)
* @param {string} itemName Name of the item being acted upon
* @param {Function} onConfirm Callback function when confirmed
*/
confirmAction: function(action, itemName, onConfirm) {
const actionConfigs = {
'delete': {
title: 'Delete Permanently',
message: `Are you sure you want to permanently delete ${itemName}? This action cannot be undone.`,
confirmText: 'Delete Permanently',
confirmClass: 'bg-red-600 hover:bg-red-700'
},
'trash': {
title: 'Move to Trash',
message: `Are you sure you want to move ${itemName} to trash?`,
confirmText: 'Move to Trash',
confirmClass: 'bg-orange-600 hover:bg-orange-700'
},
'draft': {
title: 'Move to Draft',
message: `Are you sure you want to move ${itemName} to draft?`,
confirmText: 'Move to Draft',
confirmClass: 'bg-gray-600 hover:bg-gray-700'
},
'publish': {
title: 'Publish',
message: `Are you sure you want to publish ${itemName}?`,
confirmText: 'Publish',
confirmClass: 'bg-green-600 hover:bg-green-700'
},
'restore': {
title: 'Restore',
message: `Are you sure you want to restore ${itemName}?`,
confirmText: 'Restore',
confirmClass: 'bg-green-600 hover:bg-green-700'
}
};
const config = actionConfigs[action] || {
title: 'Confirm Action',
message: `Are you sure you want to ${action} ${itemName}?`,
confirmText: 'Confirm',
confirmClass: 'bg-red-600 hover:bg-red-700'
};
this.show({
title: config.title,
message: config.message,
confirmText: config.confirmText,
confirmClass: config.confirmClass,
onConfirm: onConfirm
});
}
};
// Event handlers
$(document).ready(function() {
// Confirm button click
$(document).on('click', '#confirmation-confirm', function() {
const modal = $('#easy-invoice-confirmation-modal');
const onConfirm = modal.data('onConfirm');
if (typeof onConfirm === 'function') {
onConfirm();
}
EasyInvoiceConfirmation.hide();
});
// Cancel button click
$(document).on('click', '#confirmation-cancel', function() {
const modal = $('#easy-invoice-confirmation-modal');
const onCancel = modal.data('onCancel');
if (typeof onCancel === 'function') {
onCancel();
}
EasyInvoiceConfirmation.hide();
});
// Close modal on backdrop click
$(document).on('click', '#easy-invoice-confirmation-modal', function(e) {
if (e.target === this) {
EasyInvoiceConfirmation.hide();
}
});
// Close modal on escape key
$(document).on('keydown', function(e) {
if (e.key === 'Escape' && !$('#easy-invoice-confirmation-modal').hasClass('hidden')) {
EasyInvoiceConfirmation.hide();
}
});
});
})(jQuery);