diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/membership-button/view.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/membership-button/view.js | 79 |
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(); + } +} |