[IMP] website: update default theme tour

The goal of this commit is to update the default theme
tour (steps, changes on snippets...) as in other themes tours.

The url was changed in "registerThemeHomepageTour" function since
the homepage tours are supposed to start in edit mode.

task-2375011

closes odoo/odoo#61733

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

addons/website/static/src/js/tours/homepage.js

 odoo.define("website.tour.homepage", function (require) {
 "use strict";
 
-var core = require("web.core");
-var tour = require("web_tour.tour");
 const wTourUtils = require("website.tour_utils");
 
-var _t = core._t;
+const snippets = [
+    {
+        id: 's_cover',
+        name: 'Cover',
+    },
+    {
+        id: 's_text_image',
+        name: 'Text - Image',
+    },
+    {
+        id: 's_three_columns',
+        name: 'Columns',
+    },
+    {
+        id: 's_picture',
+        name: 'Picture',
+    },
+    {
+        id: 's_quotes_carousel',
+        name: 'Quotes',
+    },
+    {
+        id: 's_call_to_action',
+        name: 'Call to Action',
+    },
+];
 
-wTourUtils.registerThemeHomepageTour('homepage',
-    [{
-        trigger: "a[data-action=edit]",
-        content: _t("<b>Click Edit</b> to start designing your homepage."),
-        extra_trigger: ".homepage",
-        position: "bottom",
-    }, {
-        trigger: "#snippet_structure .oe_snippet:eq(1) .oe_snippet_thumbnail",
-        extra_trigger: "body.editor_enable.editor_has_snippets",
-        content: _t("Drag the <i>Cover</i> block and drop it in your page."),
-        position: "bottom",
-        run: "drag_and_drop #wrap",
-    }, {
-        trigger: "#wrapwrap .s_cover h1",
-        content: _t("<b>Click on a text</b> to start editing it. <i>It's that easy to edit your content!</i>"),
-        position: "bottom",
-        consumeEvent: 'input',
-        run: "text",
-    }, {
-        trigger: ".o_we_customize_panel",
-        extra_trigger: "#wrapwrap .s_cover h1:not(:containsExact(\"Catchy Headline\"))",
-        content: _t("Customize any block through this menu. Try to change the background color of this block."),
-        position: "right",
-    }, {
-        trigger: '.o_we_add_snippet_btn',
-        content: _t("Go back to the blocks menu."),
-        position: 'bottom',
-    }, {
-        trigger: "#snippet_structure .oe_snippet:eq(3) .oe_snippet_thumbnail",
-        content: _t("Drag another block in your page, below the cover."),
-        position: "bottom",
-        run: "drag_and_drop #wrap",
-    }, {
-        trigger: "button[data-action=save]",
-        content: _t("Click the <b>Save</b> button."),
-        position: "bottom",
-    }, {
-        trigger: "a[data-action=show-mobile-preview]",
-        content: _t("Good Job! You have designed your homepage. Let's check how this page looks like on <b>mobile devices</b>."),
-        position: "bottom",
-    }, {
-        trigger: ".modal-dialog:has(#mobile-viewport) button[data-dismiss=modal]",
-        content: _t("After having checked how it looks on mobile, <b>close the preview</b>."),
-        position: "right",
-    }, {
-        trigger: "#new-content-menu > a",
-        content: _t("<p><b>Your homepage is live.</b></p><p>Let's add a new page for your site.</p>"),
-        position: "bottom",
-    },  {
-        trigger: "a[data-action=new_page]",
-        content: _t("<p><b>Click here</b> to create a new page.</p>"),
-        position: "bottom",
-    }, {
-        trigger: ".modal-dialog #editor_new_page input[type=text]",
-        content: _t("<p>Enter a title for the page.</p>"),
-        position: "bottom",
-    }, {
-        trigger: ".modal-footer button.btn-primary.btn-continue",
-        content: _t("Click on <b>Continue</b> to create the page."),
-        position: "bottom",
-    }, {
-        trigger: "#snippet_structure .oe_snippet:eq(3) .oe_snippet_thumbnail",
-        content: _t("Drag the block and drop it in your new page."),
-        position: "bottom",
-        run: "drag_and_drop #wrap",
-    }, {
-        trigger: "button[data-action=save]",
-        content: _t("Click the <b>Save</b> button."),
-        position: "bottom",
-    }, {
-        trigger: ".js_publish_management .js_publish_btn",
-        content: _t("<b>That's it!</b><p>Your page is all set to go live. Click the <b>Publish</b> button to publish it on the website.</p>"),
-        position: "bottom",
-    }]
-);
+wTourUtils.registerThemeHomepageTour('homepage', [
+    wTourUtils.dragNDrop(snippets[0]),
+    wTourUtils.clickOnText(snippets[0], 'h1'),
+    wTourUtils.goBackToBlocks(),
+    wTourUtils.dragNDrop(snippets[1]),
+    wTourUtils.dragNDrop(snippets[2]),
+    wTourUtils.dragNDrop(snippets[3]),
+    wTourUtils.dragNDrop(snippets[4]),
+    wTourUtils.dragNDrop(snippets[5]),
+    wTourUtils.clickOnSnippet(snippets[5], 'top'),
+    wTourUtils.changeBackgroundColor(),
+    wTourUtils.clickOnSave(),
+]);
 
 });

addons/website/static/src/js/tours/tour_utils.js

@@ -161,7 +161,7 @@ function clickOnSave(position = "bottom") {
 function clickOnText(snippet, element, position = "bottom") {
     return {
         trigger: `#wrapwrap .${snippet.id} ${element}`,
-        content: _t("Even if this title is cool, you can change it. <b>Click on a text</b> to start editing it."),
+        content: _t("<b>Click on a text</b> to start editing it."),
         position: position,
         run: "text",
         consumeEvent: "input",
@@ -231,7 +231,7 @@ function prepend_trigger(steps, prepend_text='') {
 
 function registerThemeHomepageTour(name, steps) {
     tour.register(name, {
-        url: "/",
+        url: "/?enable_editor=1",
         sequence: 1010,
         saveAs: "homepage",
     }, prepend_trigger(

addons/website/tests/test_ui.py

@@ -110,7 +110,10 @@ class TestUiTranslate(odoo.tests.HttpCase):
 @odoo.tests.common.tagged('post_install', '-at_install')
 class TestUi(odoo.tests.HttpCase):
 
-    def test_01_restricted_editor(self):
+    def test_01_admin_tour_homepage(self):
+        self.start_tour("/?enable_editor=1", 'homepage', login='admin')
+
+    def test_02_restricted_editor(self):
         self.restricted_editor = self.env['res.users'].create({
             'name': 'Restricted Editor',
             'login': 'restricted',
@@ -122,10 +125,10 @@ class TestUi(odoo.tests.HttpCase):
         })
         self.start_tour("/", 'restricted_editor', login='restricted')
 
-    def test_02_backend_dashboard(self):
+    def test_03_backend_dashboard(self):
         self.start_tour("/", 'backend_dashboard', login='admin')
 
-    def test_03_website_navbar_menu(self):
+    def test_04_website_navbar_menu(self):
         website = self.env['website'].search([], limit=1)
         self.env['website.menu'].create({
             'name': 'Test Tour Menu',
@@ -136,7 +139,7 @@ class TestUi(odoo.tests.HttpCase):
         })
         self.start_tour("/", 'website_navbar_menu')
 
-    def test_04_specific_website_editor(self):
+    def test_05_specific_website_editor(self):
         website_default = self.env['website'].search([], limit=1)
         new_website = self.env['website'].create({'name': 'New Website'})
         website_editor_assets_view = self.env.ref('website.assets_wysiwyg')

addons/website/views/snippets/s_banner.xml

@@ -9,8 +9,7 @@
                 <div class="col-lg-6 jumbotron rounded o_cc o_cc1 pt32 pb32" data-name="Box">
                     <h1><font style="font-size: 62px;">Sell Online. Easily.</font></h1>
                     <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-                    <p class="lead"><br/></p>
-                    <a href="#" class="btn btn-primary mb-2">Do something</a>
+                    <a href="#" class="btn btn-primary mb-2">Contact Us</a>
                 </div>
             </div>
         </div>