1 files changed, 79 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/membership-button/view.js b/plugins/jetpack/extensions/blocks/membership-button/view.js
new file mode 100644
index 00000000..6e10a1d3
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/membership-button/view.js
@@ -0,0 +1,79 @@
+/* global tb_show, tb_remove */
+
+/**
+ * Internal dependencies
+ */
+import './view.scss';
+const name = 'membership-button';
+const blockClassName = 'wp-block-jetpack-' + name;
+
+/**
+ * Since "close" button is inside our checkout iframe, in order to close it, it has to pass a message to higher scope to close the modal.
+ *
+ * @param {event} eventFromIframe - message event that gets emmited in the checkout iframe.
+ * @listens message
+ */
+function handleIframeResult( eventFromIframe ) {
+	if ( eventFromIframe.origin === 'https://subscribe.wordpress.com' && eventFromIframe.data ) {
+		const data = JSON.parse( eventFromIframe.data );
+		if ( data && data.action === 'close' ) {
+			window.removeEventListener( 'message', handleIframeResult );
+			tb_remove();
+		}
+	}
+}
+
+function activateSubscription( block, blogId, planId, poweredText, lang ) {
+	block.addEventListener( 'click', () => {
+		tb_show(
+			null,
+			'https://subscribe.wordpress.com/memberships/?blog=' +
+				blogId +
+				'&plan=' +
+				planId +
+				'&lang=' +
+				lang +
+				'TB_iframe=true&height=600&width=400',
+			null
+		);
+		window.addEventListener( 'message', handleIframeResult, false );
+		const tbWindow = document.querySelector( '#TB_window' );
+		tbWindow.classList.add( 'jetpack-memberships-modal' );
+		const footer = document.createElement( 'DIV' );
+		footer.classList.add( 'TB_footer' );
+		footer.innerHTML = poweredText;
+		tbWindow.appendChild( footer );
+	} );
+}
+
+const initializeMembershipButtonBlocks = () => {
+	const membershipButtonBlocks = Array.prototype.slice.call(
+		document.querySelectorAll( '.' + blockClassName )
+	);
+	membershipButtonBlocks.forEach( block => {
+		const blogId = block.getAttribute( 'data-blog-id' );
+		const planId = block.getAttribute( 'data-plan-id' );
+		const lang = block.getAttribute( 'data-lang' );
+		const poweredText = block
+			.getAttribute( 'data-powered-text' )
+			.replace(
+				'WordPress.com',
+				'<a href="https://wordpress.com" target="_blank" rel="noreferrer noopener">WordPress.com</a>'
+			);
+		try {
+			activateSubscription( block, blogId, planId, poweredText, lang );
+		} catch ( err ) {
+			// eslint-disable-next-line no-console
+			console.error( 'Problem activating Membership Button ' + planId, 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', initializeMembershipButtonBlocks );
+	} else {
+		initializeMembershipButtonBlocks();
+	}
+}