From 36d322611e8a6ae8c03256d1829b2bad0183c035 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20Beganovi=C4=87?= <k1pstabug@gmail.com>
Date: Tue, 29 Sep 2020 12:31:56 +0200
Subject: [PATCH] Stripe: Add credit card

---
 .../js/clients/payment_methods/authorize-stripe-card.js     | 6 ++++--
 .../ninja2020/gateways/stripe/add_credit_card.blade.php     | 6 +++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/js/clients/payment_methods/authorize-stripe-card.js b/resources/js/clients/payment_methods/authorize-stripe-card.js
index 0acb344a0f02..c7b902f9438c 100644
--- a/resources/js/clients/payment_methods/authorize-stripe-card.js
+++ b/resources/js/clients/payment_methods/authorize-stripe-card.js
@@ -36,8 +36,9 @@ class AuthorizeStripeCard {
     }
 
     handleStripe(stripe, cardHolderName) {
-        processingOverlay(true);
         this.cardButton.disabled = true;
+        this.cardButton.querySelector('span').classList.add('hidden');
+        this.cardButton.querySelector('svg').classList.remove('hidden');
 
         stripe
             .handleCardSetup(this.clientSecret, this.cardElement, {
@@ -55,8 +56,9 @@ class AuthorizeStripeCard {
     }
 
     handleFailure(result) {
-        processingOverlay(false);
         this.cardButton.disabled = false;
+        this.cardButton.querySelector('span').classList.remove('hidden');
+        this.cardButton.querySelector('svg').classList.add('hidden');
 
         let errors = document.getElementById('errors');
 
diff --git a/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php b/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php
index 587ea00a4414..e99e1158eac2 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php
@@ -76,7 +76,11 @@
                                     id="card-button"
                                     data-secret="{{ $intent->client_secret }}"
                                     class="button button-primary">
-                                    {{ ctrans('texts.save') }}
+                                    <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>
+                                    <span>{{ __('texts.save') }}</span>
                                 </button>
                             </div>
                         </dl>