Update payment method display structure and case-insensitive PayPal comparison

Author: tobihagemann

layouts/hub-billing/single.html

@@ -135,21 +135,25 @@ <h1 class="font-h1">{{ .Title }}</h1>
               </dt>
               <dd>
                 <template x-if="subscriptionData.details.payment_information">
-                  <div x-show="subscriptionData.details.payment_information.payment_method.toLowerCase() == 'card'">
-                    <p class="font-bold text-2xl md:text-3xl lg:text-4xl">
-                      {{ i18n "hub_billing_manage_payment_info_credit_card" . }}
-                    </p>
-                    <p class="text-xs text-gray-600 mt-1">
-                      {{ i18n "hub_billing_manage_payment_info_credit_card_last_four_digits_description" . }}: <span x-text="subscriptionData.details.payment_information.last_four_digits"></span>
+                  <div>
+                    <div x-show="subscriptionData.details.payment_information.payment_method.toLowerCase() == 'card'">
+                      <p class="font-bold text-2xl md:text-3xl lg:text-4xl">
+                        {{ i18n "hub_billing_manage_payment_info_credit_card" . }}
+                      </p>
+                      <p class="text-xs text-gray-600 mt-1">
+                        {{ i18n "hub_billing_manage_payment_info_credit_card_last_four_digits_description" . }}: <span x-text="subscriptionData.details.payment_information.last_four_digits"></span>
+                      </p>
+                    </div>
+                    <p x-show="subscriptionData.details.payment_information.payment_method.toLowerCase() == 'paypal'" class="font-bold text-2xl md:text-3xl lg:text-4xl">
+                      {{ i18n "hub_billing_manage_payment_info_paypal" . }}
                     </p>
                   </div>
-                  <p x-show="subscriptionData.details.payment_information.payment_method.toLowerCase() == 'paypal'" class="font-bold text-2xl md:text-3xl lg:text-4xl">
-                    {{ i18n "hub_billing_manage_payment_info_paypal" . }}
+                </template>
+                <template x-if="!subscriptionData.details.payment_information">
+                  <p class="font-bold text-2xl md:text-3xl lg:text-4xl">
+                    –
                   </p>
                 </template>
-                <p x-show="!subscriptionData.details.payment_information" class="font-bold text-2xl md:text-3xl lg:text-4xl">
-                  –
-                </p>
                 <p class="mt-2">
                   <button :disabled="subscriptionData.inProgress || subscriptionData.details.state == 'deleted'" @click.prevent="hubSubscription.updatePaymentMethod('{{ .Site.Language.Lang }}')" class="text-xs text-btn text-primary">
                     <i class="fas fa-external-link fa-fw"></i>