From d30cbf64237150839dac3ba4379e93b087383402 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@odoo.com>
Date: Thu, 30 Jul 2020 08:44:54 +0000
Subject: [PATCH] [REF] website_event: improve registration pages

RATIONALE

Even will soon gain a major update called Event Online, allowing to better
support full-online events. In order to prepare its merge, preparatory merge
are done to lessen the final diff.

PURPOSE

Prepare Event Online support by providing fixes in registration and event
frontend flows. Also provide a quick back2basic in backend views to prepare
addition of Online sub modules.

SPECIFICATIONS: REGISTRATION PAGE

Register: display number of remaining registrations only if < 20% of max
capacity. Purpose is to display this text only if remaining count is low.
Otherwise it clutters display without much added information.

Rephrase to "only XX available" as all events do not use seats specifically.

Fix some alignment issues, with tickets title / tickets themselves / event
description.

Improve display of ticket selection, especially with event_sale installed and
in mobile as we may not see content of select box.

SPECIFICATIONS: REGISTRATION CONFIRMATION PAGE

Change table by simply putting registration information in a card-like display.
Display each information (name, email, phone, ...) on a separate line. Purpose
is to be mobile-friendly as tables display badly on mobile

LINKS

Community PR odoo/odoo#55197
Enterprise PR odoo/enterprise#12113

Task ID-2287372 (Fix Twitter Wall)
Task ID-2309702 (Event Preparatory Merge 4)
Prepares Task ID-2252655 (Main Online Event task)
Prepares Task ID-2283796 (Event B2Basics / Registration Flow)
Prepares Task ID-2299857 (Event Design Review)
---
 addons/website_event/i18n/website_event.pot   | 49 +++++-------
 .../website_event/views/event_templates.xml   | 80 +++++++++++--------
 2 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/addons/website_event/i18n/website_event.pot b/addons/website_event/i18n/website_event.pot
index 8b72bc6f9cb..fc88fec0533 100644
--- a/addons/website_event/i18n/website_event.pot
+++ b/addons/website_event/i18n/website_event.pot
@@ -17,7 +17,12 @@ msgstr ""
 
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.registration_template
-msgid "(Available seats:"
+msgid "(only"
+msgstr ""
+
+#. module: website_event
+#: model_terms:ir.ui.view,arch_db:website_event.registration_complete
+msgid "(ref:"
 msgstr ""
 
 #. module: website_event
@@ -157,7 +162,14 @@ msgstr ""
 
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.index_topbar
-msgid "<span class=\"navbar-brand h4 my-0\">Events</span>"
+msgid "<span class=\"navbar-brand h4 my-0 mr-auto\">Events</span>"
+msgstr ""
+
+#. module: website_event
+#: model_terms:ir.ui.view,arch_db:website_event.registration_template
+msgid ""
+"<span class=\"py-2\">Tickets</span>\n"
+"                        <span class=\"close d-none\">×</span>"
 msgstr ""
 
 #. module: website_event
@@ -346,11 +358,6 @@ msgstr ""
 msgid "Drag this block and drop it in your page."
 msgstr ""
 
-#. module: website_event
-#: model_terms:ir.ui.view,arch_db:website_event.registration_complete
-msgid "E-mail"
-msgstr ""
-
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.registration_attendee_details
 msgid "Email"
@@ -501,7 +508,6 @@ msgstr ""
 
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.registration_attendee_details
-#: model_terms:ir.ui.view,arch_db:website_event.registration_complete
 msgid "Name"
 msgstr ""
 
@@ -541,11 +547,6 @@ msgstr ""
 msgid "Past Events"
 msgstr ""
 
-#. module: website_event
-#: model_terms:ir.ui.view,arch_db:website_event.registration_complete
-msgid "Phone"
-msgstr ""
-
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.registration_attendee_details
 msgid "Phone <small>(Optional)</small>"
@@ -573,11 +574,6 @@ msgstr ""
 msgid "Questions"
 msgstr ""
 
-#. module: website_event
-#: model_terms:ir.ui.view,arch_db:website_event.registration_complete
-msgid "Reference"
-msgstr ""
-
 #. module: website_event
 #: code:addons/website_event/models/event_event.py:0
 #: model_terms:ir.ui.view,arch_db:website_event.registration_template
@@ -668,11 +664,6 @@ msgstr ""
 msgid "This shortcut will bring you right back to the event form."
 msgstr ""
 
-#. module: website_event
-#: model_terms:ir.ui.view,arch_db:website_event.registration_complete
-msgid "Ticket"
-msgstr ""
-
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.registration_attendee_details
 msgid "Ticket #"
@@ -683,13 +674,6 @@ msgstr ""
 msgid "Ticket Sales starting on"
 msgstr ""
 
-#. module: website_event
-#: model_terms:ir.ui.view,arch_db:website_event.registration_template
-msgid ""
-"Tickets\n"
-"                        <span class=\"close d-none\">×</span>"
-msgstr ""
-
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.registration_template
 msgid "Tickets for this Event are <b>Sold Out</b>"
@@ -762,6 +746,11 @@ msgid ""
 "see when registrating."
 msgstr ""
 
+#. module: website_event
+#: model_terms:ir.ui.view,arch_db:website_event.registration_template
+msgid "available)"
+msgstr ""
+
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.event_description_full
 msgid "iCal/Outlook"
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index 731a27d103b..8b83422e8e9 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -429,7 +429,7 @@
             <div class="container overflow-hidden">
                 <div class="row no-gutters mt-n4 mb-3">
                     <!-- Description -->
-                    <div id="o_wevent_event_main_col" class="col-lg-8 bg-white px-5 pt48 pb-0 shadow-sm">
+                    <div id="o_wevent_event_main_col" class="col-lg-8 bg-white px-3 pt-5 pb-0 shadow-sm">
                         <span t-field="event.description" itemprop="description"/>
                     </div>
                     <div class="col-lg-4 bg-light shadow-sm d-print-none">
@@ -554,14 +554,14 @@
                             <i class="fa fa-check mr-2"/>Registered
                         </span>
                     </div>
-                    <a href="#" role="button" class="btn o_wevent_registration_btn text-left pl-0" data-target="#o_wevent_tickets_collapse">
-                        Tickets
+                    <a href="#" role="button" class="btn o_wevent_registration_btn text-left" data-target="#o_wevent_tickets_collapse">
+                        <span class="py-2">Tickets</span>
                         <span class="close d-none">×</span>
                     </a>
                 </div>
                 <div id="o_wevent_tickets_collapse" class="collapse show">
-                    <div t-foreach="tickets" t-as="ticket" class="row px-3 mx-0 bg-light border-bottom">
-                        <div class="col-8 py-3" itemscope="itemscope" itemtype="http://schema.org/Offer">
+                    <div t-foreach="tickets" t-as="ticket" class="row px-3 py-3 mx-0 bg-light border-bottom">
+                        <div class="col-md-8 col-xs-12 p-0" itemscope="itemscope" itemtype="http://schema.org/Offer">
                             <h5 itemprop="name" t-field="ticket.name" class="my-0"/>
                             <t t-if="ticket.description">
                                 <small t-field="ticket.description" class="text-muted py-2"/>
@@ -570,7 +570,7 @@
                             <small t-if="ticket.end_sale_date and ticket.sale_available and not ticket.is_expired" class="text-muted mr-3" itemprop="availabilityEnds">Sales end on <span itemprop="priceValidUntil" t-field="ticket.end_sale_date"/></small>
                             <small t-if="ticket.start_sale_date and not ticket.sale_available and not ticket.is_expired" class="text-muted mr-3" itemprop="availabilityEnds">Sales start on <span itemprop="priceValidUntil" t-field="ticket.start_sale_date"/></small>
                         </div>
-                        <div class="col-4 d-flex align-items-center">
+                        <div class="col-md-4 col-xs-12 p-0 d-flex align-items-center justify-content-between">
                             <div class="o_wevent_registration_multi_select"/>
                             <div class="w-auto ml-auto">
                                 <select t-if="not ticket.is_expired and ticket.sale_available"
@@ -593,7 +593,10 @@
                     <div class="row no-gutters">
                         <div class="col-md-4 offset-md-8 py-2 pl-md-0 pr-md-2">
                             <button type="submit" class="btn btn-primary o_wait_lazy_js btn-block a-submit" disabled="" t-attf-id="#{event.id}">
-                                Register<t t-if="event.seats_limited"> (Available seats: <t t-esc="event.seats_available"/>)</t>
+                                Register
+                                <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
+                                    (only <t t-esc="event.seats_available"/> available)
+                                </t>
                             </button>
                         </div>
                     </div>
@@ -627,7 +630,12 @@
                         </div>
                     </div>
                     <div class="col-lg-4 pt-3 pt-lg-0 pl-2 pl-lg-0">
-                        <button type="submit" class="btn btn-primary o_wait_lazy_js btn-block a-submit" t-attf-id="#{event.id}">Register</button>
+                        <button type="submit" class="btn btn-primary o_wait_lazy_js btn-block a-submit" t-attf-id="#{event.id}">
+                            Register
+                            <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
+                                (only <t t-esc="event.seats_available"/> available)
+                            </t>
+                        </button>
                     </div>
                 </div>
             </div>
@@ -689,34 +697,40 @@
 <template id="registration_complete" name="Registration Completed">
     <t t-call="website_event.layout">
         <div class="container my-5">
-            <div class="row">
+            <div class="row mb-3">
                 <div class="col-12">
                     <h2>Registration confirmed!</h2>
-                    <table class="table table-striped my-4">
-                        <thead class="bg-secondary">
-                            <tr>
-                                <th>Name</th>
-                                <th>Ticket</th>
-                                <th>E-mail</th>
-                                <th>Phone</th>
-                                <th>Reference</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <t t-foreach="attendees" t-as="attendee">
-                                <tr>
-                                    <td><t t-if="attendee.name" t-esc="attendee.name"/><t t-else="">N/A</t></td>
-                                    <td><i class="fa fa-ticket"></i> <t t-if='attendee.event_ticket_id'><t t-esc="attendee.event_ticket_id.name"/></t><t t-if='not attendee.event_ticket_id'>N/A</t></td>
-                                    <td><t t-if="attendee.email" t-esc="attendee.email"/><t t-else="">N/A</t></td>
-                                    <td><t t-if="attendee.phone" t-esc="attendee.phone"/><t t-else="">N/A</t></td>
-                                    <td><t t-esc="attendee.id"/></td>
-                                </tr>
-                            </t>
-                        </tbody>
-                    </table>
-                </div>
-                <div class="col-lg-8">
                     <h3><a t-attf-href="/event/#{slug(event)}"><t t-esc="event.name"/></a></h3>
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col-md-4 col-xs-12 mt-3" t-foreach="attendees" t-as="attendee">
+                    <div class="d-flex flex-column">
+                        <span class="font-weight-bold">
+                            <t t-if="attendee.name" t-esc="attendee.name"/>
+                            <t t-else="">N/A</t>
+                        </span>
+                        <span>
+                            <i class="fa fa-envelope mr-2   "></i>
+                            <t t-if="attendee.email" t-esc="attendee.email"/>
+                            <t t-else="">N/A</t>
+                        </span>
+                        <span>
+                            <i class="fa fa-phone mr-2"></i>
+                            <t t-if="attendee.phone" t-esc="attendee.phone"/>
+                            <t t-else="">N/A</t>
+                        </span>
+                        <span>
+                            <i class="fa fa-ticket mr-2"></i>
+                            <t t-if="attendee.event_ticket_id" t-esc="attendee.event_ticket_id.name"/>
+                            <t t-else="">N/A</t>
+                            (ref: <t t-esc="attendee.id"/>)
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col-lg-8">
                     <p><b>Start</b> <span itemprop="startDate" t-esc="event.date_begin_located"/><br/> <b>End</b> <span itemprop="endDate" t-esc="event.date_end_located"/></p>
                     <div id="add_to_calendar" class="mt-4">
                         <a role="button" class="btn btn-primary" t-att-href="iCal_url">