fixes & UI improvements 2

This commit is contained in:
Čarodej
2022-01-14 09:10:41 +01:00
parent 1d0ba4d679
commit 703a49711c
2 changed files with 27 additions and 14 deletions

View File

@@ -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"
}

View File

@@ -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() {
return this.$store.getters.user.data.relationships.subscription
canShowForMeteredBilling() {
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,
stripeData: {
stripe: {
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