[IMP] website, web_tour: have steps to select shape or color

Before this commit the theme tours had no step during the shape or color
selection

After this commit the theme tours have an additional step during the
shape or color selection

task-2390579
https://github.com/odoo/odoo/pull/62176
https://github.com/odoo/design-themes/pull/428

2 files changed, 41 insertions, 2 deletions

diff --git a/addons/website/i18n/website.pot b/addons/website/i18n/website.pot
index 4782dafbf4c..58faa07b677 100644
--- a/addons/website/i18n/website.pot
+++ b/addons/website/i18n/website.pot
@@ -6,8 +6,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Odoo Server 14.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2020-11-27 14:12+0000\n"
-"PO-Revision-Date: 2020-11-27 14:12+0000\n"
+"POT-Creation-Date: 2020-12-04 15:13+0000\n"
+"PO-Revision-Date: 2020-12-04 15:13+0000\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "MIME-Version: 1.0\n"
@@ -431,6 +431,20 @@ msgstr ""
 #. openerp-web
 #: code:addons/website/static/src/js/tours/tour_utils.js:0
 #, python-format
+msgid "<b>Select</b> a ${optionTooltipLabel}."
+msgstr ""
+
+#. module: website
+#. openerp-web
+#: code:addons/website/static/src/js/tours/tour_utils.js:0
+#, python-format
+msgid "<b>Select</b> a Color Palette."
+msgstr ""
+
+#. module: website
+#. openerp-web
+#: code:addons/website/static/src/js/tours/tour_utils.js:0
+#, python-format
 msgid "<b>Slide</b> this button to change the ${direction} padding"
 msgstr ""
 
diff --git a/addons/website/static/src/js/tours/tour_utils.js b/addons/website/static/src/js/tours/tour_utils.js
index 08f60940fe1..3f817b1f2b0 100644
--- a/addons/website/static/src/js/tours/tour_utils.js
+++ b/addons/website/static/src/js/tours/tour_utils.js
@@ -64,6 +64,17 @@ function changeBackgroundColor(position = "bottom") {
     };
 }
 
+function selectColorPalette(position = "left") {
+    return {
+        trigger: ".o_we_customize_panel .o_we_so_color_palette we-selection-items",
+        alt_trigger: ".o_we_customize_panel .o_we_color_preview",
+        content: _t(`<b>Select</b> a Color Palette.`),
+        position: position,
+        run: 'click',
+        location: position === 'left' ? '#oe_snippets' : undefined,
+    };
+}
+
 function changeColumnSize(position = "right") {
     return {
         trigger: `.oe_overlay.ui-draggable.o_we_overlay_sticky.oe_active .o_handle.e`,
@@ -103,6 +114,18 @@ function changeOption(optionName, weName = '', optionTooltipLabel = '', position
     };
 }
 
+function selectNested(trigger, optionName, alt_trigger = null, optionTooltipLabel = '', position = "top") {
+    const option_block = `we-customizeblock-option[class='snippet-option-${optionName}']`;
+    return {
+        trigger: trigger,
+        content: _t(`<b>Select</b> a ${optionTooltipLabel}.`),
+        alt_trigger: alt_trigger == null ? undefined : `${option_block} ${alt_trigger}`,
+        position: position,
+        run: 'click',
+        location: position === 'left' ? '#oe_snippets' : undefined,
+    };
+}
+
 function changePaddingSize(direction) {
     let paddingDirection = "n";
     let position = "top";
@@ -257,7 +280,9 @@ return {
     dragNDrop,
     goBackToBlocks,
     goToOptions,
+    selectColorPalette,
     selectHeader,
+    selectNested,
     selectSnippetColumn,
 
     registerThemeHomepageTour,