[FIX] website_sale, *: display error message in "Extra Info" step

*: google_recaptcha, website_form

Issue

        - Install 'Ecommerce' module
        - In settings, fill the "reCAPTCHA: Easy on Humans, Hard
          on Bots" option with random wrong site key and secret key
        - Open your ecommerce (go to /shop )
        - Add any product to cart and and open cart
        - Activate "Customize -> Extra Step Option"
        - Process to "Extra Info" step
        - Click on next

        Stuck at this step since next button does not react.

Cause

        There is an error due to re-captcha feature that
        does not allowed to go to next step.

        The second issue is that the error is not displayed
        because missing message area in form.

Solution

        Do not check recaptcha if 's_website_form_no_recaptcha' class
        present in form.
        Add span 's_website_form_result' to display error messages.
        Replace 'public' by 'site' in error message to fit google
        'field' name.

opw-2456098

closes odoo/odoo#66382

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

4 files changed, 14 insertions, 10 deletions

diff --git a/addons/google_recaptcha/i18n/google_recaptcha.pot b/addons/google_recaptcha/i18n/google_recaptcha.pot
index 027b6212b32..aa847ff8a13 100644
--- a/addons/google_recaptcha/i18n/google_recaptcha.pot
+++ b/addons/google_recaptcha/i18n/google_recaptcha.pot
@@ -59,7 +59,7 @@ msgstr ""
 #. openerp-web
 #: code:addons/google_recaptcha/static/src/js/recaptcha.js:0
 #, python-format
-msgid "No recaptcha public key set."
+msgid "No recaptcha site key set."
 msgstr ""
 
 #. module: google_recaptcha
@@ -114,7 +114,7 @@ msgstr ""
 #. openerp-web
 #: code:addons/google_recaptcha/static/src/js/recaptcha.js:0
 #, python-format
-msgid "The recaptcha public key is invalid."
+msgid "The recaptcha site key is invalid."
 msgstr ""
 
 #. module: google_recaptcha
diff --git a/addons/google_recaptcha/static/src/js/recaptcha.js b/addons/google_recaptcha/static/src/js/recaptcha.js
index 9bab4e7827a..b4ae76fd150 100644
--- a/addons/google_recaptcha/static/src/js/recaptcha.js
+++ b/addons/google_recaptcha/static/src/js/recaptcha.js
@@ -38,7 +38,7 @@ const ReCaptcha = Class.extend({
     getToken: async function (action) {
         if (!this._publicKey) {
             return {
-                message: _t("No recaptcha public key set."),
+                message: _t("No recaptcha site key set."),
             };
         }
         await this._recaptchaReady;
@@ -48,7 +48,7 @@ const ReCaptcha = Class.extend({
             };
         } catch (e) {
             return {
-                error: _t("The recaptcha public key is invalid."),
+                error: _t("The recaptcha site key is invalid."),
             };
         }
     },
diff --git a/addons/website_form/static/src/snippets/s_website_form/000.js b/addons/website_form/static/src/snippets/s_website_form/000.js
index 3cb891a3069..ef45f11fc97 100644
--- a/addons/website_form/static/src/snippets/s_website_form/000.js
+++ b/addons/website_form/static/src/snippets/s_website_form/000.js
@@ -155,13 +155,16 @@ odoo.define('website_form.s_website_form', function (require) {
                 form_values[$(this).find('input').attr('name')] = date.format(format);
             });
 
-            const tokenObj = await this._recaptcha.getToken('website_form');
-            if (tokenObj.token) {
-                form_values['recaptcha_token_response'] = tokenObj.token;
-            } else if (tokenObj.error) {
-                self.update_status('error', tokenObj.error);
-                return false;
+            if (!this.$target[0].classList.contains('s_website_form_no_recaptcha')) {
+                const tokenObj = await this._recaptcha.getToken('website_form');
+                if (tokenObj.token) {
+                    form_values['recaptcha_token_response'] = tokenObj.token;
+                } else if (tokenObj.error) {
+                    self.update_status('error', tokenObj.error);
+                    return false;
+                }
             }
+
             // Post form and handle result
             ajax.post(this.$target.attr('action') + (this.$target.data('force_action') || this.$target.data('model_name')), form_values)
             .then(function (result_data) {
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 18ba09a832d..e7e671c88b0 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -925,6 +925,7 @@
                                                 <div style="width: 200px;" class="s_website_form_label"/>
                                                 <a role="button" href="/shop/checkout" class="btn btn-secondary float-left"><span class="fa fa-chevron-left"/> Previous</a>
                                                 <a role="button" class="btn btn-primary float-right s_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
+                                                <span id="s_website_form_result"></span>
                                             </div>
                                         </div>
                                     </form>