[IMP] portal,sale: toggle sign button depending on signature state

Before this commit, it was possible for the user to click on the Sign button
even when the signature area was empty, which would lead to an error message.
Now we disable the button when the area is empty.

Related to enterprise PR: https://github.com/odoo/enterprise/pull/3535

PR: #30653

4 files changed, 59 insertions, 3 deletions

diff --git a/addons/portal/static/src/js/portal_name_and_signature.js b/addons/portal/static/src/js/portal_name_and_signature.js
index 20ce8d5ae22..18e5a6ee2a8 100644
--- a/addons/portal/static/src/js/portal_name_and_signature.js
+++ b/addons/portal/static/src/js/portal_name_and_signature.js
@@ -19,6 +19,7 @@ var NameAndSignature = Widget.extend({
         'input .o_portal_sign_name_input': '_onInputSignName',
         // signature
         'click .o_portal_sign_signature': '_onClickSignature',
+        'change .o_portal_sign_signature': '_onChangeSignature',
         // draw
         'click .o_portal_sign_draw_button': '_onClickSignDrawButton',
         'click .o_portal_sign_draw_clear a': '_onClickSignDrawClear',
@@ -180,7 +181,7 @@ var NameAndSignature = Widget.extend({
      */
     isSignatureEmpty: function () {
         var signature = this.$signatureField.jSignature('getData');
-        return signature ? this.emptySignature === signature : true;
+        return signature && this.emptySignature ? this.emptySignature === signature : true;
     },
     /**
      * (Re)initializes the signature area:
@@ -390,6 +391,7 @@ var NameAndSignature = Widget.extend({
                     height
                 );
                 _.extend(context, ignoredContext);
+                self.trigger_up('signature_changed');
             }, 0);
         };
         image.src = imgSrc;
@@ -432,6 +434,29 @@ var NameAndSignature = Widget.extend({
             }
         }, 0);
     },
+    /**
+     * Waits for the signature to be not empty and triggers up the event
+     * `signature_changed`.
+     * This is necessary because some methods of jSignature are async but
+     * they don't return a promise and don't trigger any event.
+     *
+     * @private
+     * @param {Deferred} [def=Deferred] - Deferred that will be returned by
+     *  the method and resolved when the signature is not empty anymore.
+     * @returns {Deferred}
+     */
+    _waitForSignatureNotEmpty: function (def) {
+        def = def || $.Deferred();
+        if (!this.isSignatureEmpty()) {
+            this.trigger_up('signature_changed');
+            def.resolve();
+        } else {
+            // Use the existing def to prevent the method from creating a new
+            // one at every loop.
+            setTimeout(this._waitForSignatureNotEmpty.bind(this, def), 10);
+        }
+        return def;
+    },
 
     //----------------------------------------------------------------------
     // Handlers
@@ -522,6 +547,15 @@ var NameAndSignature = Widget.extend({
         this.setMode('load');
     },
     /**
+     * Triggers up the signature change event.
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeSignature: function (ev) {
+        this.trigger_up('signature_changed');
+    },
+    /**
      * Handles change on load file input: displays the loaded image if the
      * format is correct, or diplays an error otherwise.
      *
diff --git a/addons/portal/static/src/js/portal_signature.js b/addons/portal/static/src/js/portal_signature.js
index f2741c7d741..f9a83caa224 100644
--- a/addons/portal/static/src/js/portal_signature.js
+++ b/addons/portal/static/src/js/portal_signature.js
@@ -20,6 +20,9 @@ odoo.define('portal.signature_form', function (require) {
         events: {
             'click .o_portal_sign_submit': '_onClickSignSubmit',
         },
+        custom_events: {
+            'signature_changed': '_onChangeSignature',
+        },
 
         /**
          * Overridden to allow options.
@@ -134,6 +137,15 @@ odoo.define('portal.signature_form', function (require) {
                 }
             });
         },
+        /**
+         * Toggles the submit button depending on the signature state.
+         *
+         * @private
+         */
+        _onChangeSignature: function () {
+            var isEmpty = this.nameAndSignature.isSignatureEmpty();
+            this.$confirm_btn.prop('disabled', isEmpty);
+        },
     });
 
     return {
diff --git a/addons/portal/static/src/xml/portal_signature.xml b/addons/portal/static/src/xml/portal_signature.xml
index 9904ce88407..57fd067b4a9 100644
--- a/addons/portal/static/src/xml/portal_signature.xml
+++ b/addons/portal/static/src/xml/portal_signature.xml
@@ -7,7 +7,7 @@
             <div class="o_portal_sign_name_and_signature"/>
             <div class="o_portal_sign_controls my-3">
                 <div class="text-center my-3">
-                    <button type="submit" class="o_portal_sign_submit btn btn-primary">
+                    <button type="submit" class="o_portal_sign_submit btn btn-primary" disabled="disabled">
                         <i class="fa fa-check"/>
                         <t t-esc="widget.sendLabel"/>
                     </button>
diff --git a/addons/sale/static/src/js/sale_tour_sale_signature.js b/addons/sale/static/src/js/sale_tour_sale_signature.js
index ffbdd849ffb..f45bf2d22e7 100644
--- a/addons/sale/static/src/js/sale_tour_sale_signature.js
+++ b/addons/sale/static/src/js/sale_tour_sale_signature.js
@@ -20,10 +20,20 @@ tour.register('sale_signature', {
         trigger: 'a:contains("Sign")',
     },
     {
+        content: "check submit is disabled",
+        trigger: '.o_portal_sign_submit:disabled',
+        run: function () {},
+    },
+    {
         content: "click Auto",
         trigger: '.o_portal_sign_auto_button',
     },
     {
+        content: "check submit is enabled",
+        trigger: '.o_portal_sign_submit:enabled',
+        run: function () {},
+    },
+    {
         content: "click select style",
         trigger: '.o_portal_sign_auto_select_style a',
     },
@@ -33,7 +43,7 @@ tour.register('sale_signature', {
     },
     {
         content: "click submit",
-        trigger: '.o_portal_sign_submit',
+        trigger: '.o_portal_sign_submit:enabled',
     },
     {
         content: "check it's confirmed",