[FIX] web,*: properly format phone href

*: mail

This commit fixes the href used by the PhoneField. Following the
specs of a phone uri, spaces must be removed from the phone number
when using the href attribute.

A test has been added to verify that any spaces are removed from
a given phone number.

In mail, the SMS button href has been edited for the same purpose.

task-3371999

closes odoo/odoo#128383

X-original-commit: 9ff0270c8acf9596ebd404627c4f5b1a98b37c59
Signed-off-by: Florent Dardenne (dafl) <dafl@odoo.com>
Signed-off-by: Luca Vitali (luvi) <luvi@odoo.com>

addons/sms/static/src/components/sms_button/sms_button.js

@@ -10,6 +10,9 @@ export class SendSMSButton extends Component {
         this.user = useService("user");
         this.title = this.env._t("Send SMS Text Message");
     }
+    get phoneHref() {
+        return "sms:" + this.props.record.data[this.props.name].replace(/\s+/g, "");
+    }
     async onClick() {
         await this.props.record.save();
         this.action.doAction({

addons/sms/static/src/components/sms_button/sms_button.xml

@@ -4,7 +4,7 @@
     <t t-name="sms.SendSMSButton" owl="1">
         <a
             t-att-title="title"
-            t-att-href="'sms:'+ props.record.data[props.name]"
+            t-att-href="phoneHref"
             t-on-click.prevent.stop="onClick"
             class="ms-3 d-inline-flex align-items-center o_field_phone_sms"
         ><i class="fa fa-mobile"></i><small class="fw-bold ms-1">SMS</small></a>

addons/web/static/src/views/fields/phone/phone_field.js

@@ -17,6 +17,9 @@ export class PhoneField extends Component {
     setup() {
         useInputField({ getValue: () => this.props.record.data[this.props.name] || "" });
     }
+    get phoneHref() {
+        return "tel:" + this.props.record.data[this.props.name].replace(/\s+/g, "");
+    }
 }
 
 export const phoneField = {

addons/web/static/src/views/fields/phone/phone_field.xml

@@ -4,7 +4,7 @@
     <t t-name="web.PhoneField" owl="1">
         <div class="o_phone_content d-inline-flex w-100">
             <t t-if="props.readonly">
-                <a t-if="props.record.data[props.name]" class="o_form_uri" t-att-href="'tel:'+props.record.data[props.name]" t-esc="props.record.data[props.name]"/>
+                <a t-if="props.record.data[props.name]" class="o_form_uri" t-att-href="phoneHref" t-esc="props.record.data[props.name]"/>
             </t>
             <t t-else="">
                 <input
@@ -22,7 +22,7 @@
         <xpath expr="//input" position="after">
             <a
                 t-if="props.record.data[props.name]"
-                t-att-href="'tel:'+props.record.data[props.name]"
+                t-att-href="phoneHref"
                 class="o_phone_form_link ms-3 d-inline-flex align-items-center"
             >
                 <i class="fa fa-phone"></i><small class="fw-bold ms-1">Call</small>

addons/web/static/tests/views/fields/phone_field_tests.js

@@ -237,4 +237,31 @@ QUnit.module("Fields", (hooks) => {
             "The readonly field don't contain a link if no value is set"
         );
     });
+
+    QUnit.test("href is correctly formatted", async function (assert) {
+        serverData.models.partner.records[0].foo = "+12 345 67 89 00";
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            mode: "readonly",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" widget="phone"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        const phone = target.querySelector(".o_field_phone a");
+        assert.strictEqual(
+            phone.textContent,
+            "+12 345 67 89 00",
+            "value should be displayed properly with spaces as separators"
+        );
+        assert.hasAttrValue(phone, "href", "tel:+12345678900", "href should not contain any space");
+    });
 });