From 7c07a73b6c63630d410f2ae795bd461371440afe Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Mon, 19 Jun 2023 07:16:39 +0000
Subject: [PATCH] [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>
---
 .../src/components/sms_button/sms_button.js   |  3 +++
 .../src/components/sms_button/sms_button.xml  |  2 +-
 .../src/views/fields/phone/phone_field.js     |  3 +++
 .../src/views/fields/phone/phone_field.xml    |  4 +--
 .../tests/views/fields/phone_field_tests.js   | 27 +++++++++++++++++++
 5 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/addons/sms/static/src/components/sms_button/sms_button.js b/addons/sms/static/src/components/sms_button/sms_button.js
index b9337a88295..c435009d6cc 100644
--- a/addons/sms/static/src/components/sms_button/sms_button.js
+++ b/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({
diff --git a/addons/sms/static/src/components/sms_button/sms_button.xml b/addons/sms/static/src/components/sms_button/sms_button.xml
index 3c08231c1bb..3598b4c5105 100644
--- a/addons/sms/static/src/components/sms_button/sms_button.xml
+++ b/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>
diff --git a/addons/web/static/src/views/fields/phone/phone_field.js b/addons/web/static/src/views/fields/phone/phone_field.js
index c7a3667a0f2..3f1eb01366d 100644
--- a/addons/web/static/src/views/fields/phone/phone_field.js
+++ b/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 = {
diff --git a/addons/web/static/src/views/fields/phone/phone_field.xml b/addons/web/static/src/views/fields/phone/phone_field.xml
index 844122c74bf..452ac79e3a3 100644
--- a/addons/web/static/src/views/fields/phone/phone_field.xml
+++ b/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>
diff --git a/addons/web/static/tests/views/fields/phone_field_tests.js b/addons/web/static/tests/views/fields/phone_field_tests.js
index f91d3f5bc9b..db6ae389a64 100644
--- a/addons/web/static/tests/views/fields/phone_field_tests.js
+++ b/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");
+    });
 });