From b154fe1591f4fbb7340931bcc0d2ec47c1f6e3c6 Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Tue, 9 May 2023 07:50:48 +0000
Subject: [PATCH] [IMP] website: make required fields more obvious

When a user puts a form on his site, depending on the action of it, some
fields of the form become necessary. These fields cannot be deleted.
Unfortunately, some users do not understand this. This commit helps
users understand that these fields are required for the action by adding
an alert in the required fields options and by improving the tooltip
displayed when the delete button is hovered.

task-3302433

Part-of: odoo/odoo#120874
---
 .../src/snippets/s_website_form/options.js    | 26 +++++++++++++++++--
 .../website/views/snippets/s_website_form.xml |  9 ++++---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/addons/website/static/src/snippets/s_website_form/options.js b/addons/website/static/src/snippets/s_website_form/options.js
index de3decfe3e2..23d2330d62d 100644
--- a/addons/website/static/src/snippets/s_website_form/options.js
+++ b/addons/website/static/src/snippets/s_website_form/options.js
@@ -12,6 +12,7 @@ import { unique } from "@web/core/utils/arrays";
 
 const qweb = core.qweb;
 const _t = core._t;
+let currentActionName;
 
 const FormEditor = options.Class.extend({
     //----------------------------------------------------------------------
@@ -335,6 +336,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
         
         const targetModelName = this.$target[0].dataset.model_name || 'mail.mail';
         this.activeForm = this.models.find(m => m.model === targetModelName);
+        currentActionName = this.activeForm.website_form_label;
         // Create the Form Action select
         this.selectActionEl = document.createElement('we-select');
         this.selectActionEl.setAttribute('string', 'Action');
@@ -734,6 +736,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
             }
             this.$target.find('.s_website_form_field').remove();
             this.activeForm = this.models.find(model => model.id === modelId);
+            currentActionName = this.activeForm.website_form_label;
         }
         const formKey = this.activeForm.website_form_key;
         const formInfo = FormEditorRegistry.get(formKey);
@@ -1536,9 +1539,28 @@ options.registry.WebsiteFormFieldModel = DisableOverlayButtonOption.extend({
 // Disable delete button for model required fields
 options.registry.WebsiteFormFieldRequired = DisableOverlayButtonOption.extend({
     start: function () {
-        this.disableButton('remove', _t('This field is mandatory for this Action. You cannot remove it.'));
+        this.disableButton("remove", _t(
+            "This field is mandatory for this action. You cannot remove it. Try hiding it with the"
+            + " 'Visibility' option instead and add it a default value."
+        ));
         return this._super.apply(this, arguments);
-    }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _renderCustomXML(uiFragment) {
+        const fieldName = this.$target[0]
+            .querySelector("input.s_website_form_input").getAttribute("name");
+        const spanEl = document.createElement("span");
+        spanEl.innerText = sprintf(_t(
+            "The field '%s' is mandatory for the action '%s'."), fieldName, currentActionName);
+        uiFragment.querySelector("we-alert").appendChild(spanEl);
+    },
 });
 
 // Disable delete and duplicate button for submit
diff --git a/addons/website/views/snippets/s_website_form.xml b/addons/website/views/snippets/s_website_form.xml
index a3dc44b249f..46c4b93f3fe 100644
--- a/addons/website/views/snippets/s_website_form.xml
+++ b/addons/website/views/snippets/s_website_form.xml
@@ -67,6 +67,12 @@
         </div>
 
         <!-- Field -->
+        <div data-js="WebsiteFormFieldRequired" data-selector=".s_website_form .s_website_form_model_required">
+            <!-- Disable the delete option of model required fields and show
+            alert and tooltip on delete buttons -->
+            <we-alert class="mt-2"></we-alert>
+        </div>
+
         <div data-js='WebsiteFieldEditor' data-selector=".s_website_form_field"
              data-exclude=".s_website_form_dnone" data-drop-near=".s_website_form_field">
             <we-select data-name="type_opt" string="Type" data-no-preview="true">
@@ -227,9 +233,6 @@
         <!-- Remove the duplicate option of model fields -->
         <div data-js="WebsiteFormFieldModel" data-selector=".s_website_form .s_website_form_field:not(.s_website_form_custom)"/>
 
-        <!-- Remove the delete option of model required fields -->
-        <div data-js="WebsiteFormFieldRequired" data-selector=".s_website_form .s_website_form_model_required"/>
-
         <!-- Remove the delete and duplicate option of the submit button -->
         <div data-js="WebsiteFormSubmitRequired" data-selector=".s_website_form .s_website_form_submit"/>
     </xpath>