[IMP] sms: improve SMS widget

Related to task 1922163
Linked to PR #33510

Co-Authored-By: Thibault Delavallee <tde@odoo.com>
Co-Authored-By: Pierre Rousseau <pro@odoo.com>

6 files changed, 140 insertions, 46 deletions

diff --git a/addons/sms/static/src/js/fields_phone_widget.js b/addons/sms/static/src/js/fields_phone_widget.js
new file mode 100644
index 00000000000..f02d9b8625a
--- /dev/null
+++ b/addons/sms/static/src/js/fields_phone_widget.js
@@ -0,0 +1,70 @@
+odoo.define('sms.fields', function (require) {
+"use strict";
+
+var basic_fields = require('web.basic_fields');
+var core = require('web.core');
+var session = require('web.session');
+
+var _t = core._t;
+
+/**
+ * Override of FieldPhone to use add a button calling SMS composer if option activated
+ */
+
+var Phone = basic_fields.FieldPhone;
+Phone.include({
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Open SMS composer wizard
+     *
+     * @private
+     */
+    _onClickSMS: function (ev) {
+        ev.preventDefault();
+
+        var context = session.user_context;
+        context = _.extend({}, context, {
+            default_res_model: this.model,
+            default_res_id: parseInt(this.res_id),
+            default_number_field_name: this.name,
+            default_composition_mode: 'comment',
+        });
+
+        return this.do_action({
+            title: _t('Send SMS Text Message'),
+            type: 'ir.actions.act_window',
+            res_model: 'sms.composer',
+            target: 'new',
+            views: [[false, 'form']],
+            context: context,
+        });
+    },
+
+    /**
+     * Add a button to call the composer wizard
+     *
+     * @override
+     * @private
+     */
+    _renderReadonly: function () {
+        var def = this._super.apply(this, arguments);
+        if (this.nodeOptions.enable_sms) {
+            var $composerButton = $('<a>', {
+                title: _t('Send SMS Text Message'),
+                href: '',
+                class: 'btn-sm btn-link mb4 fa fa-comment o_field_phone_sms',
+            });
+            $composerButton.on('click', this._onClickSMS.bind(this));
+            this.$el = $('<div/>').append(this.$el).append($composerButton);
+        }
+
+        return def;
+    },
+});
+
+return Phone;
+
+});
diff --git a/addons/sms/static/src/js/sms_widget.js b/addons/sms/static/src/js/fields_sms_widget.js
index cbb0dda05b9..e9dbf8e7cc7 100644
--- a/addons/sms/static/src/js/sms_widget.js
+++ b/addons/sms/static/src/js/fields_sms_widget.js
@@ -4,21 +4,17 @@ odoo.define('sms.sms_widget', function (require) {
 var basicFields = require('web.basic_fields');
 var core = require('web.core');
 var fieldRegistry = require('web.field_registry');
-var dom = require('web.dom');
-var framework = require('web.framework');
-
 
 var FieldText = basicFields.FieldText;
-var InputField = basicFields.InputField;
-var QWeb = core.qweb;
 
-var _t = core._t
+var _t = core._t;
 /**
  * SmsWidget is a widget to display a textarea (the body) and a text representing
  * the number of SMS and the number of characters. This text is computed every
  * time the user changes the body.
  */
-var SmsWidget = InputField.extend({
+var SmsWidget = FieldText.extend({
+    className: 'o_field_text',
     /**
      * @constructor
      */
@@ -26,12 +22,31 @@ var SmsWidget = InputField.extend({
         this._super.apply(this, arguments);
         this.nbrChar = 0;
         this.nbrSMS = 0;
-        this.encoding = "GSM7";
-        this.tagName = 'div';
+        this.encoding = 'GSM7';
+    },
+
+    //--------------------------------------------------------------------------
+    // Private: override widget
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @override
+     */
+    _renderEdit: function () {
+        var def = this._super.apply(this, arguments);
+
+        this._compute();
+        var $sms_container = $('<div class="o_sms_container"/>');
+        $sms_container.append(this._renderSMSInfo());
+        $sms_container.append(this._renderIAPButton());
+        this.$el = this.$el.add($sms_container);
+
+        return def;
     },
 
     //--------------------------------------------------------------------------
-    // Private
+    // Private: SMS
     //--------------------------------------------------------------------------
 
     /**
@@ -44,8 +59,8 @@ var SmsWidget = InputField.extend({
         this.nbrChar = content.length;
         this.nbrChar += (content.match(/\n/g) || []).length;
         this.nbrSMS = this._countSMS(this.nbrChar, this.encoding);
-        this._renderSMS();
     },
+
     /**
      * Count the number of SMS of the content
      * @private
@@ -66,16 +81,7 @@ var SmsWidget = InputField.extend({
         }
         return Math.ceil(this.nbrChar / 153);
     },
-    /**
-     * @private
-     * @override
-     */
-    _renderEdit: function () {
-        this.$el.empty();
-        this._prepareInput($('<textarea/>')).appendTo(this.$el);
-        this.$el.append($(QWeb.render("sms.sms_count", {})));
-        this._compute();
-    },
+
     /**
      * Extract the encoding depending on the characters in the content
      * @private
@@ -88,17 +94,47 @@ var SmsWidget = InputField.extend({
         }
         return 'UNICODE';
     },
+
+    /**
+     * Render the IAP button to redirect to IAP pricing
+     * @private
+     */
+    _renderIAPButton: function () {
+        return $('<a>', {
+            'href': 'https://iap-services.odoo.com/iap/sms/pricing',
+            'target': '_blank',
+            'title': _t('SMS Pricing'),
+            'aria-label': _t('SMS Pricing'),
+            'class': 'fa fa-lg fa-info-circle',
+        });
+    },
+
     /**
      * Render the number of characters, sms and the encoding.
      * @private
      */
-    _renderSMS: function () {
-        this.$('.o_sms_count').text(_.str.sprintf(_t('%s chars, fits in %s SMS (%s) '), this.nbrChar, this.nbrSMS, this.encoding));
+    _renderSMSInfo: function () {
+        var string = _.str.sprintf(_t('%s chars, fits in %s SMS (%s) '), this.nbrChar, this.nbrSMS, this.encoding);
+        var $span = $('<span>', {
+            'class': 'text-muted o_sms_count',
+        });
+        $span.text(string);
+        return $span;
+    },
+
+    /**
+     * Update widget SMS information with re-computed info about length, ...
+     * @private
+     */
+    _updateSMSInfo: function ()  {
+        this._compute();
+        var string = _.str.sprintf(_t('%s chars, fits in %s SMS (%s) '), this.nbrChar, this.nbrSMS, this.encoding);
+        this.$('.o_sms_count').text(string);
     },
 
     //--------------------------------------------------------------------------
     // Handlers
-    //--------------------------------------------------------------------------   
+    //--------------------------------------------------------------------------
 
     /**
      * @override
@@ -106,15 +142,16 @@ var SmsWidget = InputField.extend({
      */
     _onChange: function () {
         this._super.apply(this, arguments);
-        this._compute();
+        this._updateSMSInfo();
     },
+
     /**
      * @override
      * @private
      */
     _onInput: function () {
         this._super.apply(this, arguments);
-        this._compute();
+        this._updateSMSInfo();
     },
 });
 
diff --git a/addons/sms/static/src/tests/sms_widget_test.js b/addons/sms/static/tests/sms_widget_test.js
index 2f9d27777ff..2f9d27777ff 100644
--- a/addons/sms/static/src/tests/sms_widget_test.js
+++ b/addons/sms/static/tests/sms_widget_test.js
diff --git a/addons/sms/views/assets.xml b/addons/sms/views/assets.xml
index 15bf5fc1454..b3fdf38d74a 100644
--- a/addons/sms/views/assets.xml
+++ b/addons/sms/views/assets.xml
@@ -3,7 +3,8 @@
     <data>
         <template id="assets_backend" name="sms_assets" inherit_id="web.assets_backend">
             <xpath expr="." position="inside">
-                <script type="text/javascript" src="/sms/static/src/js/sms_widget.js"></script>
+                <script type="text/javascript" src="/sms/static/src/js/fields_phone_widget.js"></script>
+                <script type="text/javascript" src="/sms/static/src/js/fields_sms_widget.js"></script>
             </xpath>
         </template>
 
diff --git a/addons/sms/views/res_partner_views.xml b/addons/sms/views/res_partner_views.xml
index e841fad4005..a6dd9823446 100644
--- a/addons/sms/views/res_partner_views.xml
+++ b/addons/sms/views/res_partner_views.xml
@@ -11,29 +11,13 @@
             <xpath expr="//field[@name='phone']" position="replace">
                 <label for="phone"/>
                 <div class="o_row">
-                    <field name="phone" widget="phone"/>
-                    <button
-                        type="action"
-                        name="%(sms.sms_composer_action_form)d"
-                        class="btn-sm btn-link mb4 fa fa-comment"
-                        aria-label="Send SMS Text Message"
-                        title="Send SMS Text Message"
-                        attrs="{'invisible':[('phone', '=', False)]}"
-                        context="{'default_partner_field_name': 'phone'}" />
+                    <field name="phone" widget="phone" options="{'enable_sms': True}"/>
                 </div>
             </xpath>
             <xpath expr="//field[@name='mobile']" position="replace">
                 <label for="mobile"/>
                 <div class="o_row">
-                    <field name="mobile" widget="phone"/>
-                    <button
-                        type="action"
-                        name="%(sms.sms_composer_action_form)d"
-                        class="btn-sm btn-link mb4 fa fa-envelope-o"
-                        aria-label="Send SMS Text Message"
-                        title="Send SMS Text Message"
-                        attrs="{'invisible':[('mobile', '=', False)]}"
-                        context="{'default_partner_field_name': 'mobile'}" />
+                    <field name="mobile" widget="phone" options="{'enable_sms': True}"/>
                 </div>
             </xpath>
         </field>
diff --git a/addons/sms/views/sms_template_views.xml b/addons/sms/views/sms_template_views.xml
index 07d752f31b6..0e81c7411dc 100644
--- a/addons/sms/views/sms_template_views.xml
+++ b/addons/sms/views/sms_template_views.xml
@@ -17,7 +17,9 @@
                     </div>
                     <notebook>
                         <page string="Content">
-                            <field name="body" widget="sms_widget"/>
+                            <group>
+                                <field name="body" widget="sms_widget" nolabel="1"/>
+                            </group>
                         </page>
                         <page string="Dynamic Placeholder Generator" groups="base.group_no_one">
                             <group>