From 11429329b8dea2dd0b2496dc8c1c8627751cccff Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 6 Jul 2022 12:06:52 +0000
Subject: [PATCH] [FIX] website: properly switch language while in edit mode

Before this commit, switching languages from the language dropdown while
in edit/translate mode was broken.

Now, the click event on this dropdown is listened alongside links with
external redirection from the WebsitePreview client action, so that the
client action leaves the edit mode while frontend is redirected to the
right language.

For that, a new leaveEditMode method is added to the website service,
which removes the edition classes and unmounts the Editor component.
This will further be reviewed in future commits.

Also, adding a new language from the language switcher dropdown directly
opens the wizard in a dialog on top of the WebsitePreview client action.

Follows the merge of the "website in backend" task at [1].

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

task-2687506

Part-of: odoo/odoo#81485
---
 .../website_preview/website_preview.js        | 28 +++++++++++++++----
 .../static/src/services/website_service.js    | 12 +++++++-
 addons/website/static/tests/tours/rte.js      |  2 +-
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index db5b1dffb43..bd116f73f8e 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -52,6 +52,8 @@ export class WebsitePreview extends Component {
         this.dialogService = useService('dialog');
         this.title = useService('title');
         this.user = useService('user');
+        this.router = useService('router');
+        this.action = useService('action');
 
         this.iframeFallbackUrl = '/website/iframefallback';
 
@@ -212,7 +214,8 @@ export class WebsitePreview extends Component {
         // The clicks on the iframe are listened, so that links with external
         // redirections can be opened in the top window.
         this.iframe.el.contentDocument.addEventListener('click', (ev) => {
-            if (!this.websiteContext.edition) {
+            const isEditing = this.websiteContext.edition || this.websiteContext.translation;
+            if (!isEditing) {
                 // Forward clicks to close backend client action's navbar
                 // dropdowns.
                 this.iframe.el.dispatchEvent(new MouseEvent('click', ev));
@@ -223,11 +226,26 @@ export class WebsitePreview extends Component {
                 return;
             }
 
-            const { href, target } = linkEl;
-            if (href && target !== '_blank' && !this.websiteContext.edition && this._isTopWindowURL(linkEl)) {
+            const { href, target, classList } = linkEl;
+            if (classList.contains('o_add_language')) {
                 ev.preventDefault();
-                ev.stopPropagation();
-                window.location.replace(href);
+                this.action.doAction('base.action_view_base_language_install', {
+                    target: 'new',
+                    additionalContext: {
+                        params: {
+                            website_id: this.websiteId,
+                            url_return: '/[lang]',
+                        },
+                    },
+                });
+            } else if (classList.contains('js_change_lang') && isEditing) {
+                ev.preventDefault();
+                // The switch to the right language is handled by the
+                // Website Root, inside the iframe.
+                this.websiteService.leaveEditMode();
+            } else if (href && target !== '_blank' && !isEditing && this._isTopWindowURL(linkEl)) {
+                ev.preventDefault();
+                this.router.redirect(href);
             }
         });
         this.iframe.el.contentDocument.addEventListener('keydown', ev => {
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 8f0d0591cf2..5f68be1837f 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -192,7 +192,17 @@ export const websiteService = {
             },
             unblockIframe() {
                 bus.trigger('UNBLOCK');
-            }
+            },
+            leaveEditMode() {
+                // FIXME this does not care about if the page is dirty or not.
+
+                // TODO this should not be needed here, the one who was in
+                // charge of adding this class should be the one in charge of
+                // removing it.
+                document.body.classList.remove('editor_has_snippets');
+                context.snippetsLoaded = false;
+                context.edition = false;
+            },
         };
     },
 };
diff --git a/addons/website/static/tests/tours/rte.js b/addons/website/static/tests/tours/rte.js
index e4b9b5cbdf5..89946a198be 100644
--- a/addons/website/static/tests/tours/rte.js
+++ b/addons/website/static/tests/tours/rte.js
@@ -53,7 +53,7 @@ wTourUtils.registerEditionTour('rte_translator', {
 }, {
     content: "Open new page menu",
     trigger: ".o_menu_systray .o_new_content_container > a",
-    extra_trigger: '.o_edit_website_container > a',
+    extra_trigger: 'iframe html[lang*="en-US"]',
     consumeVisibleOnly: true,
 }, {
     content: "click on new page",