automatically display supporter cert discount

Author: tobihagemann

assets/js/desktopkey.js

@@ -32,6 +32,7 @@ class DesktopLicense {
         return {
           productId: product.product_id,
           amount: product.price.gross,
+          listAmount: product.list_price.gross,
           currency: product.currency
         }
       });

layouts/partials/supporter-cert-funder.html

@@ -5,9 +5,10 @@
         <legend class="label-uppercase mb-2">{{ i18n "supporter_cert_funder_price" }}</legend>
         <div class="grid grid-cols-3 gap-2 mb-2">
           <template x-for="(price, index) in checkoutData.prices">
-            <label :class="{'border-gray-300 hover:border-primary': checkoutData.selectedPriceIndex != index, 'border-primary bg-primary text-white': checkoutData.selectedPriceIndex == index}" class="flex items-center justify-center rounded-sm px-3 py-2 cursor-pointer border focus:ring-0 focus:border-secondary" @click="checkoutData.selectedPriceIndex = index">
+            <label :class="{'border-gray-300 hover:border-primary': checkoutData.selectedPriceIndex != index, 'border-primary bg-primary text-white': checkoutData.selectedPriceIndex == index}" class="relative flex items-center justify-center rounded-sm px-3 py-2 cursor-pointer border focus:ring-0 focus:border-secondary" @click="checkoutData.selectedPriceIndex = index">
               <input x-model="price.productId" type="radio" name="price-option" class="sr-only" :aria-labelledby="`price-option-${index}-label`">
               <span x-text="price.amount ? price.amount.toLocaleString('{{ .Site.Language.Lang }}', { style: 'currency', currency: price.currency }) : '…'" :id="`price-option-${index}-label`"></span>
+              <span x-show="price.amount != price.listAmount" class="absolute top-0 left-0 -translate-2 -rotate-5 px-1 rounded-xs text-xs text-white bg-red-600 z-10">-<span x-text="((1 - price.amount / price.listAmount) * 100).toFixed(0)"></span>%</span>
             </label>
           </template>
         </div>