[IMP] website: show welcome message on homepage

Author: divy-odoo

addons/html_builder/__manifest__.py

@@ -71,6 +71,7 @@
         ],
         'web.assets_frontend': [
             'html_builder/static/src/interactions/**/*',
+            'html_builder/static/src/website_preview/website_builder_action.editor.scss',
             ('remove', 'html_builder/static/src/interactions/**/*.edit.*'),
         ],
     },

addons/html_builder/static/src/website_preview/website_builder_action.editor.scss

@@ -0,0 +1,3 @@
+.o_homepage_editor_welcome_message {
+    font-family: $o-font-family-sans-serif;
+}

addons/html_builder/static/src/website_preview/website_builder_action.js

@@ -25,6 +25,7 @@ import { AddPageDialog } from "@website/components/dialog/add_page_dialog";
 import { ResourceEditor } from "@website/components/resource_editor/resource_editor";
 import { isHTTPSorNakedDomainRedirection } from "./utils";
 import { WebsiteSystrayItem } from "./website_systray_item";
+import { renderToElement } from "@web/core/utils/render";
 
 export class WebsiteBuilder extends Component {
     static template = "html_builder.WebsiteBuilder";
@@ -73,7 +74,13 @@ export class WebsiteBuilder extends Component {
         useSubEnv({
             localOverlayContainerKey: uniqueId("website"),
         });
-
+        useEffect(
+            () => {
+                this.addWelcomeMessage();
+                return () => this.welcomeMessageEl?.remove();
+            },
+            () => [this.state.isEditing]
+        );
         this.websitePreviewRef = useRef("website_preview");
 
         onWillStart(async () => {
@@ -402,6 +409,19 @@ export class WebsiteBuilder extends Component {
         );
     }
 
+    async addWelcomeMessage() {
+        await this.iframeLoaded;
+        if (this.websiteService.isRestrictedEditor && !this.state.isEditing) {
+            const wrapEl = this.websiteContent.el.contentDocument.querySelector(
+                "#wrapwrap.homepage #wrap"
+            );
+            if (wrapEl && !wrapEl.innerHTML.trim()) {
+                this.welcomeMessageEl = renderToElement("website.homepage_editor_welcome_message");
+                wrapEl.replaceChildren(this.welcomeMessageEl);
+            }
+        }
+    }
+
     setIframeLoaded() {
         this.iframeLoaded = new Promise((resolve) => {
             this.resolveIframeLoaded = () => {

addons/html_builder/static/src/website_preview/website_builder_action.xml

@@ -21,4 +21,10 @@
     </div>
 </t>
 
+<t t-name="website.homepage_editor_welcome_message">
+    <div class="container o_homepage_editor_welcome_message text-center pt128 pb128 h-100">
+        <h2 class="mt0">Welcome to your <b>Homepage</b>!</h2>
+        <p class="lead d-none d-md-block">Click on <b>Edit</b> in the top right corner to start designing.</p>
+    </div>
+</t>
 </templates>

addons/website/static/tests/tours/skip_website_configurator.js

@@ -27,7 +27,7 @@ registry.category("web_tour.tours").add('skip_website_configurator', {
     },
     {
         content: "Check that the homepage is loaded",
-        trigger: ".o_website_preview[data-view-xmlid='website.homepage']",
+        trigger: ".o_website_preview :iframe html[data-view-xmlid='website.homepage']",
         timeout: 30000,
     },
     {

addons/website/tests/test_skip_website_configurator.py

@@ -6,7 +6,6 @@
 @tagged('post_install', '-at_install')
 class TestAutomaticEditor(TestConfiguratorCommon):
 
-    @unittest.skip
     def test_skip_website_configurator(self):
         # If not enabled (like in demo data), landing on res.config will try
         # to disable module_sale_quotation_builder and raise an issue