woocommerce-paypal-payments/modules/ppcp-webhooks/resources/js/status-page.js

import { setVisibleByClass } from '../../../ppcp-button/resources/js/modules/Helper/Hiding';

document.addEventListener( 'DOMContentLoaded', () => {
	const resubscribeBtn = jQuery(
		PayPalCommerceGatewayWebhooksStatus.resubscribe.button
	);

	resubscribeBtn.click( async () => {
		resubscribeBtn.prop( 'disabled', true );

		const response = await fetch(
			PayPalCommerceGatewayWebhooksStatus.resubscribe.endpoint,
			{
				method: 'POST',
				credentials: 'same-origin',
				headers: {
					'content-type': 'application/json',
				},
				body: JSON.stringify( {
					nonce: PayPalCommerceGatewayWebhooksStatus.resubscribe
						.nonce,
				} ),
			}
		);

		const reportError = ( error ) => {
			const msg =
				PayPalCommerceGatewayWebhooksStatus.resubscribe.failureMessage +
				' ' +
				error;
			alert( msg );
		};

		if ( ! response.ok ) {
			try {
				const result = await response.json();
				reportError( result.data );
			} catch ( exc ) {
				console.error( exc );
				reportError( response.status );
			}
		}

		window.location.reload();
	} );

	function sleep( ms ) {
		return new Promise( ( resolve ) => setTimeout( resolve, ms ) );
	}

	const simulateBtn = jQuery(
		PayPalCommerceGatewayWebhooksStatus.simulation.start.button
	);
	simulateBtn.click( async () => {
		simulateBtn.prop( 'disabled', true );

		try {
			const response = await fetch(
				PayPalCommerceGatewayWebhooksStatus.simulation.start.endpoint,
				{
					method: 'POST',
					credentials: 'same-origin',
					headers: {
						'content-type': 'application/json',
					},
					body: JSON.stringify( {
						nonce: PayPalCommerceGatewayWebhooksStatus.simulation
							.start.nonce,
					} ),
				}
			);

			const reportError = ( error ) => {
				const msg =
					PayPalCommerceGatewayWebhooksStatus.simulation.start
						.failureMessage +
					' ' +
					error;
				alert( msg );
			};

			if ( ! response.ok ) {
				try {
					const result = await response.json();
					reportError( result.data );
				} catch ( exc ) {
					console.error( exc );
					reportError( response.status );
				}

				return;
			}

			const showStatus = ( html ) => {
				let statusBlock = simulateBtn.siblings(
					'.ppcp-webhooks-status-text'
				);
				if ( ! statusBlock.length ) {
					statusBlock = jQuery(
						'<div class="ppcp-webhooks-status-text"></div>'
					).insertAfter( simulateBtn );
				}
				statusBlock.html( html );
			};

			simulateBtn.siblings( '.description' ).hide();

			showStatus(
				PayPalCommerceGatewayWebhooksStatus.simulation.state
					.waitingMessage +
					'<span class="spinner is-active" style="float: none;"></span>'
			);

			const delay = 2000;
			const retriesBeforeErrorMessage = 15;
			const maxRetries = 30;

			for ( let i = 0; i < maxRetries; i++ ) {
				await sleep( delay );

				const stateResponse = await fetch(
					PayPalCommerceGatewayWebhooksStatus.simulation.state
						.endpoint,
					{
						method: 'GET',
						credentials: 'same-origin',
					}
				);

				try {
					const result = await stateResponse.json();

					if ( ! stateResponse.ok || ! result.success ) {
						console.error(
							'Simulation state query failed: ' + result.data
						);
						continue;
					}

					const state = result.data.state;
					if (
						state ===
						PayPalCommerceGatewayWebhooksStatus.simulation.state
							.successState
					) {
						showStatus(
							'<span class="success">' +
								'✔️ ' +
								PayPalCommerceGatewayWebhooksStatus.simulation
									.state.successMessage +
								'</span>'
						);
						return;
					}
				} catch ( exc ) {
					console.error( exc );
				}

				if ( i === retriesBeforeErrorMessage ) {
					showStatus(
						'<span class="error">' +
							PayPalCommerceGatewayWebhooksStatus.simulation.state
								.tooLongDelayMessage +
							'</span>'
					);
				}
			}
		} finally {
			simulateBtn.prop( 'disabled', false );
		}
	} );

	const sandboxCheckbox = document.querySelector( '#ppcp-sandbox_on' );
	if ( sandboxCheckbox ) {
		const setWebhooksVisibility = ( show ) => {
			[
				'#field-webhook_status_heading',
				'#field-webhooks_list',
				'#field-webhooks_resubscribe',
				'#field-webhooks_simulate',
			].forEach( ( selector ) => {
				setVisibleByClass( selector, show, 'hide' );
			} );
		};

		const serverSandboxState =
			PayPalCommerceGatewayWebhooksStatus.environment === 'sandbox';
		setWebhooksVisibility( serverSandboxState === sandboxCheckbox.checked );
		sandboxCheckbox.addEventListener( 'click', () => {
			setWebhooksVisibility(
				serverSandboxState === sandboxCheckbox.checked
			);
		} );
	}
} );