[IMP] website_form, *: entirely review s_website_form snippet

*: web_editor, website_crm, website_form_project,
website_hr_recruitment, website_sale

The form builder is now using the left panel option system. Many new
options are introduced to build better forms more quickly.

The tests are now running with the new website_form implementation.

Part of: https://github.com/odoo/odoo/pull/42189
task-2092425

closes odoo/odoo#42189

Related: odoo/enterprise#7365
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

4 files changed, 106 insertions, 104 deletions

diff --git a/addons/website_crm/static/src/js/website_crm_editor.js b/addons/website_crm/static/src/js/website_crm_editor.js
index 44762e58c38..a0492d0eee5 100644
--- a/addons/website_crm/static/src/js/website_crm_editor.js
+++ b/addons/website_crm/static/src/js/website_crm_editor.js
@@ -7,8 +7,36 @@ var FormEditorRegistry = require('website_form.form_editor_registry');
 var _t = core._t;
 
 FormEditorRegistry.add('create_lead', {
-    defaultTemplateName: 'website_crm.default_crm_form',
-    defaultTemplatePath: '/website_crm/static/src/xml/website_crm.xml',
+    formFields: [{
+        type: 'char',
+        required: true,
+        name: 'contact_name',
+        string: 'Your Name',
+    }, {
+        type: 'char',
+        name: 'phone',
+        string: 'Phone Number',
+    }, {
+        type: 'email',
+        required: true,
+        name: 'email_from',
+        string: 'Your Email',
+    }, {
+        type: 'char',
+        required: true,
+        name: 'partner_name',
+        string: 'Your Company',
+    }, {
+        type: 'char',
+        modelRequired: true,
+        name: 'name',
+        string: 'Subject',
+    }, {
+        type: 'text',
+        required: true,
+        name: 'description',
+        string: 'Your Question',
+    }],
     fields: [{
         name: 'team_id',
         type: 'many2one',
diff --git a/addons/website_crm/static/src/xml/website_crm.xml b/addons/website_crm/static/src/xml/website_crm.xml
deleted file mode 100644
index 71356a5176f..00000000000
--- a/addons/website_crm/static/src/xml/website_crm.xml
+++ /dev/null
@@ -1,55 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates>
-
-    <t t-name="website_crm.default_crm_form">
-        <div class="form-group row form-field o_website_form_required_custom">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="contact_name">Your Name</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <input type="text" class="form-control o_website_form_input" name="contact_name" required=""/>
-            </div>
-        </div>
-        <div class="form-group row form-field">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="phone">Phone Number</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <input type="text" class="form-control o_website_form_input" name="phone" />
-            </div>
-        </div>
-        <div class="form-group row form-field o_website_form_required_custom">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="email_from">Email</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <input type="text" class="form-control o_website_form_input" name="email_from" required="" />
-            </div>
-        </div>
-        <div class="form-group row form-field o_website_form_required_custom">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="partner_name">Your Company</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <input type="text" class="form-control o_website_form_input" name="partner_name" required="" />
-            </div>
-        </div>
-        <div class="form-group row form-field o_website_form_required">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="name">Subject</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <input type="text" class="form-control o_website_form_input" name="name" required="" />
-            </div>
-        </div>
-        <div class="form-group row form-field o_website_form_required_custom">
-            <div class="col-lg-3 col-md-4">
-                <label class="col-form-label" for="description">Your Question</label>
-            </div>
-            <div class="col-lg-7 col-md-8">
-                <textarea class="form-control o_website_form_input" name="description" required=""></textarea>
-            </div>
-        </div>
-    </t>
-
-</templates>
diff --git a/addons/website_crm/static/tests/tours/website_crm.js b/addons/website_crm/static/tests/tours/website_crm.js
index 2923cb1ab50..9b615a56f8f 100644
--- a/addons/website_crm/static/tests/tours/website_crm.js
+++ b/addons/website_crm/static/tests/tours/website_crm.js
@@ -32,7 +32,7 @@ odoo.define('website_crm.tour', function(require) {
         run: "text ### TOUR DATA ###"
     }, {
         content: "Send the form",
-        trigger: ".o_website_form_send"
+        trigger: ".s_website_form_send"
     }, {
         content: "Check we were redirected to the success page",
         trigger: "#wrap:has(h1:contains('Thanks')):has(div.alert-success)"
diff --git a/addons/website_crm/views/website_crm_templates.xml b/addons/website_crm/views/website_crm_templates.xml
index a62eae17c89..2366a67a114 100644
--- a/addons/website_crm/views/website_crm_templates.xml
+++ b/addons/website_crm/views/website_crm_templates.xml
@@ -1,53 +1,82 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
         <template id="contactus_form" name="Contact Form (Opportunity)" inherit_id="website_form.contactus_form" customize_show="True">
-            <xpath expr="//form[@id='contactus_form']" position="replace">
-                <div t-ignore="true">
-                    <form action="/website_form/" method="post" data-model_name="crm.lead" data-success_page="/contactus-thank-you" class="s_website_form container-fluid mt32" enctype="multipart/form-data" data-editable-form="false">
-                        <div class="form-group row form-field o_website_form_required_custom">
-                            <label class="col-lg-3 col-md-4 col-form-label" for="contact_name">Your Name</label>
-                            <div class="col-lg-7 col-md-8">
-                                <input type="text" class="form-control o_website_form_input" name="contact_name" t-att-value="request.params.get('contact_name', '')" required=""/>
-                            </div>
-                        </div>
-                        <div class="form-group row form-field">
-                            <label class="col-lg-3 col-md-4 col-form-label" for="phone">Phone Number</label>
-                            <div class="col-lg-7 col-md-8">
-                                <input type="text" class="form-control o_website_form_input" name="phone" t-att-value="request.params.get('phone', '')" />
-                            </div>
-                        </div>
-                        <div class="form-group row form-field o_website_form_required_custom">
-                            <label class="col-lg-3 col-md-4 col-form-label" for="email_from">Email</label>
-                            <div class="col-lg-7 col-md-8">
-                                <input type="text" class="form-control o_website_form_input" name="email_from" required="" t-att-value="request.params.get('email_from', '')" />
-                            </div>
-                        </div>
-                        <div class="form-group row form-field">
-                            <label class="col-lg-3 col-md-4 col-form-label" for="partner_name">Your Company</label>
-                            <div class="col-lg-7 col-md-8">
-                                <input type="text" class="form-control o_website_form_input" name="partner_name" t-att-value="request.params.get('partner_name', '')" />
-                            </div>
-                        </div>
-                        <div class="form-group row form-field o_website_form_required">
-                            <label class="col-lg-3 col-md-4 col-form-label" for="name">Subject</label>
-                            <div class="col-lg-7 col-md-8">
-                                <input type="text" class="form-control o_website_form_input" name="name" required="" t-att-value="request.params.get('name', '')" />
-                            </div>
-                        </div>
-                        <div class="form-group row form-field o_website_form_required_custom">
-                            <label class="col-lg-3 col-md-4 col-form-label" for="description">Your Question</label>
-                            <div class="col-lg-7 col-md-8">
-                                <textarea class="form-control o_website_form_input" name="description" required=""><t t-esc="request.params.get('description', '')"/></textarea>
-                            </div>
-                        </div>
-                        <div class="form-group row">
-                            <div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7">
-                                <a href="#" role="button" class="btn btn-primary btn-lg o_website_form_send">Send</a>
-                                <span id="o_website_form_result"></span>
+            <xpath expr="//span[@data-for='contactus_form']" position="attributes">
+                <attribute name="t-att-data-values">{
+                    'contact_name': request.params.get('contact_name', ''),
+                    'phone': request.params.get('phone', ''),
+                    'email_from': request.params.get('email_from', ''),
+                    'partner_name': request.params.get('partner_name', ''),
+                    'name': request.params.get('name', ''),
+                    'description': request.params.get('description', ''),
+                }</attribute>
+            </xpath>
+            <xpath expr="//section[@id='contactus_section']" position="replace">
+                <section class="s_website_form" data-vcss="001">
+                    <div class="container">
+                        <form id="contactus_form" action="/website_form/" method="post" enctype="multipart/form-data" data-model_name="crm.lead" data-success-mode="redirect" data-success-page="/contactus-thank-you" class="o_mark_required" data-mark="*" data-editable-form="false">
+                            <div class="s_website_form_rows row s_col_no_bgcolor">
+                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity1">Your Name<span class="s_website_form_mark"> *</span></label>
+                                        <div class="col-sm">
+                                            <input id="opportunity1" type="text" class="form-control s_website_form_input" name="contact_name" required=""/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field" data-type="char">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity2">Phone Number</label>
+                                        <div class="col-sm">
+                                            <input id="opportunity2" type="text" class="form-control s_website_form_input" name="phone" />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity3">Email<span class="s_website_form_mark"> *</span></label>
+                                        <div class="col-sm">
+                                            <input id="opportunity3" type="text" class="form-control s_website_form_input" name="email_from" required="" />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field" data-type="char">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity4">Your Company</label>
+                                        <div class="col-sm">
+                                            <input id="opportunity4" type="text" class="form-control s_website_form_input" name="partner_name" />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field s_website_form_model_required" data-type="char">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity5">Subject</label>
+                                        <div class="col-sm">
+                                            <input id="opportunity5" type="text" class="form-control s_website_form_input" name="name" required="" />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="text">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity6">Your Question<span class="s_website_form_mark"> *</span></label>
+                                        <div class="col-sm">
+                                            <textarea id="opportunity6" class="form-control s_website_form_input" name="description" required=""></textarea>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group col-12 s_website_form_submit">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
+                                        <div class="col-sm">
+                                            <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
+                                            <span id="s_website_form_result"></span>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                    </form>
-                </div>
+                        </form>
+                    </div>
+                </section>
 			</xpath>
 		</template>