diff --git a/acrobat/img/icons/credit-cards-amex_v_mc_d_du_jcb_pp.jpg b/acrobat/img/icons/credit-cards-amex_v_mc_d_du_jcb_pp.jpg deleted file mode 100644 index 1d50e151..00000000 Binary files a/acrobat/img/icons/credit-cards-amex_v_mc_d_du_jcb_pp.jpg and /dev/null differ diff --git a/acrobat/img/icons/credit-cards-amex_v_mc_jcb_jpbank.png b/acrobat/img/icons/credit-cards-amex_v_mc_jcb_jpbank.png deleted file mode 100644 index b80435ed..00000000 Binary files a/acrobat/img/icons/credit-cards-amex_v_mc_jcb_jpbank.png and /dev/null differ diff --git a/acrobat/img/icons/credit-cards-amex_v_mc_pp.jpg b/acrobat/img/icons/credit-cards-amex_v_mc_pp.jpg deleted file mode 100644 index e819e4b9..00000000 Binary files a/acrobat/img/icons/credit-cards-amex_v_mc_pp.jpg and /dev/null differ diff --git a/acrobat/img/icons/credit-cards-amex_visa_mc_d_du_elc_pp_boleto.jpg b/acrobat/img/icons/credit-cards-amex_visa_mc_d_du_elc_pp_boleto.jpg deleted file mode 100644 index bc4d061c..00000000 Binary files a/acrobat/img/icons/credit-cards-amex_visa_mc_d_du_elc_pp_boleto.jpg and /dev/null differ diff --git a/acrobat/img/icons/credit-cards-amex_visa_mc_d_du_jcb_paypal.jpg b/acrobat/img/icons/credit-cards-amex_visa_mc_d_du_jcb_paypal.jpg deleted file mode 100644 index 1d50e151..00000000 Binary files a/acrobat/img/icons/credit-cards-amex_visa_mc_d_du_jcb_paypal.jpg and /dev/null differ diff --git a/acrobat/img/icons/credit-cards-amex_visa_mc_d_paypal.jpg b/acrobat/img/icons/credit-cards-amex_visa_mc_d_paypal.jpg deleted file mode 100644 index 33ed0e48..00000000 Binary files a/acrobat/img/icons/credit-cards-amex_visa_mc_d_paypal.jpg and /dev/null differ diff --git a/acrobat/img/icons/credit-cards-amex_visa_mc_jcb_jpbank_jpstore.png b/acrobat/img/icons/credit-cards-amex_visa_mc_jcb_jpbank_jpstore.png deleted file mode 100644 index 57ff5617..00000000 Binary files a/acrobat/img/icons/credit-cards-amex_visa_mc_jcb_jpbank_jpstore.png and /dev/null differ diff --git a/acrobat/img/icons/credit-cards-v_mc.jpg b/acrobat/img/icons/credit-cards-v_mc.jpg deleted file mode 100644 index ed7e553a..00000000 Binary files a/acrobat/img/icons/credit-cards-v_mc.jpg and /dev/null differ diff --git a/acrobat/img/icons/credit-cards-v_mc_dd_pp.jpg b/acrobat/img/icons/credit-cards-v_mc_dd_pp.jpg deleted file mode 100644 index 58995eae..00000000 Binary files a/acrobat/img/icons/credit-cards-v_mc_dd_pp.jpg and /dev/null differ diff --git a/acrobat/img/icons/credit-cards-v_mc_pp.jpg b/acrobat/img/icons/credit-cards-v_mc_pp.jpg deleted file mode 100644 index 0c4daab0..00000000 Binary files a/acrobat/img/icons/credit-cards-v_mc_pp.jpg and /dev/null differ diff --git a/acrobat/scripts/imageReplacer.js b/acrobat/scripts/imageReplacer.js index 2fe18747..ddf524c2 100644 --- a/acrobat/scripts/imageReplacer.js +++ b/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); + } }); }); } diff --git a/acrobat/scripts/scripts.js b/acrobat/scripts/scripts.js index e1982f54..0682edd4 100644 --- a/acrobat/scripts/scripts.js +++ b/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); - } }()); diff --git a/test/scripts/imageReplacer.test.js b/test/scripts/imageReplacer.test.js index 9d4724bf..ddbbf8cd 100644 --- a/test/scripts/imageReplacer.test.js +++ b/test/scripts/imageReplacer.test.js @@ -6,41 +6,32 @@ describe('replacePlaceholdersWithImages', () => { beforeEach(() => { documentElement = document.createElement('div'); - documentElement.innerHTML = ` -
AMEX_V_MC_D_DU_JCB_PP
-AMEX_V_MC_JCB_JPBANK
-AMEX_V_MC_PP
-AMEX_VISA_MC_D_DU_ELC_PP_BOLETO
-AMEX_VISA_MC_D_DU_JCB_PAYPAL
-AMEX_VISA_MC_D_PAYPAL
-AMEX_VISA_MC_JCB_JPBANK_JPSTORE
-V_MC_DD_PP
-V_MC
- `; + documentElement.innerHTML = '{{credit-cards}}
'; + 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); }); });