From 3f32a64666a454876588983129489b4726ebda00 Mon Sep 17 00:00:00 2001
From: Suhani Jain <110388864+suhjainadobe@users.noreply.github.com>
Date: Thu, 5 Sep 2024 22:16:03 +0530
Subject: [PATCH] MWPW-157292: CC and DC: Phone number links wrong (#2841)

* MWPW-157292: CC and DC: Phone number links wrong

* Unit tests

* Unit tests

---------

Co-authored-by: Suhani <suhjain@Suhanis-MacBook-Pro.local>
---
 libs/features/placeholders.js | 13 +++++++++----
 libs/utils/utils.js           | 26 ++++++++++++--------------
 test/utils/mocks/body.html    |  3 +++
 test/utils/utils.test.js      |  3 +++
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/libs/features/placeholders.js b/libs/features/placeholders.js
index 5898fef5c0..73bdd5d1fa 100644
--- a/libs/features/placeholders.js
+++ b/libs/features/placeholders.js
@@ -118,7 +118,8 @@ export async function replaceText(
   // The .shift method is very slow, thus using normal iterator
   let i = 0;
   // eslint-disable-next-line no-plusplus
-  const finalText = text.replaceAll(regex, () => placeholders[i++]);
+  let finalText = text.replaceAll(regex, () => placeholders[i++]);
+  finalText = finalText.replace(/&nbsp;/g, '\u00A0');
   return finalText;
 }
 
@@ -130,9 +131,13 @@ export async function decoratePlaceholderArea({
   if (!nodes.length) return;
   const config = getConfig();
   await fetchPlaceholders({ placeholderPath, config, placeholderRequest });
-  const replaceNodes = nodes.map(async (textNode) => {
-    textNode.nodeValue = await replaceText(textNode.nodeValue, config);
-    textNode.nodeValue = textNode.nodeValue.replace(/&nbsp;/g, '\u00A0');
+  const replaceNodes = nodes.map(async (nodeEl) => {
+    if (nodeEl.nodeType === Node.TEXT_NODE) {
+      nodeEl.nodeValue = await replaceText(nodeEl.nodeValue, config);
+    } else if (nodeEl.nodeType === Node.ELEMENT_NODE) {
+      const hrefVal = await replaceText(nodeEl.getAttribute('href'), config);
+      nodeEl.setAttribute('href', hrefVal);
+    }
   });
   await Promise.all(replaceNodes);
 }
diff --git a/libs/utils/utils.js b/libs/utils/utils.js
index 639cb8adc6..3b57b87e96 100644
--- a/libs/utils/utils.js
+++ b/libs/utils/utils.js
@@ -760,23 +760,21 @@ export async function customFetch({ resource, withCacheRules }) {
 
 const findReplaceableNodes = (area) => {
   const regex = /{{(.*?)}}|%7B%7B(.*?)%7D%7D/g;
-  const walker = document.createTreeWalker(
-    area,
-    NodeFilter.SHOW_TEXT,
-    {
-      acceptNode(node) {
-        const a = regex.test(node.nodeValue)
-          ? NodeFilter.FILTER_ACCEPT
-          : NodeFilter.FILTER_REJECT;
-        regex.lastIndex = 0;
-        return a;
-      },
-    },
-  );
+  const walker = document.createTreeWalker(area, NodeFilter.SHOW_ALL);
   const nodes = [];
   let node = walker.nextNode();
   while (node !== null) {
-    nodes.push(node);
+    let matchFound = false;
+    if (node.nodeType === Node.TEXT_NODE) {
+      matchFound = regex.test(node.nodeValue);
+    } else if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('href')) {
+      const hrefValue = node.getAttribute('href');
+      matchFound = regex.test(hrefValue);
+    }
+    if (matchFound) {
+      nodes.push(node);
+      regex.lastIndex = 0;
+    }
     node = walker.nextNode();
   }
   return nodes;
diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
index f1d7f8718a..648965a5ed 100644
--- a/test/utils/mocks/body.html
+++ b/test/utils/mocks/body.html
@@ -54,6 +54,9 @@
     <p>I'm not a blockhead.</p>
     <p>{{&nbsp;inkl. MwSt.}}</p>
   </div>
+  <div>
+    <a href="tel:%7B%7Bphone-number-substance%7D%7D" class="placeholder"><sup>{{phone-number-substance}}</sup></a>
+  </div>
   <!-- picture element with poster video -->
   <div>
     <picture>
diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
index b2e5a06b6a..d3132ea524 100644
--- a/test/utils/utils.test.js
+++ b/test/utils/utils.test.js
@@ -230,6 +230,9 @@ describe('Utils', () => {
       const paragraphs = [...document.querySelectorAll('p')];
       const lastPara = paragraphs.pop();
       expect(lastPara.textContent).to.equal(' inkl. MwSt.');
+      const plceholderhref = document.querySelector('.placeholder');
+      const hrefValue = plceholderhref.getAttribute('href');
+      expect(hrefValue).to.equal('tel:phone number substance');
     });
 
     it('Decorates meta helix url', () => {