From aea8a49a3561a0e30f5cdc8722728d52d1c87bf6 Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Mon, 26 Sep 2022 10:58:36 +0000
Subject: [PATCH] [FIX] web: adapt Call button for PhoneField

Since form views are always visible in edition mode, it was no longer
possible to click on the phone number to start a call. Now, a button
is displayed next to the input, allowing the call to start despite
the state of the view.

Tests have been adapted to assert the presence of the button.

Enterprise PR: https://github.com/odoo/enterprise/pull/31954

X-original-commit: 4ac2f17ce6279aa745b1a930f52b86635a04753c
Part-of: odoo/odoo#101786
---
 .../src/views/fields/phone/phone_field.js     |  4 ++
 .../src/views/fields/phone/phone_field.xml    | 38 +++++++++++++------
 .../tests/views/fields/phone_field_tests.js   | 13 ++++++-
 3 files changed, 41 insertions(+), 14 deletions(-)

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 63539bc1089..71a2e68dd36 100644
--- a/addons/web/static/src/views/fields/phone/phone_field.js
+++ b/addons/web/static/src/views/fields/phone/phone_field.js
@@ -28,4 +28,8 @@ PhoneField.extractProps = ({ attrs }) => {
     };
 };
 
+class FormPhoneField extends PhoneField {}
+FormPhoneField.template = "web.FormPhoneField";
+
 registry.category("fields").add("phone", PhoneField);
+registry.category("fields").add("form.phone", FormPhoneField);
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 ac5c1dd15c4..2d28ca010b6 100644
--- a/addons/web/static/src/views/fields/phone/phone_field.xml
+++ b/addons/web/static/src/views/fields/phone/phone_field.xml
@@ -2,18 +2,32 @@
 <templates xml:space="preserve">
 
     <t t-name="web.PhoneField" owl="1">
-        <t t-if="props.readonly">
-            <a t-if="props.value" class="o_form_uri o_phone_link" t-att-href="'tel:'+props.value" t-esc="props.value"/>
-        </t>
-        <t t-else="">
-            <input
-                class="o_input"
-                t-att-id="props.id"
-                type="tel"
-                t-att-placeholder="props.placeholder"
-                t-ref="input"
-            />
-        </t>
+        <div class="o_phone_content d-inline-flex w-100">
+            <t t-if="props.readonly">
+                <a t-if="props.value" class="o_form_uri" t-att-href="'tel:'+props.value" t-esc="props.value"/>
+            </t>
+            <t t-else="">
+                <input
+                    class="o_input"
+                    t-att-id="props.id"
+                    type="tel"
+                    t-att-placeholder="props.placeholder"
+                    t-ref="input"
+                />
+            </t>
+        </div>
+    </t>
+
+    <t t-name="web.FormPhoneField" t-inherit="web.PhoneField" t-inherit-mode="primary">
+        <xpath expr="//div[hasclass('o_phone_content')]//input" position="after">
+            <a
+                t-if="props.value"
+                t-att-href="'tel:'+props.value"
+                class="ms-3 d-inline-flex align-items-center"
+            >
+                <i class="fa fa-phone"></i><small class="fw-bold ms-1">Call</small>
+            </a>
+        </xpath>
     </t>
 
 </templates>
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 db2316e2843..b791c2b7b28 100644
--- a/addons/web/static/tests/views/fields/phone_field_tests.js
+++ b/addons/web/static/tests/views/fields/phone_field_tests.js
@@ -85,6 +85,15 @@ QUnit.module("Fields", (hooks) => {
             "input should contain field value in edit mode"
         );
 
+        const phoneLink = target.querySelector(".o_field_phone a");
+        assert.containsOnce(
+            target,
+            phoneLink,
+            "should have rendered the phone number as a link with correct classes"
+        );
+        assert.strictEqual(phoneLink.textContent, "Call", "link is shown with the right text");
+        assert.hasAttrValue(phoneLink, "href", "tel:yop", "should have proper tel prefix");
+
         // change value in edit mode
         await editInput(target, "input[type='tel']", "new");
 
@@ -114,7 +123,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsN(
             target,
-            ".o_field_widget a.o_form_uri.o_phone_link",
+            ".o_field_widget a.o_form_uri",
             2,
             "should have the correct classnames"
         );
@@ -145,7 +154,7 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.containsN(
             target,
-            ".o_field_widget a.o_form_uri.o_phone_link",
+            ".o_field_widget a.o_form_uri",
             2,
             "should still have links with correct classes"
         );