Fix WhatsApp links/numbers
CI / Lint (pull_request) Successful in 1m3s
CI / Test (pull_request) Successful in 1m14s
Release Drafter / Update release notes draft (pull_request) Successful in 5s

Our links would work after opening WhatsApp, but not render e.g. known
business names associated with the number on the intermediate page that
you open the app or web app from
This commit is contained in:
2026-08-19 12:39:50 -06:00
parent 822472a0e6
commit 77db625b11
2 changed files with 31 additions and 4 deletions
+1 -1
View File
@@ -232,7 +232,7 @@ export default class PlaceDetails extends Component {
return htmlSafe( return htmlSafe(
parts parts
.map((p) => { .map((p) => {
const safeTel = p.replace(/[\s-]+/g, ''); const safeTel = p.replace(/[\s()+.-]/g, '');
return `<a href="https://wa.me/${safeTel}" target="_blank" rel="noopener noreferrer">${p}</a>`; return `<a href="https://wa.me/${safeTel}" target="_blank" rel="noopener noreferrer">${p}</a>`;
}) })
.join('<br>') .join('<br>')
@@ -320,14 +320,14 @@ module('Integration | Component | place-details', function (hooks) {
const links = whatsappBlock.querySelectorAll('a[href^="https://wa.me/"]'); const links = whatsappBlock.querySelectorAll('a[href^="https://wa.me/"]');
assert.strictEqual(links.length, 2, 'Rendered exactly 2 WhatsApp links'); assert.strictEqual(links.length, 2, 'Rendered exactly 2 WhatsApp links');
// Verify it stripped the dashes and spaces for the wa.me URL // Verify it stripped the dashes, spaces and leading plus for the wa.me URL
assert.strictEqual( assert.strictEqual(
links[0].getAttribute('href'), links[0].getAttribute('href'),
'https://wa.me/+44987654321' 'https://wa.me/44987654321'
); );
assert.strictEqual( assert.strictEqual(
links[1].getAttribute('href'), links[1].getAttribute('href'),
'https://wa.me/+12345678900' 'https://wa.me/12345678900'
); );
// Verify it kept the dashes and spaces for the visible text // Verify it kept the dashes and spaces for the visible text
@@ -335,6 +335,33 @@ module('Integration | Component | place-details', function (hooks) {
assert.dom(links[1]).hasText('+1 234-567 8900'); assert.dom(links[1]).hasText('+1 234-567 8900');
}); });
test('it strips parentheses, dots and the leading plus from whatsapp hrefs', async function (assert) {
const place = {
title: 'Chat Shop',
osmTags: {
whatsapp: '+504-9850-3802;(504) 9850.3802;+1.234.567.8900',
},
};
await render(<template><PlaceDetails @place={{place}} /></template>);
const links = this.element.querySelectorAll('a[href^="https://wa.me/"]');
assert.strictEqual(links.length, 3, 'Rendered exactly 3 WhatsApp links');
assert.strictEqual(
links[0].getAttribute('href'),
'https://wa.me/50498503802'
);
assert.strictEqual(
links[1].getAttribute('href'),
'https://wa.me/50498503802'
);
assert.strictEqual(
links[2].getAttribute('href'),
'https://wa.me/12345678900'
);
});
test('it renders correct OpenStreetMap link for an OSM place', async function (assert) { test('it renders correct OpenStreetMap link for an OSM place', async function (assert) {
const place = { const place = {
title: 'OSM Place', title: 'OSM Place',