refactored android price loading

Author: tobihagemann

assets/css/custom.css

@@ -140,7 +140,7 @@ ul.list-primary li::marker {
 }
 
 .input-box {
-  @apply rounded-sm border-gray-300 focus:ring-0 focus:border-secondary;
+  @apply rounded-sm border border-gray-300 focus:ring-0 focus:border-secondary px-3 py-2;
 }
 
 .pre-box {

assets/js/androidkey.js

@@ -21,10 +21,17 @@ class AndroidLicense {
   }
 
   loadPrice() {
-    this._paddle.then(paddle => {
-      paddle.Product.Prices(PADDLE_ANDROID_PRODUCT_ID, prices => {
-        this._checkoutData.price = prices.price.gross;
-      });
+    $.ajax({
+      url: PADDLE_PRICES_URL,
+      dataType: 'jsonp',
+      data: {
+        product_ids: PADDLE_ANDROID_PRODUCT_ID
+      },
+    }).done(data => {
+      this._checkoutData.price = {
+        amount: data.response.products[0].price.gross,
+        currency: data.response.products[0].currency
+      };
     });
   }
 

i18n/de.yaml

@@ -44,8 +44,6 @@
   translation: "Lizenzschlüssel kaufen"
 - id: android_getkey_price
   translation: "Preis"
-- id: android_getkey_price_placeholder
-  translation: "Lädt…"
 - id: android_getkey_email
   translation: "E-Mail"
 - id: android_getkey_email_placeholder

i18n/en.yaml

@@ -44,8 +44,6 @@
   translation: "Buy a license key"
 - id: android_getkey_price
   translation: "Price"
-- id: android_getkey_price_placeholder
-  translation: "Loading…"
 - id: android_getkey_email
   translation: "Email"
 - id: android_getkey_email_placeholder

layouts/partials/android-getkey.html

@@ -4,9 +4,11 @@ <h3 class="font-h3 text-lg">{{ i18n "android_getkey_title" }}</h3>
   </div>
 
   <form x-show="!checkoutData.success" x-ref="form" class="px-4 py-8">
-    <div class="w-full md:w-1/2 mb-4">
+    <div class="mb-4">
       <label class="label-uppercase mb-2">{{ i18n "android_getkey_price" }}</label>
-      <input x-model="checkoutData.price" type="text" class="input-box w-full" placeholder="{{ i18n "android_getkey_price_placeholder" }}" readonly/>
+      <div class="input-box flex items-center w-full lg:w-1/2">
+        <span x-text="checkoutData.price ? checkoutData.price.amount.toLocaleString('{{ .Site.Language.Lang }}', { style: 'currency', currency: checkoutData.price.currency }) : '…'">…</span>
+      </div>
     </div>
     <div class="mb-4">
       <label class="label-uppercase mb-2">{{ i18n "android_getkey_email" }}</label>