summaryrefslogtreecommitdiff
blob: a2ec768045560218b2193d30efb8d79fa02fe726 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/**
 * Internal dependencies
 */
import emailValidator from 'email-validator';

/**
 * Internal dependencies
 */
import './view.scss';

const blockClassName = 'wp-block-jetpack-mailchimp';

function fetchSubscription( blogId, email ) {
	const url =
		'https://public-api.wordpress.com/rest/v1.1/sites/' +
		encodeURIComponent( blogId ) +
		'/email_follow/subscribe?email=' +
		encodeURIComponent( email );
	return new Promise( function( resolve, reject ) {
		const xhr = new XMLHttpRequest();
		xhr.open( 'GET', url );
		xhr.onload = function() {
			if ( xhr.status === 200 ) {
				const res = JSON.parse( xhr.responseText );
				resolve( res );
			} else {
				const res = JSON.parse( xhr.responseText );
				reject( res );
			}
		};
		xhr.send();
	} );
}

function activateSubscription( block, blogId ) {
	const form = block.querySelector( 'form' );
	const errorClass = 'error';
	const processingEl = block.querySelector( '.' + blockClassName + '_processing' );
	const errorEl = block.querySelector( '.' + blockClassName + '_error' );
	const successEl = block.querySelector( '.' + blockClassName + '_success' );
	form.addEventListener( 'submit', e => {
		e.preventDefault();
		const emailField = form.querySelector( 'input' );
		emailField.classList.remove( errorClass );
		const email = emailField.value;
		if ( ! emailValidator.validate( email ) ) {
			emailField.classList.add( errorClass );
			return;
		}
		block.classList.add( 'is-processing' );
		processingEl.classList.add( 'is-visible' );
		fetchSubscription( blogId, email ).then(
			response => {
				processingEl.classList.remove( 'is-visible' );
				if ( response.error && response.error !== 'member_exists' ) {
					errorEl.classList.add( 'is-visible' );
				} else {
					successEl.classList.add( 'is-visible' );
				}
			},
			() => {
				processingEl.classList.remove( 'is-visible' );
				errorEl.classList.add( 'is-visible' );
			}
		);
	} );
}

const initializeMailchimpBlocks = () => {
	const mailchimpBlocks = Array.from( document.querySelectorAll( '.' + blockClassName ) );
	mailchimpBlocks.forEach( block => {
		const blog_id = block.getAttribute( 'data-blog-id' );
		try {
			activateSubscription( block, blog_id );
		} catch ( err ) {
			if ( 'production' !== process.env.NODE_ENV ) {
				// eslint-disable-next-line no-console
				console.error( err );
			}
		}
	} );
};

if ( typeof window !== 'undefined' && typeof document !== 'undefined' ) {
	// `DOMContentLoaded` may fire before the script has a chance to run
	if ( document.readyState === 'loading' ) {
		document.addEventListener( 'DOMContentLoaded', initializeMailchimpBlocks );
	} else {
		initializeMailchimpBlocks();
	}
}