Sync membership cart flow dataLayer changes into release branch

blocks/footer-paid/footer-paid.js

@@ -2,6 +2,7 @@ import {
   decorateLinks,
   isCanada,
 } from '../../scripts/lib-franklin.js';
+import { changeDomain, addCanadaToLinks } from '../../scripts/scripts.js';
 
 /**
  * loads and decorates the footer
@@ -108,6 +109,8 @@ export default async function decorate(block) {
       }
     });
 
+    changeDomain(footer);
+    addCanadaToLinks(footer);
     decorateLinks(footer);
     block.append(footer);
   }

blocks/footer/footer.js

@@ -6,7 +6,7 @@ import {
   isMobile,
   isCanada,
 } from '../../scripts/lib-franklin.js';
-import { changeDomain } from '../../scripts/scripts.js';
+import { changeDomain, addCanadaToLinks } from '../../scripts/scripts.js';
 
 const socialNetworks = ['Instagram', 'Twitter', 'Facebook'];
 
@@ -154,6 +154,7 @@ export default async function decorate(block) {
 
     decorateIcons(footer);
     changeDomain(footer);
+    addCanadaToLinks(footer);
     decorateLinks(footer);
     instrumentTrackingEvents(footer);
     block.append(footer);

blocks/found-pet-report/found-pet-report.js

@@ -78,7 +78,7 @@ export default async function decorate(block) {
       <div class="error-message"></div>
     </div>
     <div class="wrapper wrapper-info">
-      <input type="number" id="microchipId" name="microchipId" required placeholder="">
+      <input type="text" id="microchipId" name="microchipId" required placeholder="" maxlength="15">
       <label for="microchipId" class="float-label">Microchip number (up to 15 digits)*</label>
       <span class="checkmark"></span>
       <div class="error-message"></div>
@@ -93,7 +93,7 @@ export default async function decorate(block) {
     <div class="error-message"></div>
   </div>
   <div class="wrapper">
-    <input type="number" id="phoneNumber" name="phoneNumber" placeholder="" maxlength="10">
+    <input type="tel" id="phoneNumber" name="phoneNumber" placeholder="" maxlength="12">
     <label for="phoneNumber" class="float-label">Phone Number*</label>
     <span class="checkmark"></span>
     <div class="error-message"></div>
@@ -168,7 +168,8 @@ export default async function decorate(block) {
   // REGEX for validators
   const AT_LEAST_ONE_SYMBOL_REGEX = /.+/;
   const AT_LEAST_ONE_SYMBOL_OR_NUMBER_REGEX = /[0-9\p{P}\p{S}]/u;
-  const PHONE_OPTIONAL_REGEX = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
+  // const PHONE_OPTIONAL_REGEX = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
+  const PHONE_OPTIONAL_REGEX = /^\d{3}-?\d{3}-?\d{4}$/;
   const EMAIL_OPTIONAL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 
   const states = {
@@ -275,7 +276,7 @@ export default async function decorate(block) {
     validateField(event.target, AT_LEAST_ONE_SYMBOL_REGEX, 'This value is required.');
   });
   microchipId.addEventListener('blur', (event) => {
-    validateField(event.target, AT_LEAST_ONE_SYMBOL_OR_NUMBER_REGEX, 'This value is required.');
+    validateField(event.target, AT_LEAST_ONE_SYMBOL_REGEX, 'This value is required.');
   });
   ownerName.addEventListener('blur', (event) => {
     validateField(event.target, AT_LEAST_ONE_SYMBOL_REGEX, 'This value is required.');

blocks/fragment-tabs/fragment-tabs.js

@@ -38,7 +38,21 @@ class Tabs {
         }
       });
 
-    return Promise.all(fetchPromises);
+    await Promise.all(fetchPromises);
+
+    // Create an array of tabs with currentTab first
+    const tabsInOrder = [currentTab, ...Object.keys(this.tabs).filter((tab) => tab !== currentTab)];
+
+    // Create an array of promises for decorateMain and loadBlocks
+    const decorateAndLoadPromises = tabsInOrder.map(async (tab) => {
+      const tabDiv = document.getElementById(`tab-content-${tab}`);
+      if (tabDiv) {
+        decorateMain(tabDiv);
+        await loadBlocks(tabDiv);
+      }
+    });
+
+    await Promise.all(decorateAndLoadPromises);
   }
 
   static async createTabContent(tab, content, path) {
@@ -54,9 +68,6 @@ class Tabs {
     };
     resetAttributeBase('img', 'src');
     resetAttributeBase('source', 'srcset');
-
-    decorateMain(tabDiv);
-    await loadBlocks(tabDiv);
   }
 
   async loadTab() {
@@ -90,15 +101,15 @@ class Tabs {
         if (resp.ok) {
           content = await resp.text();
         }
-        // We need to preload other tabs so LazyLoad can assign event listeners correctly
-        await this.preloadTabs();
       }
       if (content) {
         this.preloadedContent[currentTab] = content;
         await Tabs.createTabContent(currentTab, content, path);
         const tabDiv = document.getElementById(`tab-content-${currentTab}`);
         tabDiv.style.display = 'block';
       }
+      // We need to preload other tabs so LazyLoad can assign event listeners correctly
+      await this.preloadTabs();
     }
   }
 }

blocks/header-paid/header-paid.js

@@ -1,6 +1,6 @@
-import { jsx } from '../../scripts/scripts.js';
+import { jsx, changeDomain, addCanadaToLinks } from '../../scripts/scripts.js';
 import { loadFragment } from '../fragment/fragment.js';
-import { isCanada } from '../../scripts/lib-franklin.js';
+import { isCanada, decorateLinks } from '../../scripts/lib-franklin.js';
 
 // Adding animation for header
 function onDomContentLoaded() {
@@ -46,4 +46,8 @@ export default async function decorate(block) {
     // DOM is already loaded
     onDomContentLoaded();
   }
+
+  changeDomain(block);
+  addCanadaToLinks(block);
+  decorateLinks(block);
 }

blocks/header/header.js

@@ -13,7 +13,7 @@ import {
   baseDomain,
 } from '../../scripts/lib-franklin.js';
 import { trackGTMEvent } from '../../scripts/lib-analytics.js';
-import { changeDomain } from '../../scripts/scripts.js';
+import { changeDomain, addCanadaToLinks } from '../../scripts/scripts.js';
 
 // let positionY = 0;
 // const SCROLL_STEP = 25;
@@ -342,38 +342,6 @@ function addLinkToLogo(header) {
   }
 }
 
-/**
- * Rewrite links to add Canada to the path
- * @param {Element} header The header block element
- */
-function addCanadaToLinks(header) {
-  if (isCanada) {
-    header.querySelectorAll('a').forEach((anchor) => {
-      if (anchor.getAttribute('rel') === 'alternate') return;
-      const url = new URL(anchor.href);
-      const newUrl = new URL(anchor.href, window.location.origin);
-      if (url.hostname === window.location.hostname) {
-        // change only for internal links
-        newUrl.pathname = `/ca${url.pathname}`;
-        anchor.href = newUrl.toString();
-      }
-    });
-  }
-}
-
-/**
- * Adds external link icons to links
- * @param {Element} header
- */
-function addExternalLinkIcons(header) {
-  header.querySelectorAll('a').forEach((anchor) => {
-    const url = new URL(anchor.href);
-    if (url.hostname !== window.location.hostname) {
-      anchor.classList.add('icon-external');
-    }
-  });
-}
-
 /**
  * Fetch images from the document based media folder.
  * @param {Element} block The header block element
@@ -447,7 +415,6 @@ export default async function decorate(block) {
   navWrapper.className = 'nav-wrapper';
   navWrapper.append(nav);
   block.append(navWrapper);
-  addCanadaToLinks(navWrapper);
 
   // Append membership hover content
   const membershipsHoverContent = nav.querySelector('.nav-memberships');
@@ -456,16 +423,12 @@ export default async function decorate(block) {
   // Append register hover content
   const registerHoverContent = nav.querySelector('.nav-register');
   navWrapper.append(registerHoverContent);
-  decorateLinks(registerHoverContent);
-
-  // Add icon to login links
-  const loginLinks = nav.querySelector('.login');
-  addExternalLinkIcons(loginLinks);
 
   decorateIcons(nav);
   decorateButtons(nav);
   changeDomain(block);
-  decorateLinks(nav);
+  addCanadaToLinks(block);
+  decorateLinks(block);
   instrumentTrackingEvents(nav);
   removeTargetBlank(nav);
   addLinkToLogo(nav);

scripts/lib-franklin.js

@@ -596,13 +596,14 @@ export function decorateButtons(element) {
  */
 export function decorateLinks(element) {
   const currentDomain = window.location.hostname;
-  const domainRegex = new RegExp(`^https?://(www\\.)?${currentDomain.replace(/\./g, '\\.')}`);
 
   element.querySelectorAll('a').forEach((a) => {
+    const url = new URL(a.href);
     // open non-current domain pages in new tab
-    if (!domainRegex.test(a.href)) {
+    if (url.hostname !== currentDomain) {
       a.target = '_blank';
     }
+
     // open tel: links in the same tab
     if (/^tel:/.test(a.href)) {
       a.target = '_self';

scripts/scripts.js

@@ -144,6 +144,27 @@ export function changeDomain(block) {
   });
 }
 
+/**
+ * Rewrite links to add Canada to the path
+ * @param {Element} block The block element
+ */
+export function addCanadaToLinks(block) {
+  if (isCanada) {
+    block.querySelectorAll('a').forEach((anchor) => {
+      if (anchor.getAttribute('rel') === 'alternate') return;
+      const url = new URL(anchor.href);
+      const newUrl = new URL(anchor.href, window.location.origin);
+      if (url.hostname === window.location.hostname) {
+        // change only for internal links
+        if (!url.pathname.startsWith('/ca/')) {
+          newUrl.pathname = `/ca${url.pathname}`;
+          anchor.href = newUrl.toString();
+        }
+      }
+    });
+  }
+}
+
 /**
  * Decorates the main element.
  * @param {Element} main The main element
@@ -154,6 +175,7 @@ export function decorateMain(main) {
   decorateButtons(main);
   decorateIcons(main);
   changeDomain(main);
+  addCanadaToLinks(main);
   decorateLinks(main);
   buildAutoBlocks(main);
   decorateSections(main);