Display currency code in license price labels

Author: tobihagemann

assets/js/androidkey.js

@@ -34,6 +34,7 @@ class AndroidLicense {
       };
       paddle.PricePreview(request).then(result => {
         this._checkoutData.price = {
+          currencyCode: result.data.currencyCode,
           amount: result.data.details.lineItems[0].totals.total,
           formattedAmount: result.data.details.lineItems[0].formattedTotals.total
         };

assets/js/desktopkey.js

@@ -36,6 +36,7 @@ class DesktopLicense {
         this._checkoutData.prices = result.data.details.lineItems.map(item => {
           return {
             priceId: item.price.id,
+            currencyCode: result.data.currencyCode,
             amount: item.totals.total,
             formattedAmount: item.formattedTotals.total
           }

layouts/partials/android-getkey.html

@@ -5,7 +5,12 @@ <h3 class="font-h3 text-lg">{{ i18n "android_getkey_title" }}</h3>
 
   <form x-show="!checkoutData.success" x-ref="form" class="px-4 py-8" @submit.prevent="checkoutData.acceptNewsletter && subscribeToNewsletter(checkoutData.email, 'cryptomator', checkoutData.captcha); androidLicense.checkout('{{ .Site.Language.Lang }}'); $refs.captcha.reset()">
     <div class="mb-4">
-      <label class="label-uppercase mb-2">{{ i18n "android_getkey_price" }}</label>
+      <label class="label-uppercase mb-2">
+        {{ i18n "android_getkey_price" }}
+        <span x-show="checkoutData.price" x-cloak>
+          (in <span x-text="checkoutData.price ? checkoutData.price.currencyCode : ''"></span>)
+        </span>
+      </label>
       <div class="relative input-box flex items-center gap-2 w-full lg:w-1/2">
         <span x-show="checkoutData.discountedPrice && checkoutData.price" x-text="checkoutData.price ? checkoutData.price.formattedAmount : '…'" class="text-gray-500 line-through decoration-red-600" x-cloak></span>
         <span x-text="checkoutData.discountedPrice ? checkoutData.discountedPrice.formattedAmount : checkoutData.price ? checkoutData.price.formattedAmount : '…'">…</span>

layouts/partials/supporter-cert-funder.html

@@ -2,7 +2,12 @@
   <form x-show="!checkoutData.success" x-ref="funderForm" @submit.prevent="checkoutData.acceptNewsletter && subscribeToNewsletter(checkoutData.email, 'cryptomator', checkoutData.captcha); desktopLicense.checkout(checkoutData.prices[checkoutData.selectedPriceIndex].priceId, '{{ .Site.Language.Lang }}'); $refs.captcha.reset()">
     <div class="flex flex-wrap md:flex-nowrap">
       <fieldset class="w-full mb-4 md:w-2/3 md:pr-3">
-        <legend class="label-uppercase mb-2">{{ i18n "supporter_cert_funder_price" }}</legend>
+        <legend class="label-uppercase mb-2">
+          {{ i18n "supporter_cert_funder_price" }}
+          <span x-show="checkoutData.prices[checkoutData.selectedPriceIndex]?.currencyCode" x-cloak>
+            (in <span x-text="checkoutData.prices[checkoutData.selectedPriceIndex].currencyCode"></span>)
+          </span>
+        </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="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">