Revert "MWPW-147472: auto adjust commerce iframe" (#2312)

Revert "MWPW-147472: auto adjust commerce iframe (#2251)"

This reverts commit 481bbcb.

libs/blocks/merch/merch.css

@@ -59,6 +59,7 @@ a[is='checkout-link'] > span {
 }
 
 #checkout-link-modal iframe {
+  height: 100%;
   flex: 1;
 }
 

libs/blocks/merch/merch.js

@@ -152,8 +152,8 @@ export async function fetchLiterals(url) {
 
 export async function fetchCheckoutLinkConfigs(base = '') {
   fetchCheckoutLinkConfigs.promise = fetchCheckoutLinkConfigs.promise
-    ?? fetch(`${base}${CHECKOUT_LINK_CONFIG_PATH}`).catch((e) => {
-      log?.error('Failed to fetch checkout link configs', e);
+    ?? fetch(`${base}${CHECKOUT_LINK_CONFIG_PATH}`).catch(() => {
+      log?.error('Failed to fetch checkout link configs');
     }).then((mappings) => {
       if (!mappings?.ok) return undefined;
       return mappings.json();

libs/blocks/modal/modal.merch.js

@@ -3,18 +3,9 @@ import { debounce } from '../../utils/action.js';
 export const MOBILE_MAX = 599;
 export const TABLET_MAX = 1199;
 
-window.addEventListener('pageshow', (event) => {
-  // if there is a commerce modal with an iframe open, reload the page to avoid bfcache issues.
-  if (event.persisted && document.querySelector('.dialog-modal.commerce-frame iframe')) {
-    window.location.reload();
-  }
-});
-
 export function adjustModalHeight(contentHeight) {
-  if (!(window.location.hash || document.getElementById('checkout-link-modal'))) return;
-  let selector = '#checkout-link-modal';
-  if (!/=/.test(window.location.hash)) selector = `${selector},div.dialog-modal.commerce-frame${window.location.hash}`;
-  const dialog = document.querySelector(selector);
+  if (!window.location.hash) return;
+  const dialog = document.querySelector(`div.dialog-modal.commerce-frame${window.location.hash}`);
   const iframe = dialog?.querySelector('iframe');
   const iframeWrapper = dialog?.querySelector('.milo-iframe');
   if (!contentHeight || !iframe || !iframeWrapper) return;

test/blocks/modals/mocks/iframe.plain.html

@@ -1,5 +1,3 @@
-<main></main>
-<template id="modal1">
 <div class="dialog-modal commerce-frame" id="first-dialog">
   <div class="fragment">
     <div class="section">
@@ -9,9 +7,7 @@
     </div>
   </div>
 </div>
-</template>
 
-<template id="modal2">
 <div class="dialog-modal commerce-frame" id="second-dialog">
   <div class="fragment">
     <div class="section">
@@ -21,17 +17,3 @@
     </div>
   </div>
 </div>
-</template>
-
-
-<template id="modal3">
-<div class="dialog-modal commerce-frame" id="checkout-link-modal">
-  <div class="fragment">
-    <div class="section">
-      <div class="milo-iframe modal">
-        <iframe src="https://www.adobe.com/mini-plans/illustrator.html?mid=ft&amp;web=1&amp;pint=Illustrator" allowfullscreen="true"></iframe>
-      </div>
-    </div>
-  </div>
-</div>
-</template>

test/blocks/modals/modal.merch.test.js

@@ -1,38 +1,19 @@
 import { readFile, setViewport } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import enableCommerceFrameFeatures, { MOBILE_MAX, TABLET_MAX, adjustModalHeight } from '../../../libs/blocks/modal/modal.merch.js';
+import enableCommerceFrameFeatures, { MOBILE_MAX, TABLET_MAX } from '../../../libs/blocks/modal/modal.merch.js';
 import { delay } from '../../helpers/waitfor.js';
 
 document.body.innerHTML = await readFile({ path: './mocks/iframe.plain.html' });
-
-const main = document.querySelector('main');
-
-const addModal = (selector) => {
-  main.append(document.getElementById(selector).content.cloneNode(true));
-  const dialog = document.querySelector('.dialog-modal');
-  const iframeWrapper = dialog.querySelector('.milo-iframe');
-  const iframe = dialog.querySelector('iframe');
-  const secondDialog = document.querySelector('.dialog-modal:nth-child(2)');
-  const secondIframeWrapper = secondDialog?.querySelector('.milo-iframe');
-  const secondIframe = secondDialog?.querySelector('iframe');
-  return {
-    dialog,
-    iframe,
-    iframeWrapper,
-    secondDialog,
-    secondIframe,
-    secondIframeWrapper,
-  };
-};
+const dialog = document.querySelector('#first-dialog');
+const iframeWrapper = dialog.querySelector('.milo-iframe');
+const iframe = dialog.querySelector('iframe');
+const secondDialog = document.querySelector('#second-dialog');
+const secondIframeWrapper = secondDialog.querySelector('.milo-iframe');
+const secondIframe = secondDialog.querySelector('iframe');
 
 describe('Modal dialog with a `commerce-frame` class', () => {
-  beforeEach(() => {
-    main.innerHTML = '';
-  });
-
   it('adjustStyles: sets the iframe height to 100% if height adjustment is not applicable', () => {
-    const { dialog, iframe } = addModal('modal1');
     const originalSrc = iframe.getAttribute('src');
     iframe.setAttribute('src', 'https://www.adobe.com/somepage.html');
     enableCommerceFrameFeatures({ dialog, iframe });
@@ -43,15 +24,12 @@ describe('Modal dialog with a `commerce-frame` class', () => {
   });
 
   it('adjustStyles: sets the `height-fit-content` class if height adjustment is applicable', () => {
-    const { dialog, iframe } = addModal('modal1');
     enableCommerceFrameFeatures({ dialog, iframe });
     expect(dialog.classList.contains('height-fit-content')).to.be.true;
     expect(iframe.style.height).to.equal('');
   });
 
   it('sends viewport dimensions upon request, and then on every resize', async () => {
-    await setViewport({ width: 800, height: 600 });
-    const { dialog, iframe } = addModal('modal1');
     sinon.spy(window, 'postMessage');
     enableCommerceFrameFeatures({ dialog, iframe });
     window.postMessage('viewportWidth');
@@ -74,7 +52,6 @@ describe('Modal dialog with a `commerce-frame` class', () => {
   });
 
   it('adjusts modal height if height auto adjustment is applicable', async () => {
-    const { dialog, iframe, iframeWrapper } = addModal('modal1');
     const contentHeight = {
       desktop: 714,
       mobile: '100%',
@@ -97,10 +74,6 @@ describe('Modal dialog with a `commerce-frame` class', () => {
   });
 
   it('properly adjusts the modal height when there are two modals on the page', async () => {
-    addModal('modal1');
-    const {
-      dialog, iframe, iframeWrapper, secondDialog, secondIframe, secondIframeWrapper,
-    } = addModal('modal2');
     const contentHeight = {
       desktop1: 714,
       desktop2: 600,
@@ -138,11 +111,4 @@ describe('Modal dialog with a `commerce-frame` class', () => {
     expect(dialog.style.height).to.equal('');
     window.location.hash = '';
   });
-
-  it('initialises managed modals via merch block', async () => {
-    window.location.hash = '#page=2';
-    const { dialog } = addModal('modal3');
-    adjustModalHeight(600);
-    expect(dialog.style.height).to.equal('580px');
-  });
 });