From 864b61834f96aaa5462d8b947aa386fda5f68d82 Mon Sep 17 00:00:00 2001
From: Alexander Borsuk <me@alex.bio>
Date: Tue, 19 Dec 2023 18:16:00 +0100
Subject: [PATCH] Cleaner donate methods

- Add OpenCollective
- Show PayPal earlier
- Hide Apple Pay if it's not supported
- Show Google Pay only on Desktop and Android Chrome
- Change Visa logo to Visa + MC
- Remove all crypto buttons except Bitcoin

Signed-off-by: Alexander Borsuk <me@alex.bio>
---
 static/images/donates/opencollective.svg |  1 +
 static/images/donates/visa_mc.svg        |  1 +
 templates/shortcodes/donate_buttons.html | 67 +++++++++++++++++++-----
 3 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 static/images/donates/opencollective.svg
 create mode 100644 static/images/donates/visa_mc.svg

diff --git a/static/images/donates/opencollective.svg b/static/images/donates/opencollective.svg
new file mode 100644
index 00000000..c8b3db1b
--- /dev/null
+++ b/static/images/donates/opencollective.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill-rule="evenodd"><path d="M52.402 31.916c0 4.03-1.17 7.895-3.178 11.087l8.196 8.23c4.014-5.375 6.523-12.094 6.523-19.318s-2.51-13.942-6.523-19.318l-8.196 8.23c2.007 3.192 3.178 6.887 3.178 11.087z" fill="#b8d3f4"/><path d="M32.004 52.41c-11.207 0-20.406-9.24-20.406-20.493s9.2-20.493 20.406-20.493c4.182 0 7.86 1.176 11.04 3.36l8.196-8.23C45.887 2.52 39.197 0 32.004 0 14.44 0 .057 14.278.057 32.084S14.44 64 32.004 64c7.36 0 14.05-2.52 19.403-6.55l-8.196-8.23c-3.178 2.016-7.025 3.192-11.207 3.192z" fill="#3385ff"/></svg>
\ No newline at end of file
diff --git a/static/images/donates/visa_mc.svg b/static/images/donates/visa_mc.svg
new file mode 100644
index 00000000..1a206314
--- /dev/null
+++ b/static/images/donates/visa_mc.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 122 122" viewBox="0 0 122 122" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#262860"/><stop offset="1" stop-color="#3c429a"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="22.214" x2="104.218" xlink:href="#a" y1="98.659" y2="98.119"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="22.212" x2="104.216" xlink:href="#a" y1="98.453" y2="97.914"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="22.211" x2="104.215" xlink:href="#a" y1="98.206" y2="97.667"/><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="22.212" x2="104.216" xlink:href="#a" y1="98.392" y2="97.852"/><path d="m33.8 64.8c-.2-.2-.5-.4-.8-.6-.3-.1-.7-.2-1.1-.2-.2 0-.4 0-.6.1-.2 0-.4.1-.7.2-.2.1-.4.2-.6.4s-.4.4-.5.6c-.2-.4-.5-.7-.9-.9s-.8-.3-1.3-.3h-.5c-.2 0-.4.1-.5.2-.2.1-.3.2-.5.3s-.3.3-.4.5v-.8h-1.4v6.7h1.4v-3.8c0-.3 0-.5.1-.8.1-.2.2-.4.4-.6s.3-.3.5-.3c.2-.1.4-.1.7-.1.5 0 .9.2 1.1.5.3.3.4.7.4 1.3v3.8h1.4v-3.8c0-.3 0-.5.1-.8.1-.2.2-.4.4-.6s.3-.3.5-.3c.2-.1.4-.1.7-.1.5 0 .9.2 1.1.5.3.3.4.7.4 1.3v3.8h1.4v-4.3c0-.4-.1-.8-.2-1.1-.2-.3-.4-.5-.6-.8zm7.5.3c-.2-.3-.5-.5-.9-.7-.3-.2-.8-.3-1.3-.3s-.9.1-1.3.3-.8.4-1.1.7-.5.7-.7 1.1-.3.9-.3 1.4.1 1 .3 1.4.4.8.7 1.1.7.6 1.1.7c.4.2.9.3 1.3.3.5 0 .9-.1 1.3-.3.3-.2.6-.4.9-.7v.9h1.5v-6.8h-1.5zm0 3.4c-.1.3-.2.5-.4.7s-.4.3-.6.5c-.3.1-.5.2-.8.2s-.6-.1-.9-.2-.5-.3-.6-.5c-.2-.2-.3-.4-.4-.7s-.1-.5-.1-.8 0-.6.1-.8c.1-.3.2-.5.4-.7s.4-.4.6-.5c.3-.1.5-.2.9-.2.3 0 .6.1.8.2.3.1.5.3.6.5.2.2.3.4.4.7s.1.6.1.9c0 .1 0 .4-.1.7zm8.3-.9c-.4-.3-1-.5-1.7-.6l-.7-.1c-.2 0-.3-.1-.4-.1s-.3-.1-.4-.1c-.1-.1-.2-.1-.2-.2-.1-.1-.1-.2-.1-.3 0-.2.1-.4.3-.6.2-.1.5-.2.9-.2.2 0 .4 0 .6.1.2 0 .4.1.6.1.2.1.4.1.5.2.2.1.3.1.4.2l.6-1.2c-.4-.2-.8-.4-1.2-.5-.5-.1-1-.2-1.5-.2-.4 0-.8.1-1.2.2-.3.1-.6.2-.9.4-.2.2-.4.4-.6.7-.1.3-.2.6-.2.9 0 .5.2 1 .6 1.3s1 .6 1.7.7l.7.1c.4.1.7.1.9.3.2.1.3.3.3.5 0 .3-.1.5-.4.6s-.6.2-1.2.2c-.3 0-.5 0-.7-.1-.2 0-.4-.1-.6-.2s-.3-.1-.5-.2c-.1-.1-.3-.2-.4-.3l-.7 1.1c.2.2.5.3.8.4s.5.2.8.3.5.1.7.1h.6c.5 0 .9-.1 1.3-.2s.7-.3 1-.5.5-.4.6-.7.2-.6.2-.9c.1-.4-.1-.8-.5-1.2zm13.9-2.5c-.3-.3-.6-.6-1-.7-.4-.2-.8-.3-1.3-.3s-1 .1-1.4.3-.8.4-1.1.7-.5.7-.7 1.1-.2.9-.2 1.5c0 .5.1 1 .3 1.5.2.4.4.8.7 1.1s.7.6 1.1.7c.4.2.9.3 1.4.3s1-.1 1.5-.2.9-.4 1.3-.7l-.7-1.1c-.3.2-.6.4-.9.5s-.7.2-1 .2c-.2 0-.5 0-.7-.1l-.6-.3c-.2-.1-.3-.3-.5-.5-.1-.2-.2-.5-.3-.8h5v-.6c0-.5-.1-1-.2-1.4-.2-.6-.5-.9-.7-1.2zm-4.2 2c0-.2.1-.5.2-.7s.2-.4.4-.5c.1-.1.3-.3.5-.3.2-.1.4-.1.7-.1.5 0 .9.1 1.2.4s.5.7.6 1.2zm23.8-2c-.2-.3-.5-.5-.9-.7-.3-.2-.8-.3-1.3-.3s-.9.1-1.3.3-.8.4-1.1.7-.5.7-.7 1.1-.3.9-.3 1.4.1 1 .3 1.4.4.8.7 1.1.7.6 1.1.7c.4.2.9.3 1.3.3.5 0 .9-.1 1.3-.3s.6-.4.9-.7v.9h1.5v-6.8h-1.5zm0 3.4c-.1.3-.2.5-.4.7s-.4.3-.6.5c-.2.1-.5.2-.8.2s-.6-.1-.9-.2-.5-.3-.6-.5-.3-.4-.4-.7-.1-.5-.1-.8 0-.6.1-.8c.1-.3.2-.5.4-.7s.4-.4.6-.5c.3-.1.5-.2.9-.2.3 0 .6.1.8.2.3.1.5.3.6.5.2.2.3.4.4.7s.1.6.1.9c0 .1 0 .4-.1.7zm-27.1 1.2c-.2.1-.5.1-.7.1s-.3 0-.4-.1c-.1 0-.2-.1-.3-.2s-.2-.2-.2-.4c-.1-.2-.1-.4-.1-.6v-3h2.4v-1.3h-2.4v-2.1h-1.5v2.1h-1.4v1.3h1.4v3c0 .9.2 1.6.6 2s1 .6 1.8.6c.4 0 .8-.1 1.2-.2l.6-.3-.5-1.2c-.2.1-.4.2-.5.3zm13.3-5.6c-.4 0-.8.1-1.1.2-.3.2-.6.5-.8.8v-.9h-1.4v6.8h1.4v-3.7c0-.3 0-.5.1-.8l.3-.6c.1-.2.3-.3.5-.4s.4-.1.7-.1c.2 0 .4 0 .6.1.1 0 .2 0 .3.1l.4-1.4c-.1 0-.2-.1-.4-.1zm20.6 0c-.4 0-.8.1-1.1.2-.3.2-.6.5-.8.8v-.9h-1.3v6.8h1.4v-3.7c0-.3 0-.5.1-.8l.3-.6c.1-.2.3-.3.5-.4s.4-.1.7-.1c.2 0 .4 0 .6.1.1 0 .2 0 .3.1l.4-1.4c-.1 0-.2-.1-.4-.1zm6.9-2.6v3.6c-.2-.3-.5-.5-.9-.7-.3-.2-.8-.3-1.3-.3s-.9.1-1.3.3-.8.4-1.1.7-.5.7-.7 1.1-.3.9-.3 1.4.1 1 .3 1.4.4.8.7 1.1.7.6 1.1.7c.4.2.9.3 1.3.3.5 0 .9-.1 1.3-.3.3-.2.6-.4.9-.7v.9h1.5v-9.5zm-.1 7c-.1.3-.2.5-.4.7s-.4.3-.6.5c-.3.1-.5.2-.8.2s-.6-.1-.9-.2-.5-.3-.6-.5c-.2-.2-.3-.4-.4-.7s-.1-.5-.1-.8 0-.6.1-.8c.1-.3.2-.5.4-.7s.4-.4.6-.5c.3-.1.5-.2.9-.2.3 0 .6.1.8.2s.5.3.6.5c.2.2.3.4.4.7s.1.6.1.9c.1.1 0 .4-.1.7zm-23.8-2.4c.2-.2.4-.3.7-.4s.5-.2.8-.2.6.1.9.2.5.2.7.4l.7-1.2c-.3-.2-.6-.4-.9-.5-.4-.2-.9-.3-1.5-.3-.5 0-1 .1-1.5.3-.4.2-.8.4-1.2.8-.3.3-.6.7-.8 1.1s-.3.9-.3 1.4.1 1 .3 1.4.4.8.8 1.1c.3.3.7.6 1.2.8.4.2.9.3 1.5.3.5 0 1-.1 1.5-.3.3-.1.6-.3.9-.5l-.7-1.3c-.2.2-.4.3-.7.4s-.6.2-.9.2-.6-.1-.8-.2c-.3-.1-.5-.3-.7-.4-.2-.2-.3-.4-.4-.7s-.2-.6-.2-.9.1-.6.2-.9c0-.2.2-.4.4-.6zm28.5 3.9c.1 0 .2 0 .3.1.1 0 .2.1.2.1l.2.2c0 .1.1.2.1.3s0 .2-.1.3c0 .1-.1.2-.2.2-.1.1-.1.1-.2.1s-.2.1-.3.1-.2 0-.3-.1c-.1 0-.2-.1-.2-.1l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2.1-.1.1-.1.2-.1s.2-.1.3-.1zm0 1.2h.2c.1 0 .1-.1.2-.1 0 0 .1-.1.1-.2v-.4c0-.1-.1-.1-.1-.2 0 0-.1-.1-.2-.1h-.4c-.1 0-.1.1-.2.1 0 0-.1.1-.1.2v.4c0 .1.1.1.1.2 0 0 .1.1.2.1zm0-.8c.1 0 .1 0 .2.1 0 0 .1.1.1.2v.1l-.1.1.2.2h-.2l-.2-.2v.1h-.2v-.6zm-.1.2v.1h.2-.2z" fill="#1d1d1b"/><path d="m51.3 32.6c0-8.1 3.8-15.4 9.7-20-4.4-3.5-9.9-5.6-15.9-5.6-14.1 0-25.5 11.5-25.5 25.6s11.4 25.5 25.5 25.5c6 0 11.5-2.1 15.8-5.5-5.9-4.7-9.6-11.9-9.6-20z" fill="#e20d17"/><path d="m51.3 32.6c0 8.1 3.8 15.4 9.7 20 5.9-4.7 9.7-11.9 9.7-20s-3.8-15.4-9.7-20c-6 4.6-9.7 11.8-9.7 20z" fill="#ea610a"/><path d="m100.6 46.4v-.7h-.3v-.2h.8v.2h-.3v.7zm1.6 0v-.7l-.2.6h-.2l-.2-.6v.7h-.2v-1h.3l.2.6.2-.6h.3v1zm-25.4-39.4c-6 0-11.5 2.1-15.8 5.5 5.9 4.7 9.7 11.9 9.7 20s-3.8 15.4-9.7 20c4.4 3.5 9.9 5.5 15.8 5.5 14.1 0 25.5-11.4 25.5-25.5s-11.4-25.5-25.5-25.5z" fill="#f59e00"/><path d="m104.7 111.8h-6.6c-.2-1.2-.5-2.3-.7-3.4-.1-.5-.2-.7-.8-.7h-7.9c-.4 0-.6.1-.7.5-.4 1.1-.8 2.2-1.2 3.2-.1.1-.2.3-.4.3h-7.2c.4-1.1.9-2.1 1.3-3.1 3.1-7.3 6.1-14.6 9.2-21.9.7-1.6 1.7-2.2 3.4-2.2h5.8l.6 2.7c1.5 7.2 3 14.5 4.5 21.7.2.9.4 1.8.6 2.8.1 0 .1 0 .1.1zm-8.6-9.7c-.7-3.4-1.4-6.7-2.1-10h-.1c-1.2 3.3-2.4 6.6-3.6 10z" fill="url(#b)"/><path d="m76 84c.9.2 1.7.3 2.6.5.8.2 1.6.4 2.4.7-.4 2-.8 3.9-1.2 5.8-1.1-.3-2.2-.7-3.2-.9-1.5-.3-3-.5-4.5 0-.6.2-1.2.5-1.7.9-.8.7-.8 1.7 0 2.4.5.5 1.2.9 1.8 1.3 1.4.9 2.9 1.6 4.3 2.5 1.6 1.1 2.8 2.6 3.1 4.6.4 3.6-.9 6.4-3.9 8.4-1.9 1.3-4 1.8-6.3 2-3.1.3-6.2-.1-9.1-1-.2-.1-.4-.1-.6-.2-.1 0-.1-.1-.2-.1.4-2 .8-3.9 1.3-6l1.5.6c2.3.9 4.7 1.4 7.2.9.6-.1 1.3-.4 1.9-.8 1.2-.8 1.3-2.3.2-3.2-.7-.6-1.6-1.1-2.4-1.6-1.3-.8-2.6-1.4-3.8-2.3-1.5-1.1-2.7-2.6-2.9-4.5-.3-2.9.8-5.3 3-7.2 2-1.6 4.3-2.3 6.8-2.6.1 0 .3-.1.4-.1 1.1-.1 2.2-.1 3.3-.1z" fill="url(#c)"/><path d="m50.5 84.5c-.4.9-.7 1.7-1.1 2.6-3.4 8.1-6.8 16.1-10.1 24.2-.2.4-.4.5-.7.5h-6.4c-.5 0-.6-.2-.7-.6-1.8-7.1-3.7-14.1-5.4-21.2-.3-1.3-1-2.2-2.2-2.7-2-.9-4-1.5-6.1-2-.1 0-.2 0-.3-.1 0-.8 0-.8.8-.8h11.2c1.8 0 3.1 1 3.4 2.8.9 5 1.9 9.9 2.8 14.9 0 .2.1.4.1.7.1-.2.2-.3.2-.4 2.3-5.9 4.6-11.7 7-17.6.1-.3.3-.4.6-.4h6.5c0 .1.2.1.4.1z" fill="url(#d)"/><path d="m47.6 111.8c2-9.1 3.9-18.2 5.8-27.3h7.1c-.3 1.4-.6 2.7-.9 4.1l-4.8 22.5c-.1.5-.3.7-.8.7z" fill="url(#e)"/></svg>
\ No newline at end of file
diff --git a/templates/shortcodes/donate_buttons.html b/templates/shortcodes/donate_buttons.html
index 1b360ab0..d19db742 100644
--- a/templates/shortcodes/donate_buttons.html
+++ b/templates/shortcodes/donate_buttons.html
@@ -3,9 +3,13 @@
   <a href="https://donate.organicmaps.ru" title="По карте МИР в рублях"><img id="mir" src="/images/donates/mir.svg" alt="По карте МИР в рублях"></a>
   <a href="https://t.me/OrganicMapsRu/29441" title="Telegram по карте МИР в рублях"><img id="telegramRu" src="/images/donates/telegram.svg" alt="Telegram по карте МИР в рублях"></a>
   {% endif -%}
-  <a href="{{ config.extra.stripe | safe }}" title="Credit/Debit Card"><img src="/images/donates/visa.svg" alt="Credit/Debit Card"></a>
-  <a href="{{ config.extra.stripe | safe }}" title="Apple Pay"><img src="/images/donates/apple.svg" alt="Apple Pay"></a>
-  <a href="{{ config.extra.stripe | safe }}" title="Google Pay"><img src="/images/donates/google.svg" alt="Google Pay"></a>
+  <a href="{{ config.extra.stripe | safe }}" title="Credit/Debit Card"><img src="/images/donates/visa_mc.svg" alt="Credit/Debit Card"></a>
+  <a href="{{ config.extra.stripe | safe }}" title="Apple Pay" id="applePay"><img src="/images/donates/apple.svg" alt="Apple Pay"></a>
+  <a href="{{ config.extra.stripe | safe }}" title="Google Pay" id="googlePay"><img src="/images/donates/google.svg" alt="Google Pay"></a>
+  <form action="https://www.paypal.com/donate" method="post" target="_blank"  title="PayPal">
+    <input type="hidden" name="hosted_button_id" value="JYM34AADM87V8" />
+    <input type="image" src="/images/donates/paypal.svg" name="submit" title="Donate to Organic Maps using PayPal" alt="Donate with PayPal button" />
+  </form>
   <a href="{{ config.extra.stripe | safe }}" title="giropay"><img src="/images/donates/giropay.svg" alt="giropay"></a>
   {%- if lang != 'ru' %}
   <a href="{{ config.extra.stripe | safe }}" title="iDeal"><img src="/images/donates/ideal.svg" alt="iDeal"></a>
@@ -16,15 +20,54 @@
   <a href="https://liberapay.com/OrganicMaps" title="LiberaPay"><img src="/images/donates/liberapay.svg" alt="LiberaPay"></a>
   <a href="https://github.com/sponsors/organicmaps/" title="GitHub Sponsors"><img src="/images/donates/github.svg" alt="GitHub Sponsors"></a>
   <a href="https://www.patreon.com/OrganicMaps" title="Patreon"><img src="/images/donates/patreon.svg" alt="Patreon"></a>
-  <form action="https://www.paypal.com/donate" method="post" target="_blank"  title="PayPal">
-    <input type="hidden" name="hosted_button_id" value="JYM34AADM87V8" />
-    <input type="image" src="/images/donates/paypal.svg" name="submit" title="Donate to Organic Maps using PayPal" alt="Donate with PayPal button" />
-  </form>
+  <a href="https://opencollective.com/organicmaps" title="OpenCollective"><img src="/images/donates/opencollective.svg" alt="OpenCollective"></a>
   <a href="{{ config.extra.stripe | safe }}" title="BanContact"><img src="/images/donates/bancontact.svg" alt="BanContact"></a>
   <a href="{{ config.extra.stripe | safe }}" title="EPS"><img id="eps" src="/images/donates/eps.svg" alt="EPS"></a>
-  <a href="/donate#crypto" title="Bitcoin"><img src="/images/donates/bitcoin.svg" alt="Bitcoin"></a>
-  <a href="/donate#crypto" title="Ethereum"><img src="/images/donates/ethereum.svg" alt="Ethereum"></a>
-  <a href="/donate#crypto" title="Monero"><img src="/images/donates/monero.svg" alt="Monero"></a>
-  <a href="/donate#crypto" title="Tron"><img src="/images/donates/tron.svg" alt="Tron"></a>
-  <a href="/donate#crypto" title="ZCash"><img src="/images/donates/zcash.svg" alt="ZCash"></a>
+  <a href="/donate#crypto" title="Bitcoin, Ethereum, Monero, Tron, ZCash and other crypto"><img src="/images/donates/bitcoin.svg" alt="Bitcoin, Ethereum, Monero, Tron, ZCash and other crypto"></a>
 </div>
+<script>
+  // Check if Apple Pay JS API is available.
+  // https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/checking_for_apple_pay_availability
+  if (!window.ApplePaySession) {
+    var applePayLink = document.getElementById('applePay');
+    if (applePayLink) applePayLink.remove();
+  }
+
+  // https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome/13348618#13348618
+  function isAndroidOrDesktopChrome() {
+    // please note,
+    // that IE11 now returns undefined again for window.chrome
+    // and new Opera 30 outputs true for window.chrome
+    // but needs to check if window.opr is not undefined
+    // and new IE Edge outputs to true now for window.chrome
+    // and if not iOS Chrome check
+    // so use the below updated condition
+    var isChromium = window.chrome;
+    var winNav = window.navigator;
+    var vendorName = winNav.vendor;
+    var isOpera = typeof window.opr !== "undefined";
+    var isIEedge = winNav.userAgent.indexOf("Edg") > -1;
+    var isIOSChrome = winNav.userAgent.match("CriOS");
+
+    if (isIOSChrome) {
+      // is Google Chrome on IOS
+      return false;
+    } else if (isChromium !== null &&
+               typeof isChromium !== "undefined" &&
+               vendorName === "Google Inc." &&
+               isOpera === false &&
+               isIEedge === false) {
+      // is Google Chrome
+      return true;
+    } else {
+      // not Google Chrome
+      return false;
+    }
+  }
+
+  // Hide Google Play when not needed.
+  if (!isAndroidOrDesktopChrome()) {
+    var applePayLink = document.getElementById('googlePay');
+    if (applePayLink) applePayLink.remove();
+  }
+</script>