MWPW-155654 Open TWP modal with preselected tab (#2691)

* MWPW-155654 Open TWP modal with preselected tab * MWPW-155654 Open TWP modal with preselected tab * MWPW-155654 Open TWP modal with preselected tab * MWPW-155654 Open TWP modal with preselected tab * MWPW-155654 Open TWP modal with preselected tab * Trigger Build * MWPW-155654 Open TWP modal with preselected tab * MWPW-155654 Open TWP modal with preselected tab * MWPW-155654 Open TWP modal with preselected tab --------- Co-authored-by: Bozo Jovicic <bozo@hitthecode.com>
adobecom · Aug 6, 2024 · c93a6c1 · c93a6c1
1 parent 018d9db
commit c93a6c1
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 2 deletions.
diff --git a/libs/blocks/merch/merch.js b/libs/blocks/merch/merch.js
@@ -302,11 +302,26 @@ async function openFragmentModal(path, getModal) {
   return modal;
 }
 
+export function appendTabName(url) {
+  const metaPreselectPlan = document.querySelector('meta[name="preselect-plan"]');
+  if (!metaPreselectPlan?.content) return url;
+  let urlWithPlan;
+  try {
+    urlWithPlan = new URL(url);
+  } catch (err) {
+    window.lana?.log(`Invalid URL ${url} : ${err}`);
+    return url;
+  }
+  urlWithPlan.searchParams.set('plan', metaPreselectPlan.content);
+  return urlWithPlan.href;
+}
+
 async function openExternalModal(url, getModal) {
   await loadStyle(`${getConfig().base}/blocks/iframe/iframe.css`);
   const root = createTag('div', { class: 'milo-iframe' });
+  const urlWithTabName = appendTabName(url);
   createTag('iframe', {
-    src: url,
+    src: urlWithTabName,
     frameborder: '0',
     marginwidth: '0',
     marginheight: '0',

diff --git a/test/blocks/merch/merch.test.js b/test/blocks/merch/merch.test.js
@@ -22,6 +22,7 @@ import merch, {
   PRICE_LITERALS_URL,
   PRICE_TEMPLATE_REGULAR,
   getMasBase,
+  appendTabName,
 } from '../../../libs/blocks/merch/merch.js';
 
 import { mockFetch, unmockFetch, readMockText } from './mocks/fetch.js';
@@ -589,7 +590,6 @@ describe('Merch Block', () => {
       expect(modal).to.exist;
       document.querySelector('.modal-curtain').click();
     });
-
     it('renders Milo TWP modal', async () => {
       mockIms();
       const el = document.querySelector('.merch.cta.milo.twp');
@@ -632,6 +632,86 @@ describe('Merch Block', () => {
       expect(modal).to.exist;
       document.querySelector('.modal-curtain').click();
     });
+    it('renders TWP modal with preselected plan', async () => {
+      mockIms();
+      const meta = document.createElement('meta');
+      meta.setAttribute('name', 'preselect-plan');
+      meta.setAttribute('content', 'edu');
+      document.getElementsByTagName('head')[0].appendChild(meta);
+      const el = document.querySelector('.merch.cta.twp.preselected-plan');
+      const cta = await merch(el);
+      const { nodeName } = await cta.onceSettled();
+      expect(nodeName).to.equal('A');
+      cta.click();
+      await delay(100);
+      expect(document.querySelector('iframe').src).to.equal('https://www.adobe.com/mini-plans/illustrator.html?mid=ft&web=1&plan=edu');
+      document.querySelector('meta[name="preselect-plan"]').remove();
+    });
+
+    const MODAL_URLS = [
+      {
+        url: 'https://www.adobe.com/mini-plans/illustrator1.html?mid=ft&web=1',
+        plan: 'edu',
+        urlWithPlan: 'https://www.adobe.com/mini-plans/illustrator1.html?mid=ft&web=1&plan=edu',
+      },
+      {
+        url: 'https://www.adobe.com/mini-plans/illustrator2.html?mid=ft&web=1&plan=abc',
+        plan: 'edu',
+        urlWithPlan: 'https://www.adobe.com/mini-plans/illustrator2.html?mid=ft&web=1&plan=edu',
+      },
+      {
+        url: 'https://www.adobe.com/mini-plans/illustrator3.html?mid=ft&web=1#thisishash',
+        plan: 'edu',
+        urlWithPlan: 'https://www.adobe.com/mini-plans/illustrator3.html?mid=ft&web=1&plan=edu#thisishash',
+      },
+      {
+        url: 'https://www.adobe.com/mini-plans/illustrator4.html',
+        plan: 'edu',
+        urlWithPlan: 'https://www.adobe.com/mini-plans/illustrator4.html?plan=edu',
+      },
+      {
+        url: 'https://www.adobe.com/mini-plans/illustrator5.html#thisishash',
+        plan: 'edu',
+        urlWithPlan: 'https://www.adobe.com/mini-plans/illustrator5.html?plan=edu#thisishash',
+      },
+      {
+        url: 'https://www.adobe.com/mini-plans/illustrator6.html?mid=ft&web=1',
+        plan: 'team',
+        urlWithPlan: 'https://www.adobe.com/mini-plans/illustrator6.html?mid=ft&web=1&plan=team',
+      },
+      {
+        url: 'https://www.adobe.com/mini-plans/illustrator7.html?mid=ft&web=1',
+        plan: '',
+        urlWithPlan: 'https://www.adobe.com/mini-plans/illustrator7.html?mid=ft&web=1',
+      },
+      {
+        url: 'https://www.adobe.com/mini-plans/illustrator8.selector.html/resource?mid=ft&web=1#thisishash',
+        plan: 'team',
+        urlWithPlan: 'https://www.adobe.com/mini-plans/illustrator8.selector.html/resource?mid=ft&web=1&plan=team#thisishash',
+      },
+      {
+        url: 'https://www.adobe.com/mini-plans/illustrator9.sel1.sel2.html/resource#thisishash',
+        plan: 'team',
+        urlWithPlan: 'https://www.adobe.com/mini-plans/illustrator9.sel1.sel2.html/resource?plan=team#thisishash',
+      },
+      {
+        url: 'www.adobe.com/mini-plans/illustrator10.html?mid=ft&web=1', // invalid URL, protocol is missing
+        plan: 'edu',
+        urlWithPlan: 'www.adobe.com/mini-plans/illustrator10.html?mid=ft&web=1',
+      },
+    ];
+    MODAL_URLS.forEach((modalUrl) => {
+      it(`appends preselected plan ${modalUrl.plan} to modal URL ${modalUrl.url}`, async () => {
+        const meta = document.createElement('meta');
+        meta.setAttribute('name', 'preselect-plan');
+        meta.setAttribute('content', modalUrl.plan);
+        document.getElementsByTagName('head')[0].appendChild(meta);
+
+        const resultUrl = appendTabName(modalUrl.url);
+        expect(resultUrl).to.equal(modalUrl.urlWithPlan);
+        document.querySelector('meta[name="preselect-plan"]').remove();
+      });
+    });
   });
 
   describe('checkout link with optional params', async () => {

diff --git a/test/blocks/merch/mocks/body.html b/test/blocks/merch/mocks/body.html
@@ -128,6 +128,10 @@ <h2>CTAs</h2>
   href="/tools/ost?osi=illustrator-base-abm-mult-cci&type=checkoutUrl&modal=true&entitlement=true">CTA Buy Now</a>
 </p>
 
+<p>TWP modal with preselected plan: <a class="merch cta twp preselected-plan"
+  href="/tools/ost?osi=illustrator-trial-abm-mult-cci&type=checkoutUrl&modal=true&entitlement=true">CTA Free Trial</a>
+</p>
+
 <div data-promotion-code="nicopromo" class="fragment">
   <h2>Promo prices inside a fragment</h2>
   <p>Price without discount: <a class="merch price oldprice"