Merge pull request #18 from newfold-labs/update/dynamic-modal-size

GobalCTB iframe dynamic sizing

static/ctb.css

@@ -37,10 +37,11 @@ body.noscroll {
     color: black;
     display: flex;
     justify-content: center;
+    align-items: center;
     margin: auto;
-    max-height: 80vh;
+    max-height: 90dvh;
     min-width: 960px;
-    max-width: 80vw;
+    max-width: 90vw;
     padding: 0;
     position: relative;
     z-index: 2;
@@ -50,7 +51,7 @@ body.noscroll {
     background-color: white;
     min-height: 560px;
     height: 100%;
-    max-height: 100%;
+    max-height: 90dvh;
     width: 100%;
     max-width: 100%;
     border-radius: 5px;
@@ -120,13 +121,13 @@ body.noscroll {
 
 @media screen and (max-width: 999px) {
     .global-ctb-modal-content {
-        max-height: 100vh;
+        max-height: 100dvh;
         max-width: 100vw;
-        min-height: 100vh;
+        min-height: 100dvh;
         min-width: 100vw;
     }
     .global-ctb-modal iframe {
-        min-height: 100vh;
+        min-height: 100dvh;
         border-radius: 0;
     }
     .global-ctb-modal-close {

static/ctb.js

@@ -191,6 +191,19 @@
         if (!event.origin.includes('hiive')) {
             return;
         }
+        if (event.data.type === 'frameWidth') {
+            // set iframe width
+            const iframe = document.querySelector('.global-ctb-modal-content iframe');
+            iframe.style.width = event.data.width;
+
+            // request iframe height
+            iframe.contentWindow.postMessage({ type: 'getFrameHeight' }, '*');
+        }
+        if (event.data.type === 'frameHeight') {
+            // set iframe height
+            const iframe = document.querySelector('.global-ctb-modal-content iframe');
+            iframe.style.height = event.data.height;
+        }
         if (event.data === 'closeModal') {
             closeModal();
         }

tests/cypress/integration/global-ctb.cy.js

@@ -46,7 +46,7 @@ describe( 'Click to buy', function () {
 			.should( 'have.attr', 'target', '_blank' );
 	} );
 
-	it( 'CTB modal is functional', () => {
+	it( 'CTB modal opens successfully', () => {
 		cy.intercept(
 			{
 				method: 'GET',
@@ -79,7 +79,33 @@ describe( 'Click to buy', function () {
 		cy.get( '.global-ctb-modal-content iframe' )
 			.should( 'have.attr', 'src', 'https://example.com' )
 			.should( 'be.visible' );
+	} );
+
+	it( 'CTB iframe dynamic sizing works', () => {
+		// Mock the 'frameWidth' and 'frameHeight' message events
+		cy.window().then( ( win ) => {
+			// 'frameWidth' event
+			const widthEvent = new MessageEvent( 'message', {
+				data: { type: 'frameWidth', width: '800px' },
+				origin: 'http://hiive.com',
+			} );
+			win.dispatchEvent( widthEvent );
+
+			// 'frameHeight' event
+			const heightEvent = new MessageEvent( 'message', {
+				data: { type: 'frameHeight', height: '600px' },
+				origin: 'http://hiive.com',
+			} );
+			win.dispatchEvent( heightEvent );
+		} );
+
+		// check iframe width and height
+		cy.get( '.global-ctb-modal-content iframe' )
+			.should( 'have.css', 'width', '800px' )
+			.and( 'have.css', 'height', '600px' );
+	} );
 
+	it( 'X button closes CTB modal', () => {
 		// check that cancel button closes modal
 		cy.get( '.global-ctb-modal-close' ).click( { force: true } );
 		cy.wait( 200 );