[IMP] website_event: Improve event registration

Purpose:

Improve the registration on front-end by allowing the manager
to customize it and display more informations to users about the tickets
and the status of the event.

Specs:

For event manager:

 Allow users to decide wether or not they want to unfold/fold
 ticket details on their event. The reason behind this is that
 some events might have 5+ different tickets and having them unfolded
 would bloat the UI quite horribly.

 By default, ticket details should be unfolded with no possibility for the end users
 to fold it back.

 Always display a button for the manager to go configure the event in back-end

For users in general:

 Show price range in case the ticket details are folded.

 Clearly show the user that a particular ticket is sold out/expired

 Cleary show the user that registrations are open/closed/sold out

LINKS:

TaskID:2162438
PR: #43856

2 files changed, 55 insertions, 12 deletions

diff --git a/addons/website_event/static/src/js/website_event.js b/addons/website_event/static/src/js/website_event.js
index cdaf012448d..36c0f5df526 100644
--- a/addons/website_event/static/src/js/website_event.js
+++ b/addons/website_event/static/src/js/website_event.js
@@ -9,9 +9,6 @@ var _t = core._t;
 
 // Catch registration form event, because of JS for attendee details
 var EventRegistrationForm = Widget.extend({
-    events: {
-        'click .o_wevent_registration_btn': '_onRegistrationBtnClick',
-    },
 
     /**
      * @override
@@ -70,15 +67,6 @@ var EventRegistrationForm = Widget.extend({
             });
         }
     },
-    /**
-     * @private
-     * @param {Event} ev
-     */
-    _onRegistrationBtnClick: function (ev) {
-        var $btn = $(ev.currentTarget);
-        $btn.toggleClass('btn-primary text-left pl-0');
-        $btn.siblings().toggleClass('d-none');
-    },
 });
 
 publicWidget.registry.EventRegistrationFormInstance = publicWidget.Widget.extend({
diff --git a/addons/website_event/static/src/js/website_event_ticket_details.js b/addons/website_event/static/src/js/website_event_ticket_details.js
new file mode 100644
index 00000000000..8ad2e307c69
--- /dev/null
+++ b/addons/website_event/static/src/js/website_event_ticket_details.js
@@ -0,0 +1,55 @@
+odoo.define('website_event.ticket_details', function (require) {
+    var publicWidget = require('web.public.widget');
+
+    publicWidget.registry.ticketDetailsWidget = publicWidget.Widget.extend({
+        selector: '.o_wevent_js_ticket_details',
+        events: {
+            'click .o_wevent_registration_btn': '_onTicketDetailsClick',
+            'change .custom-select': '_onTicketQuantityChange'
+        },
+        start: function (){
+            this.foldedByDefault = this.$el.data('foldedByDefault') === 1;
+            return this._super.apply(this, arguments);
+        },
+
+        //--------------------------------------------------------------------------
+        // Private
+        //--------------------------------------------------------------------------
+
+        /**
+         * @private
+         */
+        _getTotalTicketCount: function (){
+            var ticketCount = 0;
+            this.$('.custom-select').each(function (){
+                ticketCount += parseInt($(this).val());
+            });
+            return ticketCount;
+        },
+
+        //--------------------------------------------------------------------------
+        // Handlers
+        //--------------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {*} ev
+         */
+        _onTicketDetailsClick: function (ev){
+            ev.preventDefault();
+            if (this.foldedByDefault){
+                $(ev.currentTarget).toggleClass('btn-primary text-left pl-0');
+                $(ev.currentTarget).siblings().toggleClass('d-none');
+                this.$('.close').toggleClass('d-none');
+            }
+        },
+        /**
+         * @private
+         */
+        _onTicketQuantityChange: function (){
+            this.$('button.btn-primary').attr('disabled', this._getTotalTicketCount() === 0);
+        }
+    });
+
+return publicWidget.registry.ticketDetailsWidget;
+});