[MWPW-141785] Implement custom link actions

adobecom · May 16, 2024 · fbea31a · fbea31a
1 parent 9ce9b30
commit fbea31a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/libs/blocks/card/cardUtils.js b/libs/blocks/card/cardUtils.js
@@ -32,19 +32,18 @@ export const addFooter = (links, container, merch) => {
   const linksArr = Array.from(links);
   const linksLeng = linksArr.length;
   const hrTag = merch ? '<hr>' : '';
-  let footer = `<div class="consonant-CardFooter">${hrTag}<div class="consonant-CardFooter-row" data-cells="1">`;
-  footer = linksArr.reduce(
-    (combined, link, index) => (
-      `${combined}<div class="consonant-CardFooter-cell consonant-CardFooter-cell--${(linksLeng === 2 && index === 0) ? 'left' : 'right'}">${link.outerHTML}</div>`),
-    footer,
-  );
-  footer += '</div></div>';
-
-  container.insertAdjacentHTML('beforeend', footer);
-  links.forEach((link) => {
+  const footer = createTag('div', { class: 'consonant-CardFooter' }, hrTag);
+  const row = createTag('div', { class: 'consonant-CardFooter-row', 'data-cells': '1' });
+  linksArr.forEach((link, index) => {
     const { parentElement } = link;
     if (parentElement && document.body.contains(parentElement)) parentElement.remove();
+    const holder = createTag('div', { class: `consonant-CardFooter-cell consonant-CardFooter-cell--${(linksLeng === 2 && index === 0) ? 'left' : 'right'}` });
+    holder.append(link);
+    row.append(holder);
   });
+
+  footer.append(row);
+  container.insertAdjacentElement('beforeend', footer);
 };
 
 export const addWrapper = (el, section, cardType) => {

diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -626,6 +626,15 @@ export function decorateLinks(el) {
         rdx.push(a);
       }
     }
+    // Custom action links
+    const loginEvent = '#_evt-login';
+    if (a.href.includes(loginEvent)) {
+      a.href = a.href.replace(loginEvent, '');
+      a.addEventListener('click', (e) => {
+        e.preventDefault();
+        window.adobeIMS?.signIn();
+      });
+    }
     return rdx;
   }, []);
 }