fixes & UI improvements 2

public/mix-manifest.json

@@ -28,7 +28,7 @@
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=62ce73b2d66590912cbc",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=c3a013b11ae7bde6f39d",
     "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~2c1222b7.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~2c1222b7.js?id=5963f5d9fb4e759c600a",
-    "/chunks/billing.js": "/chunks/billing.js?id=feab630b7b5799320964",
+    "/chunks/billing.js": "/chunks/billing.js?id=6d0bf00d7c11dc9ce225",
     "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=0ffe43f76a33278ce1b8",
     "/chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/payments/settings~chunks/plan-su~cdf8788b.js": "/chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/payments/settings~chunks/plan-su~cdf8788b.js?id=d56f3c7df8d8dd9caaaf",
     "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.js": "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.js?id=669bd6d15cfa4c6e75df",
@@ -129,5 +129,14 @@
     "/chunks/settings.aac8577e32658863232c.hot-update.js": "/chunks/settings.aac8577e32658863232c.hot-update.js",
     "/chunks/settings.70a7ff25b8cf2cd6a4b0.hot-update.js": "/chunks/settings.70a7ff25b8cf2cd6a4b0.hot-update.js",
     "/chunks/settings.0e2b9f14620b18847b0e.hot-update.js": "/chunks/settings.0e2b9f14620b18847b0e.hot-update.js",
-    "/chunks/settings.ef2044d422358aaae578.hot-update.js": "/chunks/settings.ef2044d422358aaae578.hot-update.js"
+    "/chunks/settings.ef2044d422358aaae578.hot-update.js": "/chunks/settings.ef2044d422358aaae578.hot-update.js",
+    "/chunks/billing.bf1645e93f778caa0089.hot-update.js": "/chunks/billing.bf1645e93f778caa0089.hot-update.js",
+    "/chunks/billing.9af5e9d105e764ba6a94.hot-update.js": "/chunks/billing.9af5e9d105e764ba6a94.hot-update.js",
+    "/chunks/billing.021ee7954b8ef35fb9ee.hot-update.js": "/chunks/billing.021ee7954b8ef35fb9ee.hot-update.js",
+    "/chunks/billing.98830293f468187feff4.hot-update.js": "/chunks/billing.98830293f468187feff4.hot-update.js",
+    "/chunks/billing.bae7e12f9de773895ef2.hot-update.js": "/chunks/billing.bae7e12f9de773895ef2.hot-update.js",
+    "/chunks/billing.666f2dd684b693790e59.hot-update.js": "/chunks/billing.666f2dd684b693790e59.hot-update.js",
+    "/chunks/billing.0411e0bd475ce0850b70.hot-update.js": "/chunks/billing.0411e0bd475ce0850b70.hot-update.js",
+    "/chunks/billing.4e265415d9bd21aec025.hot-update.js": "/chunks/billing.4e265415d9bd21aec025.hot-update.js",
+    "/chunks/billing.23938b7bc508e671f033.hot-update.js": "/chunks/billing.23938b7bc508e671f033.hot-update.js"
 }

resources/js/components/Subscription/UserStoredPaymentMethods.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="config.isStripe && hasSubscription" class="card shadow-card">
+	<div v-if="canShowForMeteredBilling || canShowForFixedBilling" class="card shadow-card">
 		<FormLabel icon="credit-card">
 			{{ $t('Payment Method') }}
 		</FormLabel>
@@ -26,19 +26,19 @@
 		<div v-if="! hasPaymentMethod">
 
 			<!-- Show credit card form -->
-			<ButtonBase @click.native="showStoreCreditCardForm" v-if="! isCreditCardForm" :loading="stripeData.storingStripePaymentMethod" type="submit" button-style="theme" class="w-full mt-4">
+			<ButtonBase @click.native="showStoreCreditCardForm" v-if="! isCreditCardForm" :loading="stripe.storingStripePaymentMethod" type="submit" button-style="theme" class="w-full mt-4">
 				{{ $t('Add Payment Method') }}
 			</ButtonBase>
 
 			<!-- Store credit card form -->
 			<form v-if="isCreditCardForm" @submit.prevent="storeStripePaymentMethod" id="payment-form" class="mt-6">
-				<div v-if="stripeData.isInitialization" class="h-10 relative mb-6">
+				<div v-if="stripe.isInitialization" class="h-10 relative mb-6">
 					<Spinner />
 				</div>
 				<div id="payment-element">
 				<!-- Elements will create form elements here -->
 				</div>
-				<ButtonBase :loading="stripeData.storingStripePaymentMethod" type="submit" button-style="theme" class="w-full mt-4">
+				<ButtonBase :loading="stripe.storingStripePaymentMethod" type="submit" button-style="theme" class="w-full mt-4">
 					{{ $t('Store My Credit Card') }}
 				</ButtonBase>
 				<div id="error-message">
@@ -75,8 +75,14 @@
 				'config',
 				'user',
 			]),
-			hasSubscription() {
+			canShowForMeteredBilling() {
-				return this.$store.getters.user.data.relationships.subscription
+				return this.config.isStripe && this.config.subscriptionType === 'metered'
+			},
+			canShowForFixedBilling() {
+				return this.config.isStripe
+					&& this.config.subscriptionType === 'fixed'
+					&& this.$store.getters.user.data.relationships.subscription
+					&& this.$store.getters.user.data.relationships.subscription.data.attributes.driver === 'stripe'
 			},
 			hasPaymentMethod() {
 				return this.user.data.relationships.creditCards && this.user.data.relationships.creditCards.data.length > 0
@@ -85,10 +91,8 @@
 		data() {
 			return {
 				isLoading: false,
-
 				isCreditCardForm: false,
-
+				stripe: {
-				stripeData: {
 					isInitialization: true,
 					storingStripePaymentMethod: false
 				}
@@ -97,7 +101,7 @@
 		methods: {
 			async storeStripePaymentMethod() {
 
-				this.stripeData.storingStripePaymentMethod = true
+				this.stripe.storingStripePaymentMethod = true
 
 				const {error} = await stripe.confirmSetup({
 					//`Elements` instance that was used to create the Payment Element
@@ -126,7 +130,7 @@
 					// TODO: L9 - load credit card after was stored in database
 				}
 
-				this.stripeData.storingStripePaymentMethod = false
+				this.stripe.storingStripePaymentMethod = false
 			},
 			async stripeInit() {
 
@@ -171,7 +175,7 @@
 						})
 					})
 
-				this.stripeData.isInitialization = false
+				this.stripe.isInitialization = false
 			},
 			showStoreCreditCardForm() {
 				this.isCreditCardForm = !this.isCreditCardForm