Merge staging into master

Author: github-actions[bot]

app/javascript/payment_add.js

@@ -5,25 +5,25 @@ const MIN_PAYMENT_AMOUNT = 21.8;
 
 document.addEventListener('turbo:load', () => {
   axios.defaults.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-  
+
   const element = document.getElementById('payment-add');
   if (element !== null) {
     new Vue({
       el: element,
       data: () => {
         return {
-          currentCredit: parseFloat(element.dataset.userCredit) || 0,
+          currentCredit: parseFloat(element.dataset.userCredit),
           paymentAmount: parseFloat(element.dataset.paymentAmount) || MIN_PAYMENT_AMOUNT
         };
       },
       computed: {
         newCredit() {
-          return (this.currentCredit + this.paymentAmount).toFixed(2);
+          return (this.currentCredit + parseFloat(this.paymentAmount)).toFixed(2);
         }
       },
       methods: {
         amountValid() {
-          return this.paymentAmount >= MIN_PAYMENT_AMOUNT;
+          return parseFloat(this.paymentAmount) >= MIN_PAYMENT_AMOUNT;
         }
       },
     });

app/views/payments/add.html.erb

@@ -14,7 +14,7 @@
           <div class="col-12">
             <p>
               Voer hier het bedrag in dat je wilt inleggen. Hierna zal je worden doorgestuurd naar de betaalomgeving.
-              Let op: Het bedrag moet gescheiden worden door een punt. Gebruik geen komma!
+              Let op: Het bedrag moet gescheiden worden door een punt.
             </p>
             <%= f.input :amount, as: :float, input_html: {"v-model": "paymentAmount"}, required: true, label: 'Bedrag'  %>
           </div>
@@ -27,7 +27,7 @@
 
           <div class="col-md-4 col-sm-8 col-12 offset-md-8 offset-sm-4" v-if="!amountValid()">
             <div class="alert alert-danger">
-              U heeft een incorrect getal ingevoerd.
+              U heeft een incorrect getal ingevoerd. Het minimale inleg bedrag is €21,80.
             </div>
           </div>