v1.7 beta.8

resources/js/views/Profile.vue

@@ -91,7 +91,7 @@
                                 <span class="email">{{ user.data.attributes.email }}</span>
                             </div>
                         </div>
-                        <div v-if="config.storageLimit && config.isSaaS && config.app_payments_active" class="headline-actions">
+                        <div v-if="config.storageLimit && config.isSaaS && config.app_payments_active && !canShowIncompletePayment" class="headline-actions">
                             <router-link :to="{name: 'UpgradePlan'}" v-if="canShowUpgradeButton">
                                 <ButtonBase class="upgrade-button" button-style="secondary" type="button">
                                     {{ $t('global.upgrade_plan') }}
@@ -100,7 +100,15 @@
                         </div>
                     </div>
 
-                    <InfoBox v-if="canShowUpgradeWarning" type="error" class="upgrade-box">
+                    <!--Incomplete Payment Warning-->
+                    <InfoBox v-if="canShowIncompletePayment" type="error" class="message-box">
+                        <i18n path="incomplete_payment.description" tag="p">
+                            <a :href="user.data.attributes.incomplete_payment">{{ $t('incomplete_payment.href') }}</a>
+                        </i18n>
+                    </InfoBox>
+
+                    <!--Upgrade Storage Plan Warning-->
+                    <InfoBox v-if="canShowUpgradeWarning && !canShowIncompletePayment" type="error" class="message-box">
                         <p>{{ $t('upgrade_banner.title') }}</p>
                     </InfoBox>
 
@@ -171,6 +179,9 @@
             },
             canShowUpgradeWarning() {
                 return this.config.storageLimit && this.user.relationships.storage.data.attributes.used > 95
+            },
+            canShowIncompletePayment() {
+                return this.user.data.attributes.incomplete_payment
             }
         },
         data() {
@@ -226,8 +237,8 @@
         }
     }
 
-    .upgrade-box {
-        margin-top: -30px;
+    .message-box {
+        margin-top: -15px;
     }
 
     @media (prefers-color-scheme: dark) {

resources/js/views/Upgrade/UpgradeBilling.vue

@@ -305,9 +305,6 @@
                 // Update user data
                 this.$store.dispatch('getAppData')
 
-                // End loading
-                this.isSubmitted = false
-
                 // Show toaster
                 events.$emit('toaster', {
                     type: 'success',
@@ -319,13 +316,16 @@
             },
             errorOrder(error) {
 
-                if (error.response.status = 402) {
+                // Redirect user to confirmation payment page
+                if (error.response.status === 402) {
+                    window.location.href = error.response.data.message;
+                }
+
+                // Show user error message
+                if (error.response.status === 400) {
                     this.isError = true
                     this.errorMessage = error.response.data.message
                 }
-
-                // End loading
-                this.isSubmitted = false
             },
             async submitOrder() {
 
@@ -375,6 +375,9 @@
                             })
                             .then(() => this.successOrder())
                             .catch((error) => this.errorOrder(error))
+                            .finally(() => {
+                                this.isSubmitted = false
+                            })
                     }
                 }
 
@@ -391,6 +394,9 @@
                         })
                         .then(() => this.successOrder())
                         .catch((error) => this.errorOrder(error))
+                        .finally(() => {
+                            this.isSubmitted = false
+                        })
                 }
             },
         },

resources/js/views/Upgrade/UpgradePlan.vue

@@ -2,14 +2,16 @@
     <div id="single-page">
         <div id="page-content" class="large-width center-page" v-show="! isLoading">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
-
             <div class="content-page">
+
+                <!--Page Title-->
                 <div class="plan-title">
                     <cloud-icon size="42" class="title-icon"></cloud-icon>
                     <h1>{{ $t('page_pricing_tables.title') }}</h1>
                     <h2>{{ $t('page_pricing_tables.description') }}</h2>
                 </div>
 
+                <!--Pricing Tables-->
                 <PlanPricingTables @load="onLoadPricingTables" @selected-plan="onSelectTable"/>
             </div>
         </div>
@@ -55,6 +57,10 @@
             StripeElementsScript.setAttribute('src', 'https://js.stripe.com/v3/')
             document.head.appendChild(StripeElementsScript)
         },
+        mounted() {
+            // Reload user data
+            this.$store.dispatch('getAppData')
+        }
     }
 </script>
 

resources/js/views/User/Subscription.vue

@@ -92,6 +92,9 @@
                 return this.isConfirmedResume ? 'theme-solid' : 'secondary'
             },
             status() {
+                if (this.subscription.data.attributes.incomplete) {
+                    return this.$t('global.incomplete')
+                }
                 if (this.subscription.data.attributes.canceled) {
                     return this.$t('global.canceled')
                 }