Merge pull request #424 from adobecom/MWPW-132031

MWPW-132031

acrobat/scripts/imageReplacer.js

@@ -1,39 +1,24 @@
 import { createTag } from './miloUtils.js';
 
-const cardImageMappings = [
-  { name: 'AMEX_V_MC_D_DU_JCB_PP', filename: 'amex_v_mc_d_du_jcb_pp.jpg' },
-  { name: 'AMEX_V_MC_JCB_JPBANK', filename: 'amex_v_mc_jcb_jpbank.png' },
-  { name: 'AMEX_V_MC_PP', filename: 'amex_v_mc_pp.jpg' },
-  { name: 'AMEX_VISA_MC_D_DU_ELC_PP_BOLETO', filename: 'amex_visa_mc_d_du_elc_pp_boleto.jpg' },
-  { name: 'AMEX_VISA_MC_D_DU_JCB_PAYPAL', filename: 'amex_visa_mc_d_du_jcb_paypal.jpg' },
-  { name: 'AMEX_VISA_MC_D_PAYPAL', filename: 'amex_visa_mc_d_paypal.jpg' },
-  { name: 'AMEX_VISA_MC_JCB_JPBANK_JPSTORE', filename: 'amex_visa_mc_jcb_jpbank_jpstore.png' },
-  { name: 'V_MC_DD_PP', filename: 'v_mc_dd_pp.jpg' },
-  { name: 'V_MC', filename: 'v_mc.jpg' },
-];
+export default async function replacePlaceholdersWithImages(locale, miloLibs) {
+  const country = (locale?.split('-').pop()?.toLowerCase()) ?? 'us';
+  const path = `${miloLibs}/icons/accepted-credit-cards/${country}.png?format=webply&optimize=medium`;
+  const pattern = /{{credit-cards}}/g;
 
-export default async function replacePlaceholdersWithImages(documentElement) {
-  const paragraphs = documentElement.querySelectorAll('p');
   await createTag.then((tag) => {
-    paragraphs.forEach((p) => {
-      cardImageMappings.forEach((mapping) => {
-        const cardName = p.innerHTML.trim();
-        const matchedImage = cardName === mapping.name;
-        if (matchedImage) {
-          const imagePath = `/acrobat/img/icons/credit-cards-${mapping.filename}`;
-          const imgAttributes = {
-            src: imagePath,
-            loading: 'lazy',
-            'data-local': 'credit-cards',
-          };
-          const imgElement = tag('img', imgAttributes);
-          imgElement.onerror = async () => {
-            window.lana?.log(`Error loading image for credit-card placeholder: ${cardName}`);
-            imgElement.remove();
-          };
-          p.replaceWith(imgElement);
-        }
-      });
+    document.querySelectorAll('p').forEach((p) => {
+      const matched = pattern.exec(p.innerHTML);
+      if (matched) {
+        const img = tag('img', {
+          src: path,
+          loading: 'lazy',
+          class: 'credit-cards-icon',
+          style: 'min-height: 33px;',
+          'data-country': `${country}`,
+          onerror: `window.lana?.log('Failed to load credit-card icon ${country}'); this.remove()`,
+        });
+        p.replaceWith(img);
+      }
     });
   });
 }

acrobat/scripts/scripts.js

@@ -321,6 +321,11 @@ const { ietf } = getLocale(locales);
   const { loadArea, setConfig, loadLana, getMetadata } = await import(`${miloLibs}/utils/utils.js`);
   addLocale(ietf);
 
+  if (getMetadata('commerce')) {
+    const { default: replacePlaceholdersWithImages } = await import('./imageReplacer.js');
+    replacePlaceholdersWithImages(ietf, miloLibs);
+  }
+
   setConfig({ ...CONFIG, miloLibs });
   loadLana({ clientId: 'dxdc' });
 
@@ -348,9 +353,4 @@ const { ietf } = getLocale(locales);
       window.dispatchEvent(imsIsReady);
     }
   }, 1000);
-
-  if (getMetadata('commerce')) {
-    const { default: replacePlaceholdersWithImages } = await import('./imageReplacer.js');
-    replacePlaceholdersWithImages(document);
-  }
 }());

test/scripts/imageReplacer.test.js

@@ -6,41 +6,32 @@ describe('replacePlaceholdersWithImages', () => {
 
   beforeEach(() => {
     documentElement = document.createElement('div');
-    documentElement.innerHTML = `
-    <p>AMEX_V_MC_D_DU_JCB_PP</p>
-    <p>AMEX_V_MC_JCB_JPBANK</p>
-    <p>AMEX_V_MC_PP</p>
-    <p>AMEX_VISA_MC_D_DU_ELC_PP_BOLETO</p>
-    <p>AMEX_VISA_MC_D_DU_JCB_PAYPAL</p>
-    <p>AMEX_VISA_MC_D_PAYPAL</p>
-    <p>AMEX_VISA_MC_JCB_JPBANK_JPSTORE</p>
-    <p>V_MC_DD_PP</p>
-    <p>V_MC</p>
-  `;
+    documentElement.innerHTML = '<p>{{credit-cards}}</p>';
+    document.body.innerHTML = '';
+    document.body.appendChild(documentElement);
   });
 
   it('replaces card placeholders with images', async () => {
-    await replacePlaceholdersWithImages(documentElement);
-    const imgElements = documentElement.querySelectorAll('img');
-    expect(imgElements.length).to.equal(9);
+    await replacePlaceholdersWithImages('es-US', '/libs');
+    const imgElements = document.querySelectorAll('img');
+    expect(imgElements.length).to.equal(1);
     imgElements.forEach((img) => {
-      expect(img.getAttribute('src')).to.match(/\/acrobat\/img\/icons\/credit-cards-.+\.(jpg|png)/);
+      expect(img.getAttribute('src')).to.match(/.*\/icons\/accepted-credit-cards\/[^/]+\.(jpg|png|webp)/);
       expect(img.getAttribute('loading')).to.equal('lazy');
-      expect(img.getAttribute('data-local')).to.equal('credit-cards');
+      expect(img.getAttribute('class')).to.equal('credit-cards-icon');
     });
   });
 
   it('removes the original paragraph element', async () => {
-    await replacePlaceholdersWithImages(documentElement);
+    await replacePlaceholdersWithImages('en-US', '/libs');
     const pElements = documentElement.querySelectorAll('p');
     expect(pElements.length).to.equal(0);
   });
 
   it('logs an error if an image fails to load', async () => {
-    await replacePlaceholdersWithImages(documentElement);
-    const imgElements = documentElement.querySelectorAll('img');
-    await imgElements[0].onerror();
-    const imgElements2 = documentElement.querySelectorAll('img');
-    expect(imgElements2.length).to.equal(8);
+    await replacePlaceholdersWithImages('en-US', '/libs');
+    expect(documentElement.querySelectorAll('img').length).to.equal(1);
+    await documentElement.querySelectorAll('img')[0].onerror();
+    expect(documentElement.querySelectorAll('img').length).to.equal(0);
   });
 });