Add Support for action:// Links (#99)

* adds support for action:// links with tests

* update type name

Author: martinmckenna

src/inapp/inapp.ts

@@ -370,13 +370,12 @@ export function getInAppMessages(
             const clickedUrl = link.getAttribute('href') || '';
             const openInNewTab = link.getAttribute('target') === '_blank';
             const isIterableKeywordLink = !!clickedUrl.match(
-              /itbl:\/\/|iterable:\/\/|action:\/\//gim
-            );
-            const isDismissNode = !!clickedUrl.match(
-              /(itbl:\/\/|iterable:\/\/)dismiss/gim
+              /iterable:\/\/|action:\/\//gim
             );
+            const isDismissNode = !!clickedUrl.match(/iterable:\/\/dismiss/gim);
+            const isActionLink = !!clickedUrl.match(/action:\/\//gim);
 
-            if (isDismissNode) {
+            if (isDismissNode || isActionLink) {
               /* 
                 give the close anchor tag properties that make it 
                 behave more like a button with a logical aria label
@@ -402,7 +401,7 @@ export function getInAppMessages(
                   /* swallow the network error */
                 }).catch((e) => e);
 
-                if (isDismissNode) {
+                if (isDismissNode || isActionLink) {
                   dismissMessage(activeIframe, clickedUrl);
                   overlay.remove();
                   document.removeEventListener(
@@ -418,6 +417,21 @@ export function getInAppMessages(
                   global.removeEventListener('resize', throttledResize);
                 }
 
+                if (isActionLink) {
+                  const filteredMatch = (new RegExp(
+                    /^.*action:\/\/(.*)$/,
+                    'gmi'
+                  )?.exec(clickedUrl) || [])?.[1];
+                  /* 
+                    just post the message to the window when clicking 
+                    action:// links and early return
+                  */
+                  return global.postMessage(
+                    { type: 'iterable-action-link', data: filteredMatch },
+                    '*'
+                  );
+                }
+
                 /*
                   finally (since we're in an iframe), programatically click the link
                   and send the user to where they need to go, only if it's not one

src/inapp/tests/inapp.test.ts

@@ -355,7 +355,7 @@ describe('getInAppMessages', () => {
       const secondCloseLink = (
         document.getElementById('iterable-iframe') as HTMLIFrameElement
       )?.contentWindow?.document.body?.querySelector(
-        'a[href="action://close-second-iframe"]'
+        'a[data-qa-original-link="action://close-second-iframe"]'
       );
       expect(secondCloseLink).not.toBe(null);
       expect(secondCloseLink).not.toBeUndefined();
@@ -683,5 +683,137 @@ describe('getInAppMessages', () => {
       );
       expect(secondCloseLink).toBeUndefined();
     });
+
+    it('should call global.postMessage when action:// link is clicked', async () => {
+      const { request } = getInAppMessages(
+        { count: 10, packageName: 'my-lil-website' },
+        true
+      );
+      await request();
+
+      const mockHandler = jest.fn();
+      global.postMessage = mockHandler;
+
+      const iframe = document.getElementById(
+        'iterable-iframe'
+      ) as HTMLIFrameElement;
+      const element = iframe?.contentWindow?.document.body?.querySelector(
+        'a[data-qa-original-link="action://close-first-iframe"]'
+      ) as Element;
+
+      const clickEvent = new MouseEvent('click');
+      await element.dispatchEvent(clickEvent);
+      expect(mockHandler).toHaveBeenCalledWith(
+        {
+          data: 'close-first-iframe',
+          type: 'iterable-action-link'
+        },
+        '*'
+      );
+      expect(document.getElementById('iterable-iframe')).toBe(null);
+      expect(
+        JSON.parse(
+          mockRequest.history.post.filter(
+            (e) => !!e.url?.match(/InAppClick/gim)
+          )[0].data
+        ).clickedUrl
+      ).toBe('action://close-first-iframe');
+    });
+
+    it('should do nothing upon clicking itbl:// links', async () => {
+      mockRequest.onGet('/inApp/getMessages').reply(200, {
+        inAppMessages: [
+          {
+            ...messages[0],
+            content: {
+              ...messages[0].content,
+              html: '<a href="itbl://whatever">profile</a>'
+            }
+          }
+        ]
+      });
+
+      const { request } = getInAppMessages(
+        { count: 10, packageName: 'my-lil-website' },
+        true
+      );
+      await request();
+
+      const iframe = document.getElementById(
+        'iterable-iframe'
+      ) as HTMLIFrameElement;
+      const element = iframe?.contentWindow?.document.body?.querySelector(
+        'a[href="itbl://whatever"]'
+      ) as Element;
+
+      const clickEvent = new MouseEvent('click');
+      await element.dispatchEvent(clickEvent);
+      expect(document.getElementById('iterable-iframe')).not.toBe(null);
+      expect(document.getElementById('iterable-iframe')).not.toBeUndefined();
+    });
+
+    it('should do nothing upon clicking itbl://dismiss links', async () => {
+      mockRequest.onGet('/inApp/getMessages').reply(200, {
+        inAppMessages: [
+          {
+            ...messages[0],
+            content: {
+              ...messages[0].content,
+              html: '<a href="itbl://dismiss">profile</a>'
+            }
+          }
+        ]
+      });
+
+      const { request } = getInAppMessages(
+        { count: 10, packageName: 'my-lil-website' },
+        true
+      );
+      await request();
+
+      const iframe = document.getElementById(
+        'iterable-iframe'
+      ) as HTMLIFrameElement;
+      const element = iframe?.contentWindow?.document.body?.querySelector(
+        'a[href="itbl://dismiss"]'
+      ) as Element;
+
+      const clickEvent = new MouseEvent('click');
+      await element.dispatchEvent(clickEvent);
+      expect(document.getElementById('iterable-iframe')).not.toBe(null);
+      expect(document.getElementById('iterable-iframe')).not.toBeUndefined();
+    });
+
+    it('should do nothing upon clicking iterable:// non-dismiss links', async () => {
+      mockRequest.onGet('/inApp/getMessages').reply(200, {
+        inAppMessages: [
+          {
+            ...messages[0],
+            content: {
+              ...messages[0].content,
+              html: '<a href="iterable://whatever">profile</a>'
+            }
+          }
+        ]
+      });
+
+      const { request } = getInAppMessages(
+        { count: 10, packageName: 'my-lil-website' },
+        true
+      );
+      await request();
+
+      const iframe = document.getElementById(
+        'iterable-iframe'
+      ) as HTMLIFrameElement;
+      const element = iframe?.contentWindow?.document.body?.querySelector(
+        'a[href="iterable://whatever"]'
+      ) as Element;
+
+      const clickEvent = new MouseEvent('click');
+      await element.dispatchEvent(clickEvent);
+      expect(document.getElementById('iterable-iframe')).not.toBe(null);
+      expect(document.getElementById('iterable-iframe')).not.toBeUndefined();
+    });
   });
 });

src/inapp/utils.ts

@@ -273,15 +273,15 @@ export const paintIFrame = (
       
       This prevents a race condition where if we set the height before the images
       are loaded, we might end up with a scrolling iframe
-      */
+    */
     const images =
       html?.match(/\b(https?:\/\/\S+(?:png|jpe?g|gif)\S*)\b/gim) || [];
     return preloadImages(images, () => {
       /* 
-       set the scroll height to the content inside, but since images
-       are going to take some time to load, we opt to preload them, THEN
-       set the inner HTML of the iframe
-       */
+        set the scroll height to the content inside, but since images
+        are going to take some time to load, we opt to preload them, THEN
+        set the inner HTML of the iframe
+      */
       document.body.appendChild(iframe);
       iframe.contentWindow?.document?.open();
       iframe.contentWindow?.document?.write(html);
@@ -405,6 +405,7 @@ export const paintIFrame = (
 export const addButtonAttrsToAnchorTag = (node: Element, ariaLabel: string) => {
   node.setAttribute('aria-label', ariaLabel);
   node.setAttribute('role', 'button');
+  node.setAttribute('data-qa-original-link', node.getAttribute('href') || '');
   node.setAttribute('href', 'javascript:undefined');
 };