From dccca518da5e8abe7f6e4a5a3466217affb34878 Mon Sep 17 00:00:00 2001
From: VitaliiShpital <takur12345@gmail.com>
Date: Wed, 12 Feb 2020 15:30:28 +0200
Subject: [PATCH] web/satellite: shortened token payments dropdown bug fix

Change-Id: Ie4a77cf88fcdc5a730a23e878481277ddf6cdb79
---
 .../billing/paymentMethods/PaymentMethods.vue | 37 ++++++++++---------
 .../billing/paymentMethods/PaymentsBonus.vue  | 14 ++++++-
 .../paymentMethods/TokenDepositSelection.vue  | 11 +++++-
 .../src/components/header/AccountDropdown.vue |  1 +
 .../components/project/NewProjectPopup.vue    |  1 +
 5 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue b/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
index 525153d05..1c4a8079e 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
@@ -44,7 +44,7 @@
             </div>
             <div class="payment-methods-area__adding-container__submit-area">
                 <img
-                    v-if="isTransactionLoading"
+                    v-if="isLoading"
                     class="payment-loading-image"
                     src="@/../static/images/account/billing/loading.gif"
                     alt="loading gif"
@@ -54,7 +54,7 @@
                     width="251px"
                     height="48px"
                     :on-press="onConfirmAddSTORJ"
-                    :is-disabled="isTransactionLoading"
+                    :is-disabled="isLoading"
                 />
             </div>
         </div>
@@ -67,7 +67,7 @@
             />
             <div class="payment-methods-area__adding-container__submit-area">
                 <img
-                    v-if="isAddingCardLoading"
+                    v-if="isLoading"
                     class="payment-loading-image"
                     src="@/../static/images/account/billing/loading.gif"
                     alt="loading gif"
@@ -77,7 +77,7 @@
                     width="123px"
                     height="48px"
                     :on-press="onConfirmAddStripe"
-                    :is-disabled="isAddingCardLoading"
+                    :is-disabled="isLoading"
                 />
             </div>
         </div>
@@ -110,6 +110,7 @@ const {
     GET_CREDIT_CARDS,
     MAKE_TOKEN_DEPOSIT,
     GET_BILLING_HISTORY,
+    GET_BALANCE,
 } = PAYMENTS_ACTIONS;
 
 interface StripeForm {
@@ -131,8 +132,7 @@ export default class PaymentMethods extends Vue {
     private readonly MAX_TOKEN_AMOUNT_IN_DOLLARS = 1000000;
     private tokenDepositValue: number = this.DEFAULT_TOKEN_DEPOSIT_VALUE;
 
-    public isAddingCardLoading: boolean = false;
-    public isTransactionLoading: boolean = false;
+    public isLoading: boolean = false;
 
     /**
      * Lifecycle hook after initial render where credit cards are fetched.
@@ -219,6 +219,8 @@ export default class PaymentMethods extends Vue {
      * Changes area state and token deposit value to default.
      */
     public onCancel(): void {
+        if (this.isLoading) return;
+
         this.areaState = PaymentMethodsBlockState.DEFAULT;
         this.tokenDepositValue = this.DEFAULT_TOKEN_DEPOSIT_VALUE;
     }
@@ -228,15 +230,15 @@ export default class PaymentMethods extends Vue {
      * payment and return state to default
      */
     public async onConfirmAddSTORJ(): Promise<void> {
-        if (this.isTransactionLoading) return;
+        if (this.isLoading) return;
 
-        this.isTransactionLoading = true;
+        this.isLoading = true;
 
         if (this.tokenDepositValue >= this.MAX_TOKEN_AMOUNT_IN_DOLLARS || this.tokenDepositValue === 0) {
             await this.$notify.error('Deposit amount must be more than 0 and less than 1000000');
             this.tokenDepositValue = this.DEFAULT_TOKEN_DEPOSIT_VALUE;
             this.areaState = PaymentMethodsBlockState.DEFAULT;
-            this.isTransactionLoading = false;
+            this.isLoading = false;
 
             return;
         }
@@ -250,7 +252,7 @@ export default class PaymentMethods extends Vue {
             }
         } catch (error) {
             await this.$notify.error(error.message);
-            this.isTransactionLoading = false;
+            this.isLoading = false;
         }
 
         this.$segment.track(SegmentEvent.PAYMENT_METHOD_ADDED, {
@@ -262,11 +264,11 @@ export default class PaymentMethods extends Vue {
             await this.$store.dispatch(GET_BILLING_HISTORY);
         } catch (error) {
             await this.$notify.error(error.message);
-            this.isTransactionLoading = false;
+            this.isLoading = false;
         }
 
         this.areaState = PaymentMethodsBlockState.DEFAULT;
-        this.isTransactionLoading = false;
+        this.isLoading = false;
     }
 
     /**
@@ -277,6 +279,7 @@ export default class PaymentMethods extends Vue {
 
         try {
             await this.$store.dispatch(GET_BILLING_HISTORY);
+            await this.$store.dispatch(GET_BALANCE);
         } catch (error) {
             await this.$notify.error(error.message);
         }
@@ -292,16 +295,16 @@ export default class PaymentMethods extends Vue {
      * @param token from Stripe
      */
     public async addCard(token: string) {
-        if (this.isAddingCardLoading) return;
+        if (this.isLoading) return;
 
-        this.isAddingCardLoading = true;
+        this.isLoading = true;
 
         try {
             await this.$store.dispatch(ADD_CREDIT_CARD, token);
         } catch (error) {
             await this.$notify.error(error.message);
 
-            this.isAddingCardLoading = false;
+            this.isLoading = false;
 
             return;
         }
@@ -314,12 +317,12 @@ export default class PaymentMethods extends Vue {
             await this.$store.dispatch(GET_CREDIT_CARDS);
         } catch (error) {
             await this.$notify.error(error.message);
-            this.isAddingCardLoading = false;
+            this.isLoading = false;
         }
 
         this.areaState = PaymentMethodsBlockState.DEFAULT;
 
-        this.isAddingCardLoading = false;
+        this.isLoading = false;
     }
 }
 </script>
diff --git a/web/satellite/src/components/account/billing/paymentMethods/PaymentsBonus.vue b/web/satellite/src/components/account/billing/paymentMethods/PaymentsBonus.vue
index d61bd1f60..931b9aeb2 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/PaymentsBonus.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/PaymentsBonus.vue
@@ -3,8 +3,8 @@
 
 <template>
     <div class="payments-bonus-container">
-        <LogoIcon v-if="anyCreditCards" />
-        <GiftIcon v-else />
+        <LogoIcon class="banner-logo-svg" v-if="anyCreditCards" />
+        <GiftIcon class="banner-gift-svg" v-else />
         <div class="payments-bonus-container__text-container" v-if="anyCreditCards">
             <p class="payments-bonus-container__text-container__main-text">
                 Get free credits for paying in STORJ!
@@ -80,4 +80,14 @@ export default class PaymentsBonus extends Vue {
             }
         }
     }
+
+    .banner-logo-svg {
+        min-height: 60px;
+        min-width: 54px;
+    }
+
+    .banner-gift-svg {
+        min-height: 64px;
+        min-width: 50px;
+    }
 </style>
diff --git a/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue b/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
index eeaf651cd..04a909926 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
@@ -31,6 +31,7 @@
         <div
             id="paymentSelect"
             class="options-container"
+            :class="{ 'top-expand': isExpandingTop }"
             v-if="isSelectionShown"
             v-click-outside="close"
         >
@@ -96,6 +97,10 @@ export default class TokenDepositSelection extends Vue {
         return (option.value === this.current.value) && !this.isCustomAmount;
     }
 
+    public get isExpandingTop(): boolean {
+        return this.$store.state.paymentsModule.billingHistory.length === 0;
+    }
+
     /**
      * isSelectionShown flag that indicate is token amount selection shown.
      */
@@ -250,7 +255,6 @@ export default class TokenDepositSelection extends Vue {
         color: #354049;
         background-color: white;
         z-index: 102;
-        margin: 0 10px 100px 0;
         border-radius: 12px;
         top: 50px;
         box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
@@ -306,4 +310,9 @@ export default class TokenDepositSelection extends Vue {
         top: 0;
         left: 0;
     }
+
+    .top-expand {
+        top: -290px;
+        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.25);
+    }
 </style>
diff --git a/web/satellite/src/components/header/AccountDropdown.vue b/web/satellite/src/components/header/AccountDropdown.vue
index 78fc4e858..962283e0b 100644
--- a/web/satellite/src/components/header/AccountDropdown.vue
+++ b/web/satellite/src/components/header/AccountDropdown.vue
@@ -82,6 +82,7 @@ export default class AccountDropdown extends Vue {
         this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
         this.$store.dispatch(NOTIFICATION_ACTIONS.CLEAR);
         this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
+        this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
 
         LocalData.removeUserId();
     }
diff --git a/web/satellite/src/components/project/NewProjectPopup.vue b/web/satellite/src/components/project/NewProjectPopup.vue
index a001ef236..e093dbfd5 100644
--- a/web/satellite/src/components/project/NewProjectPopup.vue
+++ b/web/satellite/src/components/project/NewProjectPopup.vue
@@ -139,6 +139,7 @@ export default class NewProjectPopup extends Vue {
 
         try {
             await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BILLING_HISTORY);
+            await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
         } catch (error) {
             await this.$notify.error(error.message);
         }