N°6167 - Introduce API for the content of the Welcome Popup (#505)

* API for the content of the Welcome Popup

* Apply suggestions from code review

* N°7410 - Refactor code to match conventions

* N°7410 - Refactor to new design

* N°7410 - Review adjustments

* N°7410 - Review adjustments

* N°7410 - Update translations

* N°7410 - Update setup complied file

* Update sources/Application/WelcomePopup/Provider/DefaultProvider.php

---------

Co-authored-by: Molkobain <lajarige.guillaume@free.fr>

templates/application/welcome_popup/layout.html.twig

@@ -0,0 +1,30 @@
+<div id="ibo-welcome-popup--dialog" class="ibo-welcome-popup--dialog ibo-is-hidden"
+    data-role="ibo-welcome-popup--dialog"
+    data-title="{{ 'UI:WelcomeMenu:Title'|dict_s }}"
+>
+    {% if aProvidersMessagesData|length > 1 %}
+        <ul class="ibo-welcome-popup--messages-stack">
+            {% for aProviderMessageData in aProvidersMessagesData %}
+                <li>
+                    <a class="ibo-welcome-popup--stack-item {% if loop.index == 1 %}ibo-is-active{% endif %}"
+                        data-role="ibo-welcome-popup--stack-item"
+                        data-uuid="{{ aProviderMessageData.uuid }}"
+                        href="#"
+                    >
+                        <div class="ibo-welcome-popup--stack-item-icon">
+                            <img src="{{ get_absolute_url_app_root() ~ aProviderMessageData.provider_icon_rel_path }}" />
+                        </div>
+                        <div class="ibo-welcome-popup--stack-item-title" data-tooltip-content="{{ aProviderMessageData.message.GetTitle() }}">{{ aProviderMessageData.message.GetTitle() }}</div>
+                    </a>
+                </li>
+            {% endfor %}
+        </ul>
+    {% endif %}
+    <div class="ibo-welcome-popup--message-content-wrapper">
+        {% for aProviderMessageData in aProvidersMessagesData %}
+            {% include aProviderMessageData.message.GetTWIGTemplateRelPath() with {'oMessage': aProviderMessageData.message, 'sUUID': aProviderMessageData.uuid, 'bIsActive': loop.index == 1} %}
+        {% endfor %}
+    </div>
+</div>
+
+

templates/application/welcome_popup/layout.ready.js.twig

@@ -0,0 +1,93 @@
+const oWelcomePopupDialogElem = $('#ibo-welcome-popup--dialog');
+
+// Dialog is hidden by default to avoid a flash of unstyled content
+oWelcomePopupDialogElem.removeClass('ibo-is-hidden');
+
+// Prepare dialog
+oWelcomePopupDialogElem.dialog({
+	modal: true,
+	width: '70%',
+    maxHeight: $(window).innerHeight() * 0.8,
+	autoOpen: true,
+	title: oWelcomePopupDialogElem.attr('data-title'),
+    open: function () {
+        // Focus on acknowledge button
+        oWelcomePopupDialogElem.closest('[role="dialog"]').find('.ui-dialog-buttonset .ibo-is-primary:first').trigger('focus');
+    },
+	close: function() {
+        oWelcomePopupDialogElem.remove();
+    },
+    buttons: [
+        {
+            text: "Remind me later",
+            class: 'ibo-is-alternative',
+            click: function() {
+                oWelcomePopupDialogElem.dialog( "close" );
+            }
+        },
+        {
+            text: "Got it",
+            class: 'ibo-is-regular ibo-is-primary',
+            click: function() {
+                oWelcomePopupDialogElem.trigger('acknowledge_message.itop.welcome_popup');
+            }
+        }
+    ]
+ });
+
+// Bind events
+oWelcomePopupDialogElem
+        // - On stack item click, display active message
+        .on('click', '[data-role="ibo-welcome-popup--stack-item"]', function () {
+            const sUUID = $(this).attr('data-uuid');
+            const sUUIDEscapedForSelector = sUUID.replace(/\\/g, '\\\\');
+
+            // Display active stack item
+            oWelcomePopupDialogElem.find('[data-role="ibo-welcome-popup--stack-item"]').removeClass('ibo-is-active');
+            oWelcomePopupDialogElem.find('[data-role="ibo-welcome-popup--stack-item"][data-uuid="' + sUUIDEscapedForSelector + '"]').addClass('ibo-is-active');
+
+            // Display active content
+            oWelcomePopupDialogElem.find('[data-role="ibo-welcome-popup--message-content"]').removeClass('ibo-is-active');
+            oWelcomePopupDialogElem.find('[data-role="ibo-welcome-popup--message-content"][data-uuid="' + sUUIDEscapedForSelector + '"]').addClass('ibo-is-active');
+        })
+        .on('acknowledge_message.itop.welcome_popup', function (oEvent, oData) {
+            const sUUID = oData?.uuid ?? oWelcomePopupDialogElem.find('.ibo-is-active[data-role="ibo-welcome-popup--message-content"]').attr('data-uuid');
+            const sUUIDEscapedForSelector = sUUID.replace(/\\/g, '\\\\');
+
+            // Acknowledge message on server
+            $.post(
+                '{{ sEndpointAbsURIForAcknowledgeMessage }}',
+                {
+                    message_uuid: sUUID
+                },
+                'json'
+            )
+            .done(function(oResponse) {
+                if (oResponse.success) {
+                    // Mark message as acknowledged
+                    oWelcomePopupDialogElem.find('[data-role="ibo-welcome-popup--stack-item"][data-uuid="' + sUUIDEscapedForSelector + '"]').addClass('ibo-is-acknowledged');
+
+                    // Display next message if any
+                    const oNextStackItemelem = oWelcomePopupDialogElem.find('[data-role="ibo-welcome-popup--stack-item"]:not(.ibo-is-acknowledged):first');
+                    if (oNextStackItemelem.length > 0) {
+                        oNextStackItemelem.trigger('click');
+                    } else {
+                        // Close dialog
+                        oWelcomePopupDialogElem.dialog('close');
+                    }
+                } else {
+                    // Display error message
+                    CombodoModal.OpenErrorModal(oResponse.error_message);
+                }
+            })
+            .fail(function(oXHR, sTextStatus, sErrorThrown) {
+                // Display error message
+                CombodoModal.OpenErrorModal(sErrorThrown);
+            });
+        });
+
+// - Close the dialog when clicking outside of it
+$('.ui-widget-overlay').on('click', function() { oWelcomePopupDialogElem.dialog('close'); } );
+
+
+

templates/application/welcome_popup/templates/layout.html.twig

@@ -0,0 +1,35 @@
+<div class="ibo-welcome-popup--message-content
+    {% if bIsActive == true %}ibo-is-active{% endif %}
+    {% block wpMessageContentExtraCssClasses %}{% endblock %}"
+    data-role="ibo-welcome-popup--message-content"
+    data-uuid="{{ sUUID }}"
+>
+    {% block wpMessageContentInner %}
+        {% block wpMessageTextsOuter %}
+            <div class="ibo-welcome-popup--message-texts">
+                {% block wpMessageTextsInner %}
+                    {% block wpMessageTitleOuter %}
+                        <h2 class="ibo-welcome-popup--message-title">
+                            {% block wpMessageTitleInner %}
+                                {{ oMessage.GetTitle() }}
+                            {% endblock %}
+                        </h2>
+                    {% endblock %}
+                    {% block wpMessageDescriptionOuter %}
+                        <div class="ibo-welcome-popup--message-description ibo-is-html-content">
+                            {% block wpMessageDescriptionInner %}
+                                {# Mind that only description should have a "raw" filter as it can contains HTML #}
+                                {{ oMessage.GetDescription()|raw }}
+                            {% endblock %}
+                        </div>
+                    {% endblock %}
+                {% endblock %}
+            </div>
+        {% endblock %}
+        {% block wpMessageIllustrationOuter %}
+            {% if oMessage.HasIllustration() %}
+                <div class="ibo-welcome-popup--message-illustration" style="background-image: url('{{ oMessage.GetIllustrationAbsURI() }}')"></div>
+            {% endif %}
+        {% endblock %}
+    {% endblock %}
+</div>

templates/application/welcome_popup/templates/left-illustration-right-title-description.html.twig

@@ -0,0 +1,3 @@
+{% extends 'templates/application/welcome_popup/templates/layout.html.twig' %}
+
+{% block wpMessageContentExtraCssClasses %}{{ parent() }} ibo-is-illustration-on-left-side{% endblock %}

templates/application/welcome_popup/templates/left-title-description-right-illustration.html.twig

@@ -0,0 +1,3 @@
+{% extends 'templates/application/welcome_popup/templates/layout.html.twig' %}
+
+{# Nothing there, it's exactly the default template. The file only exists to ease people understanding what the default layout is. #}

templates/pages/backoffice/welcome_popup/welcome_popup.html.twig

@@ -1,14 +0,0 @@
-<div id="welcome_popup">
-    <div class="ibo-welcome-popup--image ibo-svg-illustration--container">
-        {{ source("images/illustrations/undraw_relaunch_day.svg") }}
-    </div>
-    <div class="ibo-welcome-popup--text">
-        <div>
-            {{ 'UI:WelcomeMenu:Text'| dict_s|raw }}
-        </div>
-        <div class="ibo-welcome-popup--text--options">
-        <input type="checkbox" checked id="display_welcome_popup"/><label for="display_welcome_popup">{{'UI:DisplayThisMessageAtStartup'| dict_s}}</label>
-        </div>
-    </div>
-
-</div>

templates/pages/backoffice/welcome_popup/welcome_popup.ready.js.twig

@@ -1,14 +0,0 @@
-$('#welcome_popup').dialog( { width:'60%', height: 'auto', title: '{{ 'UI:WelcomeMenu:Title'|dict_s }}', autoOpen: true, modal:true,
-    close: function() {
-        var bDisplay = $('#display_welcome_popup:checked').length;
-        SetUserPreference('welcome_popup', bDisplay, true);
-    },
-    buttons: [{
-        text: "{{ 'UI:Button:Ok'|dict_s }}", click: function() {
-            $(this).dialog( "close" ); $(this).remove();
-        }}],
-});
-if ($('#welcome_popup').height() > ($(window).height()-70))
-{
-    $('#welcome_popup').height($(window).height()-70);
-}