[IMP] website: make homepage tour, available on homepage only

Homepage tour starts with a very generic step 'drop snippet'
So, you can be in the middle of another tour and see the step of homepage tour.
This doesn't fix all cases, but make conflict less frequent.

E.g.

go to step 4 of tour event
click on save (before doing the step 5)
click on edit
Element is no more dirty (because save before step 5) so the step 5 not visible,
Tour with higher sequence (== lower priority) become visible. (e.g.: homepage)

closes odoo/odoo#60759

Related: odoo/design-themes#415
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

2 files changed, 103 insertions, 77 deletions

diff --git a/addons/website/static/src/js/tours/homepage.js b/addons/website/static/src/js/tours/homepage.js
index 56d40a0d42e..b04be9838c8 100644
--- a/addons/website/static/src/js/tours/homepage.js
+++ b/addons/website/static/src/js/tours/homepage.js
@@ -3,83 +3,84 @@ odoo.define("website.tour.homepage", function (require) {
 
 var core = require("web.core");
 var tour = require("web_tour.tour");
+const wTourUtils = require("website.tour_utils");
 
 var _t = core._t;
 
-tour.register("homepage", {
-    url: "/",
-    sequence: 1010,
-}, [{
-    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',
+    [{
+        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",
+    }]
+);
+
 });
diff --git a/addons/website/static/src/js/tours/tour_utils.js b/addons/website/static/src/js/tours/tour_utils.js
index 172bc9c9377..3d3e2ed6ab1 100644
--- a/addons/website/static/src/js/tours/tour_utils.js
+++ b/addons/website/static/src/js/tours/tour_utils.js
@@ -4,6 +4,8 @@ odoo.define("website.tour_utils", function (require) {
 const core = require("web.core");
 const _t = core._t;
 
+var tour = require("web_tour.tour");
+
 /**
 
 const snippets = [
@@ -216,7 +218,28 @@ function selectSnippetColumn(snippet, index = 0, position = "bottom") {
          position: position,
         run: "click",
      };
- }
+}
+
+function prepend_trigger(steps, prepend_text='') {
+    for (const step of steps) {
+        if (!step.noPrepend && prepend_text) {
+            step.trigger = prepend_text + step.trigger;
+        }
+    }
+    return steps;
+}
+
+function registerThemeHomepageTour(name, steps) {
+    tour.register(name, {
+        url: "/",
+        sequence: 1010,
+        saveAs: "homepage",
+    }, prepend_trigger(
+        steps,
+        "html[data-view-xmlid='website.homepage'] "
+    ));
+}
+
 
 return {
     addMedia,
@@ -236,5 +259,7 @@ return {
     goToOptions,
     selectHeader,
     selectSnippetColumn,
+
+    registerThemeHomepageTour,
 };
 });