From 1b4edd77cef4f51dce55be37bec944fe82bce65d Mon Sep 17 00:00:00 2001
From: pilarvargas-tecnativa <pilar.vargas@tecnativa.com>
Date: Mon, 2 Dec 2024 10:45:43 +0100
Subject: [PATCH] [MIG] website_snippet_marginless_gallery: Migration to
 version 17.0

TT51978
---
 .../__manifest__.py                           |  4 +-
 .../website_snippet_marginless_gallery.js     | 41 ++++++-------------
 .../views/snippets.xml                        | 34 +++++++--------
 3 files changed, 32 insertions(+), 47 deletions(-)

diff --git a/website_snippet_marginless_gallery/__manifest__.py b/website_snippet_marginless_gallery/__manifest__.py
index 90b07422b9..e683ff6aa5 100644
--- a/website_snippet_marginless_gallery/__manifest__.py
+++ b/website_snippet_marginless_gallery/__manifest__.py
@@ -4,7 +4,7 @@
 {
     "name": "Marginless Gallery Snippet",
     "summary": "Add a snippet to have a marginless image gallery",
-    "version": "15.0.1.0.0",
+    "version": "17.0.1.0.0",
     "category": "Website",
     "license": "LGPL-3",
     "website": "https://github.com/OCA/website",
@@ -18,7 +18,7 @@
     "data": ["views/snippets.xml"],
     "assets": {
         "web.assets_tests": [
-            "/website_snippet_marginless_gallery/static/src/tests/tours/*.js"
+            "/website_snippet_marginless_gallery/static/src/tests/tours/*.esm.js"
         ]
     },
 }
diff --git a/website_snippet_marginless_gallery/static/src/tests/tours/website_snippet_marginless_gallery.js b/website_snippet_marginless_gallery/static/src/tests/tours/website_snippet_marginless_gallery.js
index 0933c5a8a8..151c4795df 100644
--- a/website_snippet_marginless_gallery/static/src/tests/tours/website_snippet_marginless_gallery.js
+++ b/website_snippet_marginless_gallery/static/src/tests/tours/website_snippet_marginless_gallery.js
@@ -1,35 +1,18 @@
+/** @odoo-module */
+
 /* Copyright 2015-2017 Tecnativa - Jairo Llopis <jairo.llopis@tecnativa.com>
  * Copyright 2019 Tecnativa - Cristina Martin R.
  * Copyright 2020 Tecnativa - Alexandre D. Díaz
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). */
 
-odoo.define("website_snippet_marginless_gallery.tour", function (require) {
-    "use strict";
-    const core = require("web.core");
-    const tour = require("web_tour.tour");
-    const base = require("web_editor.base");
-
-    const _t = core._t;
+import wTourUtils from '@website/js/tours/tour_utils';
 
-    tour.register(
-        "marginless_gallery",
-        {
-            url: "/",
-            wait_for: base.ready(),
-        },
-        [
-            {
-                trigger: "a[data-action=edit]",
-                content: _t("<b>Click Edit</b> to start designing your homepage."),
-                extra_trigger: ".homepage",
-                position: "bottom",
-            },
-            {
-                trigger: "#snippet_feature .oe_snippet:contains('Marginless Gallery')",
-                content: _t("Drag <i>Marginless Gallery</i> and drop it on the page."),
-                position: "bottom",
-                run: "drag_and_drop #wrap",
-            },
-        ]
-    );
-});
+wTourUtils.registerWebsitePreviewTour('marginless_gallery', {
+    test: true,
+    url: '/',
+    edition: true,
+}, () => [
+    wTourUtils.dragNDrop({id: 's_marginless_gallery', name: 'Marginless Gallery'}),
+    wTourUtils.clickOnSnippet({id: 's_marginless_gallery', name: 'Marginless Gallery'}),
+    ...wTourUtils.clickOnSave(),
+]);
diff --git a/website_snippet_marginless_gallery/views/snippets.xml b/website_snippet_marginless_gallery/views/snippets.xml
index 5bfabfb34e..11c94a8630 100644
--- a/website_snippet_marginless_gallery/views/snippets.xml
+++ b/website_snippet_marginless_gallery/views/snippets.xml
@@ -6,17 +6,19 @@
     <template id="s_marginless_gallery" name="Marginless Gallery">
         <section class="marginless-gallery pt32 pb32 text-center">
             <div class="container">
-                <div class="row">
-                    <div class="col-lg-12 text-center">
+                <div class="row d-flex align-items-stretch">
+                    <div
+                        class="o_colored_level o_cc o_cc1 col-lg-12 pb32 pt32 text-center"
+                    >
                         <h2 class="o_default_snippet_text pb16">
                             <b>Our Gallery</b>
                         </h2>
-                        <p class="lead o_default_snippet_text pb32">
+                        <p class="lead o_default_snippet_text pb16">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.
                         </p>
                     </div>
                     <section
-                        class="col-lg-3 col-12 pt32 pb32 oe_img_bg"
+                        class="col-lg-3 pt32 pb32 oe_img_bg"
                         style="background-image: url('/website/static/src/img/library/bridge.jpg');"
                     >
                         <div>
@@ -26,7 +28,7 @@
                             </p>
                         </div>
                     </section>
-                    <section class="col-lg-3 col-12 pt32 pb32  bg-primary">
+                    <section class="col-lg-3 pt32 pb32 o_colored_level o_cc o_cc4">
                         <div>
                             <h4 class="o_default_snippet_text">Lorem ipsum</h4>
                             <p class="o_default_snippet_text mb0">
@@ -35,7 +37,7 @@
                         </div>
                     </section>
                     <section
-                        class="col-lg-3 col-12 pt32 pb32 oe_img_bg"
+                        class="col-lg-3 pt32 pb32 oe_img_bg"
                         style="background-image: url('/website/static/src/img/library/mobile.jpg');"
                     >
                         <div>
@@ -45,7 +47,7 @@
                             </p>
                         </div>
                     </section>
-                    <section class="col-lg-3 col-12 pt32 pb32  bg-o-color-2">
+                    <section class="col-lg-3 pt32 pb32 o_colored_level o_cc o_cc3">
                         <div>
                             <h4 class="o_default_snippet_text">Lorem ipsum</h4>
                             <p class="o_default_snippet_text mb0">
@@ -53,7 +55,7 @@
                             </p>
                         </div>
                     </section>
-                    <section class="col-lg-3 col-12 pt32 pb32  bg-o-color-3">
+                    <section class="col-lg-3 pt32 pb32 o_colored_level o_cc o_cc2">
                         <div>
                             <h4 class="o_default_snippet_text">Lorem ipsum</h4>
                             <p class="o_default_snippet_text mb0">
@@ -61,7 +63,7 @@
                             </p>
                         </div>
                     </section>
-                    <section class="col-lg-3 col-12 pt32 pb32  bg-o-color-5">
+                    <section class="col-lg-3 pt32 pb32 o_colored_level o_cc o_cc5">
                         <div>
                             <h4 class="o_default_snippet_text">Lorem ipsum</h4>
                             <p class="o_default_snippet_text mb0">
@@ -69,7 +71,7 @@
                             </p>
                         </div>
                     </section>
-                    <section class="col-lg-3 col-12 pt32 pb32  bg-o-color-4">
+                    <section class="col-lg-3 pt32 pb32 o_colored_level o_cc o_cc1">
                         <div>
                             <h4 class="o_default_snippet_text">Lorem ipsum</h4>
                             <p class="o_default_snippet_text mb0">
@@ -77,7 +79,7 @@
                             </p>
                         </div>
                     </section>
-                    <section class="col-lg-3 col-12 pt32 pb32  bg-primary">
+                    <section class="col-lg-3 pt32 pb32 o_colored_level o_cc o_cc4">
                         <div>
                             <h4 class="o_default_snippet_text">Lorem ipsum</h4>
                             <p class="o_default_snippet_text mb0">
@@ -85,7 +87,7 @@
                             </p>
                         </div>
                     </section>
-                    <section class="col-lg-3 col-12 pt32 pb32  bg-o-color-2">
+                    <section class="col-lg-3 pt32 pb32  o_colored_level o_cc o_cc3">
                         <div>
                             <h4 class="o_default_snippet_text">Lorem ipsum</h4>
                             <p class="o_default_snippet_text mb0">
@@ -94,7 +96,7 @@
                         </div>
                     </section>
                     <section
-                        class="col-lg-3 col-12 pt32 pb32 oe_img_bg"
+                        class="col-lg-3 pt32 pb32 oe_img_bg"
                         style="background-image: url('/website/static/src/img/library/shop.jpg');"
                     >
                         <div>
@@ -104,7 +106,7 @@
                             </p>
                         </div>
                     </section>
-                    <section class="col-lg-3 col-12 pt32 pb32  bg-o-color-3">
+                    <section class="col-lg-3 pt32 pb32 o_colored_level o_cc o_cc2">
                         <div>
                             <h4 class="o_default_snippet_text">Lorem ipsum</h4>
                             <p class="o_default_snippet_text mb0">
@@ -113,7 +115,7 @@
                         </div>
                     </section>
                     <section
-                        class="col-lg-3 col-12 pt32 pb32 oe_img_bg"
+                        class="col-lg-3 pt32 pb32 oe_img_bg"
                         style="background-image: url('/website/static/src/img/library/wine.jpg');"
                     >
                         <div>
@@ -128,7 +130,7 @@
         </section>
     </template>
     <template id="snippets" inherit_id="website.snippets">
-        <xpath expr="//div[@id='snippet_feature']//div[hasclass('o_panel_body')]">
+        <xpath expr="//div[@id='snippet_structure']//div[hasclass('o_panel_body')]">
             <t
                 t-snippet="website_snippet_marginless_gallery.s_marginless_gallery"
                 t-thumbnail="/website_snippet_marginless_gallery/static/description/s_website_marginless_gallery.png"