← All changes | templates/invoices/live-preview.php +72 -23 2.2.0 → 2.4.2 View file →

		@@ -1,6 +1,9 @@
1		- <!-- Right Panel - Live Preview -->
2		- <div class="bg-white shadow rounded-lg" style="padding: 10px;">
	1	+<?php
	2	+if ( ! defined( 'ABSPATH' ) ) {
	3	+ exit;
	4	+}
	5	+?> <div class="bg-white shadow rounded-lg" style="padding: 10px;">
3	6
4	7	<div class="px-6 py-5 border-b border-gray-200" style="margin-bottom: 10px;">
5	8	<div class="flex justify-between items-center">
6	9	<div class="flex items-center">
		@@ -7,14 +10,14 @@
7	10	<div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
8	11	<i class="fas fa-eye text-indigo-600 text-xl"></i>
9	12	</div>
10	13	<div class="ml-4">
11		- <h2 class="text-lg font-medium text-gray-900">Invoice Preview</h2>
12		- <p class="mt-1 text-sm text-gray-500">Live preview of your invoice</p>
	14	+ <h2 class="text-lg font-medium text-gray-900"><?php esc_html_e('Invoice Preview', 'easy-invoice'); ?></h2>
	15	+ <p class="mt-1 text-sm text-gray-500"><?php esc_html_e('Live preview of your invoice', 'easy-invoice'); ?></p>
13	16	</div>
14	17	</div>
15	18	<?php if($invoice_id > 0 ){ ?>
16		- <a href="<?php echo get_permalink($invoice_id); ?>" target="_blank" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
	19	+ <a href="<?php echo esc_url(get_permalink($invoice_id)); ?>" target="_blank" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
17	20	<i class="fas fa-external-link-alt mr-2"></i>
18	21	Full Preview
19	22	</a>
20	23	<?php } ?>
		@@ -37,9 +40,9 @@
37	40	<?php
38	41	// Add custom template builder CSS if using a custom template
39	42	if ($invoice && method_exists($invoice, 'getId')) {
40	43	$template_id = get_post_meta($invoice->getId(), '_easy_invoice_invoice_template', true);
41		- if ($template_id && class_exists('\EasyInvoicePro\TemplateParser') && class_exists('\EasyInvoicePro\Controllers\TemplateBuilderController')) {
	44	+ if ($template_id && class_exists('\EasyInvoicePro\TemplateParser') && class_exists('\EasyInvoicePro\Addons\CustomTemplates\Controllers\TemplateBuilderController')) {
42	45	$templateData = \EasyInvoicePro\TemplateParser::parseTemplateFromDatabase($template_id);
43	46	if ($templateData && isset($templateData['elements'])) {
44	47	echo '<style>';
45	48	// Canvas settings
		@@ -45,13 +48,13 @@
45	48	// Canvas settings
46	49	$canvas = $templateData['canvas'] ?? [];
47	50	$canvasWidth = $canvas['width'] ?? 794;
48	51	$canvasHeight = $canvas['height'] ?? 1123;
49		- $canvasDesignCSS = \EasyInvoicePro\Controllers\TemplateBuilderController::generateCanvasCSS($templateData);
	52	+ $canvasDesignCSS = \EasyInvoicePro\Addons\CustomTemplates\Controllers\TemplateBuilderController::generateCanvasCSS($templateData);
50	53
51	54	echo "#canvas { position: relative; width: " . floatval($canvasWidth) . "px; height: " . floatval($canvasHeight) . "px; margin: 0; overflow: visible; ";
52	55	if ($canvasDesignCSS) {
53		- echo str_replace('!important;', ';', $canvasDesignCSS);
	56	+ echo wp_strip_all_tags(str_replace('!important;', ';', $canvasDesignCSS)); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- CSS inside a <style> element; tags stripped, entities are not decoded there.
54	57	}
55	58	echo " }\n";
56	59
57	60	// Element styles
		@@ -58,9 +61,9 @@
58	61	foreach ($templateData['elements'] as $element) {
59	62	$elementId = $element['id'] ?? '';
60	63	if (!$elementId) continue;
61	64
62		- echo "#{$elementId} { position: absolute; ";
	65	+ echo '#' . esc_attr($elementId) . ' { position: absolute; ';
63	66	if (isset($element['position']['left'])) echo "left: " . floatval($element['position']['left']) . "px; ";
64	67	if (isset($element['position']['top'])) echo "top: " . floatval($element['position']['top']) . "px; ";
65	68	if (isset($element['dimensions']['width'])) echo "width: " . floatval($element['dimensions']['width']) . "px; ";
66	69	if (isset($element['dimensions']['height'])) echo "min-height: " . floatval($element['dimensions']['height']) . "px; ";
		@@ -79,12 +82,18 @@
79	82	}
80	83	}
81	84
82	85	// Dynamically load the selected template
83		- $template_file = EASY_INVOICE_PLUGIN_DIR . 'templates/invoice-templates/' . $current_template . '.php';
84		-
85		- $template_file = file_exists($template_file) ? $template_file : EASY_INVOICE_PLUGIN_DIR . 'templates/invoice-templates/default.php';
86		- if (file_exists($template_file)) {
	86	+ $template_file = easy_invoice_design_template( 'invoice', (string) $current_template );
	87	+ if ( ! $invoice instanceof \EasyInvoice\Models\Invoice ) {
	88	+ // Nothing to render yet. The designs read the model
	89	+ // directly, so including one here would be fatal.
	90	+ ?>
	91	+ <div class="ei-preview-empty" style="text-align:center;padding:48px 24px;color:#64748b;">
	92	+ <p style="margin:0;font-size:14px;"><?php esc_html_e( 'Your invoice will appear here as you fill in the form.', 'easy-invoice' ); ?></p>
	93	+ </div>
	94	+ <?php
	95	+ } elseif (file_exists($template_file)) {
87	96	include_once $template_file;
88	97	} else {
89	98	// Show template not found message
90	99	?>
		@@ -91,11 +100,11 @@
91	100	<div class="template-not-found">
92	101	<div class="template-not-found-icon">
93	102	<i class="fas fa-exclamation-circle"></i>
94	103	</div>
95		- <h3>Template Not Found</h3>
	104	+ <h3><?php esc_html_e('Template Not Found', 'easy-invoice'); ?></h3>
96	105	<p>The selected template "<?php echo esc_html($current_template); ?>" does not exist.</p>
97		- <p>Please select a different template or contact support if you believe this is an error.</p>
	106	+ <p><?php esc_html_e('Please select a different template or contact support if you believe this is an error.', 'easy-invoice'); ?></p>
98	107	</div>
99	108	<style>
100	109	.template-not-found {
101	110	text-align: center;
		@@ -154,10 +163,10 @@
154	163	<script>
155	164	// Localize easyInvoice object for this page
156	165	window.easyInvoice = window.easyInvoice || {};
157	166	window.easyInvoice.isPro = <?php echo easy_invoice_has_pro() ? 'true' : 'false'; ?>;
158		-window.easyInvoice.ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
159		-window.easyInvoice.nonce = '<?php echo wp_create_nonce('easy_invoice_nonce'); ?>';
	167	+window.easyInvoice.ajaxUrl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>';
	168	+window.easyInvoice.nonce = '<?php echo esc_attr(wp_create_nonce('easy_invoice_nonce')); ?>';
160	169
161	170	jQuery(document).ready(function($) {
162	171	// Function to update the live preview
163	172	function updateLivePreview(templateId) {
		@@ -170,8 +179,9 @@
170	179	type: 'POST',
171	180	data: {
172	181	action: 'easy_invoice_load_template',
173	182	template: templateId,
	183	+ form_data: jQuery('#invoice-form').length ? jQuery('#invoice-form').serialize() : '',
174	184	invoice_id: '<?php echo esc_js($invoice_id); ?>',
175	185	nonce: window.easyInvoice.nonce
176	186	},
177	187	success: function(response) {
		@@ -184,11 +194,11 @@
184	194	<div class="template-not-found">
185	195	<div class="template-not-found-icon">
186	196	<i class="fas fa-exclamation-circle"></i>
187	197	</div>
188		- <h3>Template Not Found</h3>
	198	+ <h3><?php esc_html_e('Template Not Found', 'easy-invoice'); ?></h3>
189	199	<p>The selected template "${templateId}" does not exist.</p>
190		- <p>Please select a different template or contact support if you believe this is an error.</p>
	200	+ <p><?php esc_html_e('Please select a different template or contact support if you believe this is an error.', 'easy-invoice'); ?></p>
191	201	</div>
192	202	`);
193	203	}
194	204	},
		@@ -198,10 +208,10 @@
198	208	<div class="template-not-found">
199	209	<div class="template-not-found-icon">
200	210	<i class="fas fa-exclamation-circle"></i>
201	211	</div>
202		- <h3>Error Loading Template</h3>
203		- <p>There was an error loading the template. Please try again.</p>
	212	+ <h3><?php esc_html_e('Error Loading Template', 'easy-invoice'); ?></h3>
	213	+ <p><?php esc_html_e('There was an error loading the template. Please try again.', 'easy-invoice'); ?></p>
204	214	</div>
205	215	`);
206	216	},
207	217	complete: function() {
		@@ -220,11 +230,11 @@
220	230	const isFreeVersion = !window.easyInvoice || !window.easyInvoice.isPro;
221	231	if (isPremium && isFreeVersion) {
222	232	// Show premium upgrade modal instead of selecting the template
223	233	if (typeof EasyInvoiceConfirmation !== 'undefined' && EasyInvoiceConfirmation.showFeatureUpgrade) {
224		- EasyInvoiceConfirmation.showFeatureUpgrade('<?php _e('Premium Templates', 'easy-invoice'); ?>', '<?php _e('Access all premium templates including Modern, Professional, Classic, and more to give your invoices a unique and professional look.', 'easy-invoice'); ?>');
	234	+ EasyInvoiceConfirmation.showFeatureUpgrade('<?php echo esc_js(__('Premium Templates', 'easy-invoice')); ?>', '<?php echo esc_js(__('Access all premium templates including Modern, Professional, Classic, and more to give your invoices a unique and professional look.', 'easy-invoice')); ?>');
225	235	} else {
226		- alert('<?php _e('This is a premium feature. Please upgrade to Pro to access all templates.', 'easy-invoice'); ?>');
	236	+ alert('<?php echo esc_js(__('This is a premium feature. Please upgrade to Pro to access all templates.', 'easy-invoice')); ?>');
227	237	}
228	238	return;
229	239	}
230	240
		@@ -237,6 +247,45 @@
237	247	updateLivePreview(templateId);
238	248	});
239	249
240	250
	251	+ // Live means live: re-render as the builder changes, not only when the
	252	+ // template changes. Debounced so typing a description does not fire a
	253	+ // request per keystroke.
	254	+ (function () {
	255	+ var $form = $('#invoice-form'); if (!$form.length) { return; }
	256	+ var timer = null;
	257	+ var current = function () { return $form.find('input[name="invoice_template"]').val() || $('.template-card.selected, .template-card.active').first().data('template-id') || 'standard'; };
	258	+ var schedule = function () { clearTimeout(timer); timer = setTimeout(function () { updateLivePreview(current()); }, 700); };
	259	+ $form.on('input change', 'input, textarea, select', schedule);
	260	+ $(document).on('click', '.add-item-button, .remove-item, .client-option, #remove-selected-client, .template-card', schedule);
	261	+ $(document).on('easy_invoice_items_changed easy_invoice_client_changed', schedule);
	262	+ })();
	263	+
241	264	});
	265	+</script>
	266	+
	267	+<script>
	268	+// Scale the A4 design to the preview pane instead of letting it reflow: the
	269	+// preview then shows the sheet the client will see, only smaller.
	270	+(function () {
	271	+ var box = document.getElementById('invoice-container');
	272	+ if (!box || !window.ResizeObserver) { return; }
	273	+ var SHEET = 794;
	274	+ function fit() {
	275	+ var sheet = box.querySelector('.template, [class*="template-"]');
	276	+ if (!sheet) { box.style.height = ''; return; }
	277	+ var avail = box.clientWidth;
	278	+ if (avail <= 0) { return; }
	279	+ var k = Math.min(1, avail / SHEET);
	280	+ sheet.style.width = SHEET + 'px';
	281	+ sheet.style.maxWidth = 'none';
	282	+ sheet.style.transformOrigin = 'top left';
	283	+ sheet.style.transform = k < 1 ? 'scale(' + k + ')' : '';
	284	+ box.style.overflow = 'hidden';
	285	+ box.style.height = k < 1 ? Math.ceil(sheet.offsetHeight * k) + 'px' : '';
	286	+ }
	287	+ new ResizeObserver(fit).observe(box);
	288	+ new MutationObserver(fit).observe(box, { childList: true, subtree: true });
	289	+ fit();
	290	+})();
242	291	</script>