fixes & UI improvements 3

This commit is contained in:
Čarodej
2022-01-14 09:28:27 +01:00
parent 703a49711c
commit 5c59296724
3 changed files with 50 additions and 10 deletions
@@ -1,5 +1,5 @@
<template>
<div v-if="hasSubscription && ['paystack', 'paypal'].includes(subscription.attributes.driver)" class="card shadow-card">
<div v-if="canShowForSubscription" class="card shadow-card">
<FormLabel>
{{ $t('Update Payments') }}
</FormLabel>
@@ -27,6 +27,11 @@
FormLabel
},
computed: {
canShowForSubscription() {
return this.hasSubscription
&& ! this.subscription.attributes.is_cancelled
&& ['paystack', 'paypal'].includes(this.subscription.attributes.driver)
},
subscription() {
return this.$store.getters.user.data.relationships.subscription.data
},
+34 -7
View File
@@ -5,7 +5,13 @@
<!--Failed Payments-->
<UserFailedPayments />
<!--Balance-->
<!--
...
Charge user and increase his balance
...
Available for PayPal, Paystack
...
-->
<UserBalance/>
<!--Usage Estimates-->
@@ -14,10 +20,17 @@
<!--Billing Alert-->
<UserBillingAlerts />
<!-- Payment method for automatically handle payments - only for Stripe -->
<!--
...
We can store user credit card and charge for fixed billing and metered billing
This component handle storing and showing payment card UI
...
Handle only Stripe
...
-->
<UserStoredPaymentMethods />
<!--Transactions-->
<!-- Show all users transactions -->
<UserTransactionsForMeteredBilling />
</div>
@@ -29,16 +42,30 @@
<!-- Subscription Detail -->
<UserFixedSubscriptionDetail />
<!-- Payment method for automatically handle payments - only for Stripe -->
<!--
...
We can store user credit card and charge for fixed billing and metered billing
This component handle storing and showing payment card UI
...
Handle only Stripe
...
-->
<UserStoredPaymentMethods />
<!-- Update payment in external source -->
<!--
...
Paystack or PayPal need generate external resources to update payment method.
This component will handle all user cases
...
Handle only Paypal, Paystack
...
-->
<UserUpdatePaymentMethodsExternally />
<!-- Edit subscription -->
<!-- Component for cancel or upgrade subscription plan -->
<UserEditSubscription />
<!-- Transactions -->
<!-- Show all users transactions -->
<UserTransactionsForFixedBilling />
</div>