Update donations widget (#16405)

* Update donations widget

* fix some tests

* fix some tests

* update css

* fix test

* improve wording

* fix tests

6 files changed, 25 insertions, 177 deletions

diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index c181e3f290..a2db0401d5 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -177,7 +177,6 @@ class CoreHome extends \Piwik\Plugin
         $jsFiles[] = "plugins/CoreHome/javascripts/sparkline.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/corehome.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/top_controls.js";
-        $jsFiles[] = "plugins/CoreHome/javascripts/donate.js";
         $jsFiles[] = "libs/jqplot/jqplot-custom.min.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/color_manager.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/notification.js";
diff --git a/plugins/CoreHome/javascripts/donate.js b/plugins/CoreHome/javascripts/donate.js
deleted file mode 100644
index c0ab5ddfc2..0000000000
--- a/plugins/CoreHome/javascripts/donate.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-(function ($) {
-
-    $(document).ready(function () {
-
-        var donateAmounts = [0, 30, 60, 90, 120];
-
-        // returns the space between each donation amount in the donation slider
-        var getTickWidth = function (slider) {
-            var effectiveSliderWidth = $('.slider-range', slider).width() - $('.slider-position', slider).width();
-            return effectiveSliderWidth / (donateAmounts.length - 1);
-        };
-
-        // returns the position index on a slider based on a x coordinate value
-        var getPositionFromPageCoord = function (slider, pageX) {
-            return Math.round((pageX - $('.slider-range', slider).offset().left) / getTickWidth(slider));
-        };
-
-        // set's the correct amount text & smiley face image based on the position of the slider
-        var setSmileyFaceAndAmount = function (slider, pos) {
-            // set text yearly amount
-            $('.slider-donate-amount', slider).text('$' + donateAmounts[pos] + '/' + _pk_translate('Intl_Year_Short'));
-
-            // set the right smiley face
-            $('.slider-smiley-face').attr('src', 'plugins/Morpheus/images/smileyprog_' + pos + '.png');
-
-            // set the hidden option input for paypal
-            var option = Math.max(1, pos);
-            $('.piwik-donate-call input[name=os0]').val("Option " + option);
-        };
-
-        // move's a slider's position to a specific spot
-        var moveSliderPosition = function (slider, to) {
-            // make sure 'to' is valid
-            if (to < 0) {
-                to = 0;
-            }
-            else if (to >= donateAmounts.length) {
-                to = donateAmounts.length - 1;
-            }
-
-            // set the slider position
-            var left = to * getTickWidth(slider);
-            if (left == 0) {
-                left = -1; // at position 0 we move one pixel left to cover up some of slider bar
-            }
-
-            $('.slider-position', slider).css({
-                left: left + 'px'
-            });
-
-            // reset the smiley face & amount based on the new position
-            setSmileyFaceAndAmount(slider, to);
-        };
-
-        // when a slider is clicked, set the amount & smiley face appropriately
-        $('body').on('click', '.piwik-donate-slider>.slider-range', function (e) {
-            var slider = $(this).parent(),
-                currentPageX = $('.slider-position', this).offset().left,
-                currentPos = getPositionFromPageCoord(slider, currentPageX),
-                pos = getPositionFromPageCoord(slider, e.pageX);
-
-            // if the closest position is the current one, use the other position since
-            // the user obviously wants to move the slider.
-            if (currentPos == pos) {
-                // if click is to right, go forward one, else backwards one
-                if (e.pageX > currentPageX) {
-                    ++pos;
-                }
-                else {
-                    --pos;
-                }
-            }
-
-            moveSliderPosition(slider, pos);
-        });
-
-        // when the smiley icon is clicked, move the position up one to demonstrate how to use the slider
-        $('body').on('click', '.piwik-donate-slider .slider-smiley-face,.piwik-donate-slider .slider-donate-amount',
-            function (e) {
-                var slider = $(this).closest('.piwik-donate-slider'),
-                    currentPageX = $('.slider-position', slider).offset().left,
-                    currentPos = getPositionFromPageCoord(slider, currentPageX);
-
-                moveSliderPosition(slider, currentPos + 1);
-            }
-        );
-
-        // stores the current slider being dragged
-        var draggingSlider = false;
-
-        // start dragging on mousedown for a slider's position bar
-        $('body').on('mousedown', '.piwik-donate-slider .slider-position', function () {
-            draggingSlider = $(this).parent().parent();
-        });
-
-        // move the slider position if currently dragging when the mouse moves anywhere over the entire page
-        $('body').on('mousemove', function (e) {
-            if (draggingSlider) {
-                var slider = draggingSlider.find('.slider-range'),
-                    sliderPos = slider.find('.slider-position'),
-                    left = e.pageX - slider.offset().left;
-
-                // only move slider if the mouse x-coord is still on the slider (w/ some padding for borders)
-                if (left <= slider.width() - sliderPos.width() + 2
-                    && left >= -2) {
-                    sliderPos.css({left: left + 'px'});
-
-                    var closestPos = Math.round(left / getTickWidth(draggingSlider));
-                    setSmileyFaceAndAmount(draggingSlider, closestPos);
-                }
-            }
-        });
-
-        // stop dragging and normalize a slider's position on mouseup over the entire page
-        $('body').on('mouseup', function () {
-            if (draggingSlider) {
-                var sliderPos = $('.slider-position', draggingSlider),
-                    slider = sliderPos.parent();
-
-                if (sliderPos.length) {
-                    // move the slider to the nearest donation amount position
-                    var pos = getPositionFromPageCoord(draggingSlider, sliderPos.offset().left);
-                    moveSliderPosition(draggingSlider, pos);
-                }
-
-                draggingSlider = false; // stop dragging
-            }
-        });
-
-        // event for programmatically changing the position
-        $('body').on('piwik:changePosition', '.piwik-donate-slider', function (e, data) {
-            moveSliderPosition(this, data.position);
-        });
-    });
-
-}(jQuery));
diff --git a/plugins/CoreHome/lang/en.json b/plugins/CoreHome/lang/en.json
index 06cb3f9c76..a3612f6e42 100644
--- a/plugins/CoreHome/lang/en.json
+++ b/plugins/CoreHome/lang/en.json
@@ -20,7 +20,6 @@
         "DonateCall1": "Matomo will always cost you nothing to use, but that doesn't mean it costs us nothing to make.",
         "DonateCall2": "Matomo needs your continued support to grow and thrive.",
         "DonateCall3": "If you feel that Matomo has added significant value to your business or endeavour, %1$splease consider donating%2$s or %3$spurchasing a premium feature%4$s. Every penny will help.",
-        "DonateFormInstructions": "Click on the slider to select an amount, then click subscribe to donate.",
         "EndShortcut": "End",
         "EnterZenMode": "Enter Zen mode (hide the menus)",
         "ExitZenMode": "Exit Zen mode (show the menus)",
@@ -32,7 +31,7 @@
         "ShowExportUrl": "Show Export URL",
         "HideExportUrl": "Hide Export URL",
         "HomeShortcut": "Home",
-        "HowMuchIsPiwikWorth": "How much is Matomo worth to you?",
+        "SupportUsOn": "Support us on",
         "IncludeRowsWithLowPopulation": "Rows with low population are hidden %s Show all rows",
         "InjectedHostEmailBody": "Hello, I tried to access Matomo today and encountered the unknown hostname warning.",
         "InjectedHostEmailSubject": "Matomo was accessed with an unknown hostname: %s",
@@ -45,7 +44,8 @@
         "VisitTypeReturning": "Returning",
         "VisitTypeReturningCustomer": "Returning Customer",
         "MainNavigation": "Main navigation",
-        "MakeOneTimeDonation": "Make a one time donation, instead.",
+        "YourDonationWillHelp": "Your donation will directly help fund new features and improvements for this open-source analytics platform. This means the community will always benefit from a tool that protects privacy and lets you stay in control of your data.",
+        "ThanksFromAllOfUs": "Thank you from all of us at Matomo!",
         "Menu": "Menu",
         "NoPrivilegesAskPiwikAdmin": "You are logged in as '%1$s' but it seems you don't have any permission set in Matomo. %2$s Ask your Matomo administrator (click to email)%3$s to give you 'view' access to a website.",
         "OnlyForSuperUserAccess": "This widget is displayed in the default dashboard only to users having Super User access.",
diff --git a/plugins/CoreHome/stylesheets/_donate.less b/plugins/CoreHome/stylesheets/_donate.less
index be304efbff..f3765a23c5 100644
--- a/plugins/CoreHome/stylesheets/_donate.less
+++ b/plugins/CoreHome/stylesheets/_donate.less
@@ -10,7 +10,7 @@
     font-size: 1.2em;
     font-weight: bold;
     display: block;
-    margin: 0 1em 0 0;
+    margin: 1em 1em 0.5em 0;
 }
 
 .piwik-donate-slider {
diff --git a/plugins/CoreHome/stylesheets/layout.less b/plugins/CoreHome/stylesheets/layout.less
index d4e116a9db..67967f20ca 100644
--- a/plugins/CoreHome/stylesheets/layout.less
+++ b/plugins/CoreHome/stylesheets/layout.less
@@ -3,6 +3,14 @@
   margin-bottom: 0;
 }
 
+ul.browser-default {
+  list-style-type: disc;
+  li {
+    margin-left: 20px;
+    list-style-type: disc;
+  }
+}
+
 nav {
   background-color: @theme-color-header-background !important;
 
diff --git a/plugins/CoreHome/templates/_donate.twig b/plugins/CoreHome/templates/_donate.twig
index 99e713ec82..06d7a4d836 100644
--- a/plugins/CoreHome/templates/_donate.twig
+++ b/plugins/CoreHome/templates/_donate.twig
@@ -9,39 +9,22 @@
         {% endif %}
     </div>
 
-    <span id="piwik-worth">{{ 'CoreHome_HowMuchIsPiwikWorth'|translate }}</span>
+    <span id="piwik-worth">{{ 'CoreHome_SupportUsOn'|translate }}</span>
 
-    <div class="donate-form-instructions">({{ 'CoreHome_DonateFormInstructions'|translate }})</div>
+    <ul class="browser-default">
+        <li><a href="https://www.patreon.com/matomo" target="_blank" rel="noreferrer noopener">Patreon</a></li>
+        <li><a href="https://ko-fi.com/matomo" target="_blank" rel="noreferrer noopener">Ko-fi</a></li>
+        <li><a href="https://liberapay.com/Matomo" target="_blank" rel="noreferrer noopener">Liberapay</a></li>
+        <li><a href="https://opencollective.com/matomo-analytics" target="_blank" rel="noreferrer noopener">Open Collective</a></li>
+        <li><a href="https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=RPL23NJURMTFA" target="_blank" rel="noreferrer noopener">PayPal</a></li>
+    </ul>
 
-    <form action="index.php?module=CoreHome&action=redirectToPaypal&idSite=1" method="post" target="_blank">
-        <div class="piwik-donate-slider">
-            <div class="slider-range">
-                <div class="slider-position"></div>
-            </div>
-            <div style="display:inline-block;float:right;">
-                <div class="slider-donate-amount">$30/{{ 'Intl_Year_Short'|translate }}</div>
+    <p style="margin-top: 1em;">
+        {{ 'CoreHome_YourDonationWillHelp'|translate }}
+        <br><br>
+        <strong>{{ 'CoreHome_ThanksFromAllOfUs'|translate }}</strong>
+    </p>
 
-                <img class="slider-smiley-face" width="40" height="40" src="plugins/Morpheus/images/smileyprog_1.png"/>
-            </div>
-
-            <input type="hidden" name="os0" value="Option 1"/>
-        </div>
-
-        <div class="donate-submit">
-            <input type="image" src="plugins/Morpheus/images/paypal_subscribe.png" border="0" name="submit"
-                title="{{ 'CoreHome_SubscribeAndBecomePiwikSupporter'|translate }}"/>
-			<a class="donate-spacer">{{ 'CoreHome_MakeOneTimeDonation'|translate }}</a>
-            <a href="index.php?module=CoreHome&action=redirectToPaypal&idSite=1&onetime=true"
-               rel="noreferrer noopener" target="_blank" class="donate-one-time">{{ 'CoreHome_MakeOneTimeDonation'|translate }}</a>
-        </div>
-
-        <!-- to cache images -->
-        <img style="display:none;" src="plugins/Morpheus/images/smileyprog_0.png"/>
-        <img style="display:none;" src="plugins/Morpheus/images/smileyprog_1.png"/>
-        <img style="display:none;" src="plugins/Morpheus/images/smileyprog_2.png"/>
-        <img style="display:none;" src="plugins/Morpheus/images/smileyprog_3.png"/>
-        <img style="display:none;" src="plugins/Morpheus/images/smileyprog_4.png"/>
-    </form>
     {% if footerMessage is defined %}
         <div class="form-description">
             {{ footerMessage }}