path: root/views/mods/mod_revocation/wp_footer.phtml

<?php
	/** @version 4.6.1 */

	declare(strict_types=1);

	/**
	 * @author: Daniel Schmitzer
	 * @date: 27.01.26
	 * @time: 09:26
	 */

	namespace wpsgRevocation;

?>

<?php if (\wpsg_ShopController::getShop()->get_option('wpsg_mod_revocation_view_flyout') === '1') { ?>
	
	<button type="button" id="wpsg_revocation_button" aria-haspopup="dialog" aria-controls="wpsg_revocation_dialog">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" /></svg>
		<span id="wpsg_revocation_button_text"><?php echo esc_html__('Vertrag widerrufen', 'wpsg'); ?></span>
	</button>
	
<?php } else { ?>

	<div id="wpsg_revocation_button" style="display:none;"></div>
	
<?php } ?>

<!-- Dialog -->
<div id="wpsg_revocation_dialog" class="" aria-hidden="true" inert>
	<div class="inner" role="dialog" aria-modal="true" aria-labelledby="wpsg_revocation_dialog_title" tabindex="-1">
		<div class="header">
			<span id="wpsg_revocation_dialog_title"><?php echo esc_html__('Widerrufsformular', 'wpsg'); ?></span>
			<button type="button" class="close" aria-label="<?php echo esc_attr__('Schließen', 'wpsg'); ?>">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>
			</button>
		</div>
		<div class="content"></div>
		<div class="footer">
			<button type="button" class="button button-primary wpsg_revocation_button_submit"><?php echo esc_html__('Widerruf bestätigen', 'wpsg'); ?></button>
		</div>
		<div class="loading">
			<img src="<?php echo esc_url(WPSG_URL.'views/gfx/ajax-loader.gif'); ?>" alt="<?php echo esc_attr__('Bitte warten ...', 'wpsg'); ?>" />
		</div>
	</div>
</div>

<script>
( function() {

	// In einer Funktion: Ein doppelt ausgegebener Fuß bricht sonst an doppelt deklarierten Namen ab
	if ( window.wpsgRevocationReady ) return;
	window.wpsgRevocationReady = true;

	const ajax_url = <?php echo wp_json_encode(admin_url('admin-ajax.php')); ?>;
	const error_text = <?php echo wp_json_encode(__('Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.', 'wpsg')); ?>;

	// Keine Nonce im HTML: Die Seite kann aus dem Seiten-Cache kommen. Sie kommt beim ersten Öffnen frisch vom Server (K48)
	let nonce = null;

	const get_nonce = () => {

		if (nonce !== null) return Promise.resolve(nonce);

		return fetch(ajax_url + '?action=wpsg_mod_revocation&do=nonce&wpsg_frontend_ajax=1', { credentials: 'same-origin', cache: 'no-store' })
			.then(res => res.json())
			.then(res => { nonce = res.data.nonce; return nonce; });

	};

	// Sendet mit Nonce; ist sie abgelaufen, schickt der Server eine frische mit und es wird einmal neu gesendet
	const send = (request, retry = true) => get_nonce().then(n => fetch(...request(n))).then(res => {

		if (res.status !== 403 || !retry) return res;

		return res.clone().json().then(json => {

			if ((json?.data?.code ?? '') !== 'wpsg_nonce') return res;

			nonce = json.data.nonce;

			return send(request, false);

		}, () => res);

	});

	// Meldungen des Servers als Text, Screenreader sagen sie an
	const error_list = (arError) => {

		const list = document.createElement('ul');
		list.id = 'wpsg_error';
		list.className = 'wpsg_error';
		list.setAttribute('role', 'alert');
		(arError??[]).forEach(error => { const li = document.createElement('li'); li.textContent = error; list.appendChild(li); });

		return list;

	};

	const show_error = () => {

		const target = el_dialog_content.querySelector('#msg_target') || el_dialog_content;

		target.innerHTML = '<ul id="wpsg_error" class="wpsg_error"><li></li></ul>';
		target.querySelector('#wpsg_error li').textContent = error_text;
		el_dialog.classList.remove('loading');

	};
	const el_dialog = document.getElementById('wpsg_revocation_dialog');
	const el_dialog_content = document.getElementById('wpsg_revocation_dialog').querySelector('.inner > .content');

	const formDataToObject = (formData) => {

		const obj = {};

		for (const [key, value] of formData.entries()) {

			const keys = key.split(/\[|\]/).filter(Boolean);
			let current = obj;

			keys.forEach((k, i) => {

				const isLast = i === keys.length - 1;

				if (isLast) { current[k] = value; }
				else {

					if (!current[k]) { current[k] = isNaN(keys[i + 1]) ? {} : []; }

					current = current[k];

				}

			});

		}

		return obj;

	}

	const submit_dialog = event => {

		event.preventDefault();
		event.stopPropagation();

		el_dialog.classList.add('loading');

		// const form_data = Object.fromEntries(new FormData(el_dialog.querySelector('form#wpsg_revocation_form')).entries());
		 const form = el_dialog.querySelector('form#wpsg_revocation_form');
		 const formData = new FormData(form);
		 const form_data = formDataToObject(formData);

		send(n => [ ajax_url + '?action=wpsg_mod_revocation&do=ajaxDialogSubmit', {
			method: 'POST',
			credentials: 'same-origin',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({
				nonce: n,
				form_data: form_data,
			})
		} ]).then(res => { if (!res.ok) throw new Error(res.status); return res.json(); }).then(res => {

			if ((res.success??false) === false) {

				el_dialog_content.querySelector('#msg_target').replaceChildren(error_list(res.arError));
	
				el_dialog.classList.remove('loading');

			 } else {
					
				// Bestätigung im Dialog statt alert(): Statusmeldung mit Fokus, Absenden ausgeblendet
				const success = document.createElement('div');
				success.className = 'wpsg_revocation_page_success';
				success.setAttribute('role', 'status');
				success.tabIndex = -1;
				success.textContent = <?php echo wp_json_encode(__('Ihr Widerruf ist bei uns eingegangen und wird nun bearbeitet.', 'wpsg')); ?>;

				el_dialog_content.replaceChildren(success);
				el_dialog.querySelector('.wpsg_revocation_button_submit').hidden = true;
				el_dialog.classList.remove('loading');
				success.focus();
				
				document.querySelectorAll('.wpsg_revocation_order_product_checkbox:checked').forEach(el => {
 
					el.checked = false;

				});
				
			}

		}).catch(show_error);

	}
	// Auslöser, auf den der Fokus nach dem Schließen zurückgeht (K50)
	let trigger = null;

	const close_dialog = event => {

		if (event) {

			event.preventDefault();
			event.stopPropagation();

		}

		if (!el_dialog.classList.contains('visible')) return;

		el_dialog.classList.remove('visible');
		el_dialog.setAttribute('aria-hidden', 'true');
		el_dialog.inert = true;

		if (trigger && document.contains(trigger)) trigger.focus();
		trigger = null;

	};
	const open_dialog = el => {

		trigger = document.activeElement;

		el_dialog.inert = false;
		el_dialog.removeAttribute('aria-hidden');
		el_dialog.classList.add('visible');
		el_dialog.classList.add('loading');
		el_dialog.querySelector('.wpsg_revocation_button_submit').hidden = false;
		el_dialog.querySelector('.inner').focus();

		const dialog_config = {
			arProductID: [],
			arOrderProductID: [],
			set_product_anr: ''
		}

		// Produkte auf der Seite
		document.querySelectorAll('input[name="wpsg[produkt_id]"]').forEach(el => { dialog_config.arProductID.push(parseInt(el.value)); })

		if (el !== undefined && el.classList.contains('wpsg_revocation_order_product')) {

			el.querySelector('input').checked = true;

		}

		if (el !== undefined && el.classList.contains('wpsg_revocation_product_button')) {

			dialog_config.set_product_anr = el.dataset.product_anr;

		}

		// Bestellung / Produkte
		document.querySelectorAll('.wpsg_revocation_order_product_checkbox:checked').forEach(el => {

			const order_id = parseInt(el.dataset.order_id);
			const order_product_id = parseInt(el.dataset.order_product_id);
			const product_id = parseInt(el.dataset.product_id);
			const amount = parseInt(el.dataset.amount);

			dialog_config.arOrderProductID.push({
				order_id: order_id,
				order_product_id: order_product_id,
				amount: amount
			});

			dialog_config.arProductID.push(product_id);

		});

		send(n => [ ajax_url, {
			method: 'POST',
			credentials: 'same-origin',
			body: new URLSearchParams({
				nonce: n,
				action: 'wpsg_mod_revocation',
				do: 'ajaxDialogContent',
				dialog_config: JSON.stringify(dialog_config),
			})
		} ]).then(res => { if (!res.ok) throw new Error(res.status); return res.text(); }).then(html => {

			el_dialog_content.innerHTML = html;
			el_dialog.classList.remove('loading');

			// Erstes leeres Feld, sonst das erste Feld des Formulars
			const fields = [ ...el_dialog_content.querySelectorAll('input:not([type=hidden]), select, textarea') ];
			( fields.find(f => f.value === '') || fields[0] )?.focus();

		}).catch(show_error);

    };

	// Button am Produkt, delegiert, damit auch nachträglich gerenderte Buttons (z.B. im SmartCheckout) reagieren
	document.addEventListener('click', event => {

		const el = event.target.closest('.wpsg_revocation_product_button');

		if (el === null) return;

		open_dialog(el);

	});

	// Button Listener FlyOut
	document.getElementById('wpsg_revocation_button').addEventListener('click', event => { open_dialog(); });

	// Shortcode-Link Listener [wpshopgermany_widerruf]
	document.addEventListener('click', event => {

		const link = event.target.closest('a.wpsg_revocation_link');

		if (link === null) return;

		event.preventDefault();
        open_dialog();

	});


	// GET Parameter verarbeiten
	const urlParams = new URLSearchParams(window.location.search);
	
	const get_order_nr = urlParams.get('wpsg_revo_order');
	const get_product_nr = urlParams.get('wpsg_revo_product');
	const get_amount = urlParams.get('wpsg_revo_amount');
	const get_contact = urlParams.get('wpsg_revo_contact');

	if (get_order_nr !== null) {

		document.addEventListener('DOMContentLoaded', () => {

			open_dialog();

			const checkAndFillForm = () => {

				const form = el_dialog.querySelector('form#wpsg_revocation_form');

				if (!form) {

					setTimeout(checkAndFillForm, 100);
					return;

				}

				if (get_product_nr) {

					const productNrInput = form.querySelector('input[name*="[product_nr]"]');

					if (productNrInput) productNrInput.value = get_product_nr;

				}

				if (get_order_nr) {

					const orderNrInput = form.querySelector('input[name*="[order_nr]"]');

					if (orderNrInput) orderNrInput.value = get_order_nr;

				}

				if (get_amount) {

					const amountInput = form.querySelector('input[name*="[amount]"]');

					if (amountInput) amountInput.value = get_amount;

				}

				if (get_contact) {

					const contactInput = form.querySelector('input[name="wpsg_revocation_reason[contact]"]');

					if (contactInput) contactInput.value = get_contact;

				}

			};

			checkAndFillForm();

		});

	}

	// Layer Listener
	el_dialog.addEventListener('click', event => {

		if (!event.target.closest('.inner')) close_dialog(event);

	});

	// Produkte in Bestellung auf der Seite Listener
	document.querySelectorAll('.wpsg_revocation_order_product')?.forEach(el => {

		el.addEventListener('click', event => {

			if (!event.target.closest('input[type="checkbox"]')) {

				open_dialog(el);

			}

		});

	});

	// Close Button Listener
	el_dialog.querySelectorAll('.close')?.forEach(el => {

		el.addEventListener('click', event => { close_dialog(event); })

	})

	// Submit Button Listener
	el_dialog.querySelectorAll('.wpsg_revocation_button_submit')?.forEach(el => {

		el.addEventListener('click', event => { submit_dialog(event); });

	})

	// Escape schließt, Tab bleibt im Dialog (aria-modal)
	document.addEventListener('keydown', function (e) {

		if (!el_dialog.classList.contains('visible')) return;

		if (e.key === 'Escape') {

			close_dialog(e);
			return;

		}

		if (e.key !== 'Tab') return;

		const focusable = [ ...el_dialog.querySelectorAll('button, [href], input:not([type=hidden]), select, textarea, [tabindex]:not([tabindex="-1"])') ].filter(f => !f.disabled && f.offsetParent !== null);
		if (focusable.length === 0) return;

		const first = focusable[0], last = focusable[focusable.length - 1];

		if (e.shiftKey && (document.activeElement === first || document.activeElement === el_dialog.querySelector('.inner'))) { e.preventDefault(); last.focus(); }
		else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }

	});

} )();
</script>