[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>

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

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."),
             };
         }
     },

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) {

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>