From b5c87d86cad1aa2b44f805da0b2d6635aeb85b96 Mon Sep 17 00:00:00 2001
From: Patrick Hoste <pko@odoo.com>
Date: Wed, 24 Mar 2021 16:05:44 +0000
Subject: [PATCH] [IMP] website(_event): replace old event snippet by new
 dynamic one

PURPOSE

Replace the old event snippet which was a simple template with a
javascript file doing a rpc by a new one directly inherited by the
dynamic snippet.
The old snippet was displaying a list of the upcoming events based
on the user's localization. With this commit, it will be completely
replaced by the new snippet. The migration will convert the old
snippets to avoid versioning and keeping ugly code.
The new snippet allows the user to set multiples tags to display
only the wanted events on the website.

LINKS

Task-2489680
PR : odoo/odoo#68644

Related: odoo/upgrade#2406
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 .../s_event_upcoming_snippet.svg}             |   0
 addons/website/views/snippets/snippets.xml    |   3 +-
 addons/website_event/__manifest__.py          |   7 +-
 addons/website_event/controllers/main.py      |  25 ----
 .../data/website_snippet_data.xml             |  19 +++
 addons/website_event/models/__init__.py       |   1 +
 .../models/website_snippet_filter.py          |  51 ++++++++
 .../static/src/js/website_geolocation.js      |  37 ------
 .../static/src/snippets/s_events/000.js       |  28 +++++
 .../static/src/snippets/s_events/000.scss     |  93 +++++++++++++++
 .../static/src/snippets/s_events/options.js   |  55 +++++++++
 addons/website_event/views/event_snippets.xml |  16 +--
 .../views/event_templates_list.xml            |   9 --
 .../views/event_templates_widgets.xml         |  34 ------
 .../website_event/views/snippets/s_events.xml | 111 ++++++++++++++++++
 .../website_event/views/snippets/snippets.xml |  14 +++
 16 files changed, 381 insertions(+), 122 deletions(-)
 rename addons/{website_event/static/src/img/snippets_thumbs/s_country_events.svg => website/static/src/img/snippets_thumbs/s_event_upcoming_snippet.svg} (100%)
 create mode 100644 addons/website_event/data/website_snippet_data.xml
 create mode 100644 addons/website_event/models/website_snippet_filter.py
 delete mode 100644 addons/website_event/static/src/js/website_geolocation.js
 create mode 100644 addons/website_event/static/src/snippets/s_events/000.js
 create mode 100644 addons/website_event/static/src/snippets/s_events/000.scss
 create mode 100644 addons/website_event/static/src/snippets/s_events/options.js
 create mode 100644 addons/website_event/views/snippets/s_events.xml
 create mode 100644 addons/website_event/views/snippets/snippets.xml

diff --git a/addons/website_event/static/src/img/snippets_thumbs/s_country_events.svg b/addons/website/static/src/img/snippets_thumbs/s_event_upcoming_snippet.svg
similarity index 100%
rename from addons/website_event/static/src/img/snippets_thumbs/s_country_events.svg
rename to addons/website/static/src/img/snippets_thumbs/s_event_upcoming_snippet.svg
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index fd2bda6d0a6..d4c142fe036 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -111,7 +111,7 @@
                     <t id="sale_products_hook"/>
                     <t t-snippet="website.s_searchbar" t-thumbnail="/website/static/src/img/snippets_thumbs/s_searchbar.svg"/>
                     <t id="blog_posts_hook"/>
-                    <t id="event_local_events_hook"/>
+                    <t id="event_upcoming_snippet_hook"/>
                     <t id="snippet_google_map_hook"/>
                     <t id="mass_mailing_newsletter_block_hook"/>
                     <t id="mass_mailing_newsletter_popup_hook"/>
@@ -166,6 +166,7 @@
 
 <template id="external_snippets" inherit_id="website.snippets" priority="8">
     <xpath expr="//div[@id='snippet_effect']//t[@t-snippet][last()]" position="after">
+        <t t-install="website_event" string="Events" t-thumbnail="/website/static/src/img/snippets_thumbs/s_event_upcoming_snippet.svg"/>
         <t id="newsletter_popup_snippet" t-install="mass_mailing" string="Newsletter Popup" t-thumbnail="/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.svg"/>
         <t t-install="website_mail_group" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_group.svg"/>
         <t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/snippets_thumbs/s_twitter_scroll.svg"/>
diff --git a/addons/website_event/__manifest__.py b/addons/website_event/__manifest__.py
index 40356f20c27..bce83f96e00 100644
--- a/addons/website_event/__manifest__.py
+++ b/addons/website_event/__manifest__.py
@@ -17,8 +17,11 @@
     ],
     'data': [
         'data/event_data.xml',
+        'data/website_snippet_data.xml',
         'views/res_config_settings_views.xml',
         'views/event_snippets.xml',
+        'views/snippets/s_events.xml',
+        'views/snippets/snippets.xml',
         'views/event_templates_list.xml',
         'views/event_templates_page.xml',
         'views/event_templates_page_registration.xml',
@@ -55,7 +58,6 @@
             'website_event/static/src/scss/event_templates_page.scss',
             'website_event/static/src/js/display_timer_widget.js',
             'website_event/static/src/js/register_toaster_widget.js',
-            'website_event/static/src/js/website_geolocation.js',
             'website_event/static/src/js/website_event.js',
             'website_event/static/src/js/website_event_ticket_details.js',
             'website_event/static/src/js/website_event_set_customize_options.js',
@@ -63,6 +65,9 @@
         'website.assets_editor': [
             'website_event/static/src/js/website_event.editor.js',
         ],
+        'website.assets_wysiwyg': [
+            '/website_event/static/src/snippets/s_events/options.js',
+        ],
     },
     'license': 'LGPL-3',
 }
diff --git a/addons/website_event/controllers/main.py b/addons/website_event/controllers/main.py
index 87b7d821290..ee44ac4ad69 100644
--- a/addons/website_event/controllers/main.py
+++ b/addons/website_event/controllers/main.py
@@ -375,31 +375,6 @@ class WebsiteEventController(http.Controller):
             'event_ticket_ids': request.env['event.event.ticket'],
         }
 
-    # ------------------------------------------------------------
-    # TOOLS (JSON)
-    # ------------------------------------------------------------
-
-    @http.route('/event/get_country_event_list', type='json', auth='public', website=True)
-    def get_country_events(self, **post):
-        Event = request.env['event.event']
-        country_code = request.session['geoip'].get('country_code')
-        result = {'events': [], 'country': False}
-        events = None
-        domain = request.website.website_domain()
-        if country_code:
-            country = request.env['res.country'].search([('code', '=', country_code)], limit=1)
-            events = Event.search(domain + ['|', ('address_id', '=', None), ('country_id.code', '=', country_code), ('date_begin', '>=', '%s 00:00:00' % fields.Date.today())], order="date_begin")
-        if not events:
-            events = Event.search(domain + [('date_begin', '>=', '%s 00:00:00' % fields.Date.today())], order="date_begin")
-        for event in events:
-            if country_code and event.country_id.code == country_code:
-                result['country'] = country
-            result['events'].append({
-                "date": self.get_formated_date(event),
-                "event": event,
-                "url": event.website_url})
-        return request.env['ir.ui.view']._render_template("website_event.country_events_list", result)
-
     # ------------------------------------------------------------
     # TOOLS (HELPERS)
     # ------------------------------------------------------------
diff --git a/addons/website_event/data/website_snippet_data.xml b/addons/website_event/data/website_snippet_data.xml
new file mode 100644
index 00000000000..18a3923868d
--- /dev/null
+++ b/addons/website_event/data/website_snippet_data.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo><data>
+
+    <record id="ir_filters_event_list_snippet" model="ir.filters">
+        <field name="name">Upcoming Events</field>
+        <field name="model_id">event.event</field>
+        <field name="user_id" eval="False" />
+        <field name="domain">[('date_begin', '&gt;=', context_today())]</field>
+        <field name="sort">['date_begin desc']</field>
+    </record>
+
+    <record id="website_snippet_filter_event_list" model="website.snippet.filter">
+        <field name="filter_id" ref="website_event.ir_filters_event_list_snippet"/>
+        <field name="field_names">name,subtitle</field>
+        <field name="limit" eval="16"/>
+        <field name="name">Upcoming Events</field>
+    </record>
+
+</data></odoo>
diff --git a/addons/website_event/models/__init__.py b/addons/website_event/models/__init__.py
index f660b21f901..1e1a81e486f 100644
--- a/addons/website_event/models/__init__.py
+++ b/addons/website_event/models/__init__.py
@@ -8,4 +8,5 @@ from . import event_type
 from . import website
 from . import website_event_menu
 from . import website_menu
+from . import website_snippet_filter
 from . import website_visitor
diff --git a/addons/website_event/models/website_snippet_filter.py b/addons/website_event/models/website_snippet_filter.py
new file mode 100644
index 00000000000..1a1b6215c64
--- /dev/null
+++ b/addons/website_event/models/website_snippet_filter.py
@@ -0,0 +1,51 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from datetime import timedelta
+
+from odoo import models, fields, _
+
+
+class WebsiteSnippetFilter(models.Model):
+    _inherit = 'website.snippet.filter'
+
+    def _get_hardcoded_sample(self, model):
+        samples = super()._get_hardcoded_sample(model)
+        if model._name == 'event.event':
+            data = [{
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_1.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('Great Reno Ballon Race'),
+                'date_begin': fields.Date.today() + timedelta(days=10),
+                'date_end': fields.Date.today() + timedelta(days=11),
+            }, {
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_2.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('Conference For Architects'),
+                'date_begin': fields.Date.today(),
+                'date_end': fields.Date.today() + timedelta(days=2),
+            }, {
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_3.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('Live Music Festival'),
+                'date_begin': fields.Date.today() + timedelta(weeks=8),
+                'date_end': fields.Date.today() + timedelta(weeks=8, days=5),
+            }, {
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_5.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('Hockey Tournament'),
+                'date_begin': fields.Date.today() + timedelta(days=7),
+                'date_end': fields.Date.today() + timedelta(days=7),
+            }, {
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_7.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('OpenWood Collection Online Reveal'),
+                'date_begin': fields.Date.today() + timedelta(days=1),
+                'date_end': fields.Date.today() + timedelta(days=3),
+            }, {
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_4.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('Business Workshops'),
+                'date_begin': fields.Date.today() + timedelta(days=2),
+                'date_end': fields.Date.today() + timedelta(days=4),
+            }]
+            merged = []
+            for index in range(0, max(len(samples), len(data))):
+                merged.append({**samples[index % len(samples)], **data[index % len(data)]})
+                # merge definitions
+            samples = merged
+        return samples
diff --git a/addons/website_event/static/src/js/website_geolocation.js b/addons/website_event/static/src/js/website_geolocation.js
deleted file mode 100644
index 0ce89dc8e5a..00000000000
--- a/addons/website_event/static/src/js/website_geolocation.js
+++ /dev/null
@@ -1,37 +0,0 @@
-odoo.define('website_event.geolocation', function (require) {
-'use strict';
-
-var publicWidget = require('web.public.widget');
-
-publicWidget.registry.visitor = publicWidget.Widget.extend({
-    selector: ".oe_country_events, .country_events",
-    disabledInEditableMode: false,
-
-    /**
-     * @override
-     */
-    start: function () {
-        var defs = [this._super.apply(this, arguments)];
-        var self = this;
-        var $eventList = this.$('.country_events_list');
-        this._originalContent = $eventList[0].outerHTML;
-        defs.push(this._rpc({route: '/event/get_country_event_list'}).then(function (data) {
-            if (data) {
-                self._$loadedContent = $(data);
-                self._$loadedContent.attr('contentEditable', false);
-                $eventList.replaceWith(self._$loadedContent);
-            }
-        }));
-        return Promise.all(defs);
-    },
-    /**
-     * @override
-     */
-    destroy: function () {
-        this._super.apply(this, arguments);
-        if (this._$loadedContent) {
-            this._$loadedContent.replaceWith(this._originalContent);
-        }
-    },
-});
-});
diff --git a/addons/website_event/static/src/snippets/s_events/000.js b/addons/website_event/static/src/snippets/s_events/000.js
new file mode 100644
index 00000000000..68fae94a2ab
--- /dev/null
+++ b/addons/website_event/static/src/snippets/s_events/000.js
@@ -0,0 +1,28 @@
+/** @odoo-module **/
+
+import publicWidget from 'web.public.widget';
+import DynamicSnippet from 'website.s_dynamic_snippet';
+
+const DynamicSnippetEvents = DynamicSnippet.extend({
+    selector: '.s_event_upcoming_snippet',
+    disabledInEditableMode: false,
+
+    /**
+     * @override
+     * @private
+     */
+    _getSearchDomain: function () {
+        const searchDomain = this._super.apply(this, arguments);
+        const filterByTagIds = JSON.parse(this.$el.get(0).dataset.filterByTagIds || '[]');
+        if (filterByTagIds.length > 0) {
+            searchDomain.concat(Array(filterByTagIds.length-1).fill('&'));
+            for (const tag of filterByTagIds) {
+                searchDomain.push(['tag_ids', 'in', tag]);
+            }
+        }
+        return searchDomain;
+    }
+
+});
+
+publicWidget.registry.events = DynamicSnippetEvents;
diff --git a/addons/website_event/static/src/snippets/s_events/000.scss b/addons/website_event/static/src/snippets/s_events/000.scss
new file mode 100644
index 00000000000..f31635477a1
--- /dev/null
+++ b/addons/website_event/static/src/snippets/s_events/000.scss
@@ -0,0 +1,93 @@
+.s_dynamic {
+    .s_events_event_title {
+        font-weight: $headings-font-weight;
+        line-height: 1;
+    }
+
+    .s_events_event_subtitle {
+        font-size: $font-size-base;
+    }
+
+    &.s_event_event_picture {
+        .s_events_event {
+            margin: 0;
+            min-height: 150px;
+
+            figcaption {
+                position: relative;
+                justify-content: center;
+                pointer-events: auto;
+            }
+
+            .s_events_event_cover {
+                min-height: 100%;
+
+                .o_record_cover_container {
+                    top: 0;
+                }
+            }
+
+            .s_events_event_title {
+                @include font-size($h3-font-size);
+                margin-bottom: 0.5em;
+            }
+        }
+
+        .row {
+            align-items: stretch;
+            .s_events_event_subtitle {
+                margin: 0;
+            }
+        }
+    }
+
+    &.s_event_event_card {
+        .card {
+            height: 100%;
+
+            .s_events_event_cover {
+                height: 150px;
+
+                .o_record_cover_container {
+                    background-color: transparent !important;
+
+                    .o_record_cover_image {
+                        @extend .card-img-top;
+                        height: inherit;
+                    }
+                }
+
+                .s_events_event_date {
+                    top: $card-spacer-x;
+                    right: $card-spacer-x;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    width: $display4-size;
+                    height: $display4-size;
+                    border-radius: 50%;
+                    text-align: center;
+
+                    .s_events_event_month {
+                        font-size: $font-size-sm;
+                        font-weight: $font-weight-bold;
+                        text-transform: uppercase;
+                    }
+                    .s_events_event_day {
+                        font-size: $font-size-lg;
+                        font-weight: $font-weight-light;
+                    }
+                }
+            }
+
+            a {
+                color: color-yiq($o-brand-primary);
+
+                &:hover {
+                    text-decoration: none;
+                }
+            }
+
+        }
+    }
+}
diff --git a/addons/website_event/static/src/snippets/s_events/options.js b/addons/website_event/static/src/snippets/s_events/options.js
new file mode 100644
index 00000000000..9bbe76d5b7c
--- /dev/null
+++ b/addons/website_event/static/src/snippets/s_events/options.js
@@ -0,0 +1,55 @@
+/** @odoo-module **/
+
+import options from 'web_editor.snippets.options';
+import dynamicSnippetOptions from 'website.s_dynamic_snippet_options';
+
+const dynamicSnippetEventOptions = dynamicSnippetOptions.extend({
+    /**
+     * @override
+     */
+    init() {
+        this._super.apply(this, arguments);
+        this.modelNameFilter = 'event.event';
+        this.tagIDs = [];
+    },
+
+    async willStart() {
+        const _super = this._super.bind(this);
+        this.tagIDs = JSON.parse(this.$target[0].dataset.filterByTagIds || '[]');
+        const tags = await this._rpc({
+            model: 'event.tag',
+            method: 'search_read',
+            domain: ['&', ['category_id.website_published', '=', true], ['color', 'not in', ['0', false]]],
+            fields: ['id', 'display_name'],
+        });
+        this.allTagsByID = {};
+        for (const tag of tags) {
+            this.allTagsByID[tag.id] = tag;
+        }
+
+        return _super(...arguments);
+    },
+
+    setTags(previewMode, widgetValue, params) {
+        this.tagIDs = JSON.parse(widgetValue).map(tag => tag.id);
+        this.selectDataAttribute(previewMode, JSON.stringify(this.tagIDs), params);
+    },
+
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        if (methodName === 'setTags') {
+            return JSON.stringify(this.tagIDs.map(id => this.allTagsByID[id]));
+        }
+        return this._super(...arguments);
+    },
+
+    _setOptionsDefaultValues() {
+        this._setOptionValue('numberOfRecords', 4);
+        this._super.apply(this, arguments);
+    },
+
+});
+
+options.registry.event_upcoming_snippet = dynamicSnippetEventOptions;
diff --git a/addons/website_event/views/event_snippets.xml b/addons/website_event/views/event_snippets.xml
index a610f23ac27..3caea5d7f03 100644
--- a/addons/website_event/views/event_snippets.xml
+++ b/addons/website_event/views/event_snippets.xml
@@ -1,29 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<!-- Snippet - Country Events - Placeholder -->
-<template id="s_country_events" name="Events">
-    <div t-attf-class="s_country_events_list oe_country_events #{_classes}">
-        <div class="country_events_list">
-            <h6 class="o_wevent_sidebar_title">
-                <i class="fa fa-globe mr-2"/>Upcoming Events
-            </h6>
-        </div>
-    </div>
-</template>
-
 <!-- Snippets and options -->
 <template id="snippets" inherit_id="website.snippets">
-    <xpath expr="//t[@id='event_local_events_hook']" position="replace">
-        <t t-snippet="website_event.s_country_events" t-thumbnail="/website_event/static/src/img/snippets_thumbs/s_country_events.svg"/>
-    </xpath>
     <xpath expr="//t[@id='event_speaker_bio_hook']" position="replace">
         <t t-snippet="website_event.s_speaker_bio" t-thumbnail="/website_event/static/src/img/snippets_thumbs/s_speaker_bio.svg"/>
     </xpath>
 </template>
 
 <template id="snippet_options" inherit_id="website.snippet_options">
-    <xpath expr="//*[@t-set='so_content_addition_selector']" position="inside">, .oe_country_events, .s_speaker_bio</xpath>
+    <xpath expr="//*[@t-set='so_content_addition_selector']" position="inside">, .s_speaker_bio</xpath>
 </template>
 
 <template id="event_searchbar_input_snippet_options" inherit_id="website.searchbar_input_snippet_options" name="event search bar snippet options">
diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml
index 0ba22217e57..a5ebd1ecce6 100644
--- a/addons/website_event/views/event_templates_list.xml
+++ b/addons/website_event/views/event_templates_list.xml
@@ -318,13 +318,4 @@
     </xpath>
 </template>
 
-<!-- Index - Sidebar - Snippet - Country Events -->
-<template id="index_sidebar_country_event" inherit_id="website_event.index_sidebar" active="False" customize_show="True" name="Country Events" priority="70">
-    <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
-        <div class="o_wevent_sidebar_block">
-            <t t-snippet-call="website_event.s_country_events"/>
-        </div>
-    </xpath>
-</template>
-
 </odoo>
diff --git a/addons/website_event/views/event_templates_widgets.xml b/addons/website_event/views/event_templates_widgets.xml
index 9f424578ee5..b0718308025 100644
--- a/addons/website_event/views/event_templates_widgets.xml
+++ b/addons/website_event/views/event_templates_widgets.xml
@@ -35,40 +35,6 @@
     </xpath>
 </template>
 
-<!-- Snippet - Country Events - List -->
-<template id="country_events_list" name="Country Events List">
-    <div class="country_events_list">
-        <t t-if="events">
-            <h6 class="o_wevent_sidebar_title">
-                <t t-if="country">
-                    <i class="fa fa-flag mr-2"/>Events: <span t-esc="country.name"/>
-                    <img class="img-fluid" t-att-src="country.image_url" alt=""/>
-                </t>
-                <t t-else="">
-                    <i class="fa fa-globe mr-2"/>Upcoming Events
-                </t>
-            </h6>
-            <ul class="list-group mb-3">
-                <li t-foreach="events[:5]" t-as="event_dict" class="list-group-item d-flex justify-content-between">
-                    <a t-att-href="event_dict['url']">
-                        <i t-if="not event_dict['event'].website_published" class="fa fa-ban text-danger mr-1" role="img" aria-label="Unpublished" title="Unpublished"/>
-                        <span t-esc="event_dict['event'].name" t-attf-class="#{(not event_dict['event'].website_published) and 'text-danger' or ''}"/>
-                    </a>
-                    <span t-esc="event_dict['date']"/>
-                </li>
-            </ul>
-            <div t-if="len(events) &gt; 5">
-                <t t-if="country">
-                    <a t-attf-href="/event?country=#{country.id}" class="small"><b>See all events from <span t-esc="country.name"/></b></a>
-                </t>
-                <t t-else="">
-                    <a href="/event" class="small"><b>View all</b></a>
-                </t>
-            </div>
-        </t>
-    </div>
-</template>
-
 <!-- Timer widget -->
 <template id="display_timer_widget" name="Display Timer Widget">
     <t t-set="pre_countdown_display" t-value="bool(pre_countdown_text) or pre_countdown_display"/>
diff --git a/addons/website_event/views/snippets/s_events.xml b/addons/website_event/views/snippets/s_events.xml
new file mode 100644
index 00000000000..fbb0c7adaba
--- /dev/null
+++ b/addons/website_event/views/snippets/s_events.xml
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+
+<template id="s_events" name="Events">
+    <t t-call="website.s_dynamic_snippet_template">
+        <t t-set="snippet_name" t-value="'s_events'"/>
+        <t t-set="snippet_classes" t-value="'s_event_upcoming_snippet'"/>
+    </t>
+</template>
+
+<!--TEMPLATES-->
+
+<template id="dynamic_filter_template_event_event_picture" name="Picture Layout" priority="5">
+    <figure t-foreach="records" t-as="data" class="w-100 s_events_event">
+        <t t-set="record" t-value="data['_record']._set_tz_context()"/>
+        <a class="s_events_event_cover position-relative d-flex flex-column shadow-sm overflow-hidden rounded text-decoration-none"
+           t-att-href="data['call_to_action_url']">
+            <t t-call="website.record_cover">
+                <t t-set="_record" t-value="record"/>
+                <t t-set="_resize_height" t-value="512"/>
+                <t t-set="_resize_width" t-value="512"/>
+                <t t-set="use_filters" t-value="True"/>
+                <t t-set="additionnal_classes" t-value="'h-100 w-100 bg-600 position-absolute'"/>
+            </t>
+
+            <figcaption class="text-center w-100 h-100 px-3 d-flex flex-column flex-grow-1">
+                <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                <div class="s_events_event_title text-white" t-field="record.name"/>
+                <time itemprop="startDate" t-att-datetime="record.date_begin" class="text-white">
+                    <span t-out="record.date_begin"
+                          t-options="{'widget': 'datetime', 'date_only': 'true', 'format': 'long'}"/> -
+                    <span t-out="record.date_begin"
+                          t-options="{'widget': 'datetime', 'time_only': 'true', 'format': 'short'}"/>
+                </time>
+            </figcaption>
+        </a>
+    </figure>
+</template>
+
+<template id="dynamic_filter_template_event_event_card" name="Card Layout" priority="10">
+    <div t-foreach="records" t-as="data" class="pb32 w-100 s_events_event">
+        <t t-set="record" t-value="data['_record']._set_tz_context()"/>
+        <div class="card shadow-sm">
+            <a class="s_events_event_cover" t-att-href="data['call_to_action_url']">
+                <t t-call="website.record_cover">
+                    <t t-set="_record" t-value="record"/>
+                    <t t-set="_resize_height" t-value="256"/>
+                    <t t-set="_resize_width" t-value="256"/>
+
+                    <div class="s_events_event_date position-absolute bg-white shadow-sm text-dark">
+                        <span t-field="record.date_begin" t-options="{'format': 'LLL'}" class="s_events_event_month"/>
+                        <span t-field="record.date_begin" t-options="{'format': 'dd'}" class="s_events_event_day"/>
+                    </div>
+                </t>
+            </a>
+            <div class="card-body p-3">
+                <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                <h5 class="mb-0 text-truncate" t-field="record.name"/>
+                <time itemprop="startDate" t-att-datetime="record.date_begin">
+                    <span t-field="record.date_begin" t-options="{'date_only': 'true', 'format': 'long'}"/> -
+                    <span t-field="record.date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
+                </time>
+                <div itemprop="location" t-field="record.address_id"
+                     t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true'}"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<!--SNIPPET OPTIONS -->
+
+<template id="s_events_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <t t-call="website_event.s_dynamic_snippet_options_template">
+            <t t-set="snippet_name" t-value="'event_upcoming_snippet'"/>
+            <t t-set="snippet_selector" t-value="'.s_event_upcoming_snippet'"/>
+            <t t-set="grouping_message">Items per row</t>
+        </t>
+    </xpath>
+</template>
+
+<template id="s_dynamic_snippet_options_template" inherit_id="website.s_dynamic_snippet_options_template">
+    <xpath expr="//we-select[@data-name='filter_opt']" position="after">
+        <we-many2many t-if="snippet_name == 'event_upcoming_snippet'"
+                      string="Event Tags"
+                      data-name="event_tag_opt"
+                      data-model="event.event"
+                      data-m2o-field="tag_ids"
+                      data-domain='[["category_id.website_published", "=", true], ["color", "not in", ["0", false]]]'
+                      data-limit="10"
+                      data-set-tags=""
+                      data-attribute-name="filterByTagIds"
+                      data-no-preview="true"/>
+    </xpath>
+</template>
+
+<!--ASSETS-->
+
+<record id="website_event.s_events_000_scss" model="ir.asset">
+    <field name="name">Event 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website_event/static/src/snippets/s_events/000.scss</field>
+</record>
+
+<record id="website_event.s_events_000_js" model="ir.asset">
+    <field name="name">Event 000 JS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website_event/static/src/snippets/s_events/000.js</field>
+</record>
+
+</odoo>
diff --git a/addons/website_event/views/snippets/snippets.xml b/addons/website_event/views/snippets/snippets.xml
new file mode 100644
index 00000000000..aa8b2fe801c
--- /dev/null
+++ b/addons/website_event/views/snippets/snippets.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+
+<template id="remove_external_snippets" inherit_id="website.external_snippets">
+    <xpath expr="//t[@t-install='website_event']" position="replace"/>
+</template>
+
+<template id="snippets" inherit_id="website.snippets">
+    <xpath expr="//t[@id='event_upcoming_snippet_hook']" position="replace">
+        <t t-snippet="website_event.s_events" t-thumbnail="/website/static/src/img/snippets_thumbs/s_event_upcoming_snippet.svg"/>
+    </xpath>
+</template>
+
+</odoo>