[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

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
@@ -521,6 +546,15 @@ var NameAndSignature = Widget.extend({
         this.$loadFile.find('input').click();
         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.

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 {

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>

addons/sale/static/src/js/sale_tour_sale_signature.js

@@ -19,10 +19,20 @@ tour.register('sale_signature', {
         content: "click sign",
         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",