mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 00:02:15 +00:00
Subscription UI refactoring
This commit is contained in:
Čarodej
56
resources/js/components/Subscription/PaymentCard.vue
Normal file
56
resources/js/components/Subscription/PaymentCard.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-between py-3 px-4 input-dark">
|
||||
<div class="flex items-center">
|
||||
<img :src="`/assets/gateways/${card.data.attributes.brand}.svg`" alt="" class="h-5 mr-3 rounded">
|
||||
<b class="text-sm font-bold leading-none capitalize">
|
||||
{{ card.data.attributes.brand }} •••• {{ card.data.attributes.last4 }}
|
||||
</b>
|
||||
</div>
|
||||
<b class="text-sm font-bold leading-none">
|
||||
{{ $t('Expires') }} {{ card.data.attributes.expiration }}
|
||||
</b>
|
||||
<Trash2Icon @click="deleteCreditCard(card.data.id)" size="15" class="cursor-pointer" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {Trash2Icon,} from "vue-feather-icons";
|
||||
import {events} from "../../bus";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: 'PaymentCard',
|
||||
components: {
|
||||
Trash2Icon,
|
||||
},
|
||||
props: [
|
||||
'card',
|
||||
],
|
||||
methods: {
|
||||
deleteCreditCard(id) {
|
||||
events.$emit('confirm:open', {
|
||||
title: this.$t('Are you sure you want to delete your credit card?'),
|
||||
message: this.$t('We will no longer settle your payments automatically and you will have to fund your account for the next payments.'),
|
||||
action: {
|
||||
id: id,
|
||||
operation: 'delete-credit-card',
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
events.$on('action:confirmed', data => {
|
||||
if (data.operation === 'delete-credit-card')
|
||||
axios.delete(`/api/stripe/credit-cards/${data.id}`)
|
||||
.then(() => {
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your credit card was deleted.'),
|
||||
})
|
||||
})
|
||||
.catch(() => this.$isSomethingWrong())
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -5,22 +5,45 @@
|
||||
|
||||
<!--Payment Options-->
|
||||
<div v-if="isPaymentOptionPage">
|
||||
|
||||
<PopupContent class="px-4">
|
||||
<b class="text-center block mb-3 mt-8">
|
||||
Stripe
|
||||
</b>
|
||||
<ButtonBase @click.native="payByStripe" class="block w-full mb-6" button-style="theme" type="button">
|
||||
<span class="text-theme">
|
||||
Pay With Stripe
|
||||
</span>
|
||||
</ButtonBase>
|
||||
|
||||
<b class="text-center block mb-3 mt-8">
|
||||
PayStack
|
||||
</b>
|
||||
<ButtonBase class="block w-full mb-6" button-style="theme" type="button">
|
||||
<!--Stripe implementation-->
|
||||
<PaymentMethod
|
||||
v-if="config.isStripe"
|
||||
driver="stripe"
|
||||
:description="$t('Pay by your credit card or Apple Pay')"
|
||||
>
|
||||
<span v-if="! paypalMethodsLoaded" @click="payByStripe" class="text-sm text-theme font-bold cursor-pointer">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</PaymentMethod>
|
||||
|
||||
<!--PayPal implementation-->
|
||||
<div v-if="config.isPayPal" :class="{'dark:bg-2x-dark-foreground bg-light-background rounded-xl px-4 mb-2': paypalMethodsLoaded}">
|
||||
<PaymentMethod
|
||||
@click.native="pickedPaymentMethod('paypal')"
|
||||
driver="paypal"
|
||||
:description="$t('Available PayPal Credit, Debit or Credit Card.')"
|
||||
>
|
||||
<span v-if="! paypalMethodsLoaded" class="text-sm text-theme font-bold cursor-pointer">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</PaymentMethod>
|
||||
|
||||
<!--PayPal Buttons-->
|
||||
<div v-if="paypalMethodsLoaded">
|
||||
<div id="paypal-button-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Paystack implementation-->
|
||||
<PaymentMethod
|
||||
v-if="config.isPaystack"
|
||||
driver="paystack"
|
||||
:description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')"
|
||||
>
|
||||
<paystack
|
||||
v-if="user && config"
|
||||
:channels="['bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer']"
|
||||
class="font-bold"
|
||||
currency="ZAR"
|
||||
@@ -32,18 +55,22 @@
|
||||
:callback="paymentSuccessful"
|
||||
:close="paystackClosed"
|
||||
>
|
||||
<span class="text-theme">
|
||||
Pay With PayStack
|
||||
<span class="text-sm text-theme font-bold cursor-pointer">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</paystack>
|
||||
</ButtonBase>
|
||||
|
||||
<b class="text-center block mb-3">
|
||||
PayPal
|
||||
</b>
|
||||
<!--PayPal Button-->
|
||||
<div id="paypal-button-container"></div>
|
||||
</PaymentMethod>
|
||||
</PopupContent>
|
||||
|
||||
<PopupActions>
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="$closePopup()"
|
||||
button-style="secondary"
|
||||
>
|
||||
{{ $t('Cancel Payment') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</div>
|
||||
|
||||
<!--Select Payment Plans-->
|
||||
@@ -55,8 +82,8 @@
|
||||
<label :class="{'text-gray-400': !isYearlyPlans}" class="font-bold cursor-pointer text-xs">
|
||||
{{ $t('Billed Annually') }}
|
||||
</label>
|
||||
<div class="relative inline-block w-14 align-middle select-none">
|
||||
<SwitchInput class="transform scale-90" v-model="isYearlyPlans" :state="isYearlyPlans" />
|
||||
<div class="relative inline-block w-12 align-middle select-none">
|
||||
<SwitchInput class="transform scale-75" v-model="isYearlyPlans" :state="isYearlyPlans" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -85,7 +112,7 @@
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
:button-style="buttonStyle"
|
||||
@click.native="showPaymentOptions"
|
||||
@click.native="isPaymentOptionPage = true"
|
||||
>{{ $t('Upgrade Account') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
@@ -94,6 +121,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PaymentMethod from "../Others/PaymentMethod";
|
||||
import { loadScript } from "@paypal/paypal-js";
|
||||
import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
|
||||
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
|
||||
@@ -110,6 +138,7 @@
|
||||
export default {
|
||||
name: 'SelectPlanSubscriptionPopup',
|
||||
components: {
|
||||
PaymentMethod,
|
||||
paystack,
|
||||
PlanDetail,
|
||||
SwitchInput,
|
||||
@@ -152,6 +181,8 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
paypalMethodsLoaded: false,
|
||||
|
||||
isPaymentOptionPage: false,
|
||||
isYearlyPlans: false,
|
||||
isLoading: false,
|
||||
@@ -160,19 +191,17 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
payByStripe() {
|
||||
axios.post('/api/subscriptions/stripe/checkout', {
|
||||
planCode: this.selectedPlan.data.meta.driver_plan_id.stripe
|
||||
})
|
||||
.then(response => {
|
||||
window.location = response.data.url
|
||||
})
|
||||
pickedPaymentMethod(driver) {
|
||||
if (driver === 'paystack') {
|
||||
this.$closePopup()
|
||||
}
|
||||
if (driver === 'paypal' && !this.paypalMethodsLoaded) {
|
||||
this.PayPalInitialization()
|
||||
}
|
||||
},
|
||||
async showPaymentOptions() {
|
||||
// Show payment buttons page
|
||||
this.isPaymentOptionPage = true
|
||||
async PayPalInitialization() {
|
||||
this.paypalMethodsLoaded = true
|
||||
|
||||
// PayPal
|
||||
let paypal;
|
||||
|
||||
try {
|
||||
@@ -183,7 +212,7 @@
|
||||
} catch (error) {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('failed to load the PayPal components'),
|
||||
message: this.$t('Failed to load the PayPal service'),
|
||||
})
|
||||
}
|
||||
|
||||
@@ -191,8 +220,8 @@
|
||||
const userId = this.user.data.id
|
||||
const app = this
|
||||
|
||||
// Initialize paypal buttons for subscription
|
||||
/*await paypal.Buttons({
|
||||
// Initialize paypal buttons for single charge
|
||||
await paypal.Buttons({
|
||||
createSubscription: function(data, actions) {
|
||||
return actions.subscription.create({
|
||||
plan_id: planId,
|
||||
@@ -202,22 +231,16 @@
|
||||
onApprove: function(data, actions) {
|
||||
app.paymentSuccessful()
|
||||
}
|
||||
}).render('#paypal-button-container');*/
|
||||
|
||||
// Initialize paypal buttons for single charge
|
||||
await paypal.Buttons({
|
||||
createOrder: function(data, actions) {
|
||||
return actions.order.create({
|
||||
purchase_units: [{
|
||||
amount: {
|
||||
value: '10.49',
|
||||
},
|
||||
custom_id: userId
|
||||
}]
|
||||
});
|
||||
}
|
||||
}).render('#paypal-button-container');
|
||||
},
|
||||
payByStripe() {
|
||||
axios.post('/api/stripe/checkout', {
|
||||
planCode: this.selectedPlan.data.meta.driver_plan_id.stripe
|
||||
})
|
||||
.then(response => {
|
||||
window.location = response.data.url
|
||||
})
|
||||
},
|
||||
selectPlan(plan) {
|
||||
this.selectedPlan = plan
|
||||
},
|
||||
|
||||
74
resources/js/components/Subscription/UserBalance.vue
Normal file
74
resources/js/components/Subscription/UserBalance.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div v-if="! hasPaymentMethod" class="card shadow-card">
|
||||
<FormLabel icon="dollar">
|
||||
{{ $t('Balance') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ user.data.relationships.balance.data.attributes.formatted }}
|
||||
</b>
|
||||
|
||||
<!-- Make payment form -->
|
||||
<ValidationObserver ref="fundAccount" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
|
||||
<AppInputText :description="$t('The amount will be increased as soon as we register your charge from payment gateway.')" :error="errors[0]" :is-last="true">
|
||||
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
|
||||
<input v-model="chargeAmount"
|
||||
:placeholder="$t('Fund Your Account Balance...')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'border-red-700': errors[0]}"
|
||||
/>
|
||||
<ButtonBase type="submit" button-style="theme" class="sm:w-auto w-full">
|
||||
{{ $t('Make a Payment') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
|
||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import AppInputText from "../Admin/AppInputText"
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'UserBalance',
|
||||
components: {
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
AppInputText,
|
||||
ButtonBase,
|
||||
FormLabel
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
]),
|
||||
hasPaymentMethod() {
|
||||
return this.user.data.relationships.creditCards && this.user.data.relationships.creditCards.data.length > 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chargeAmount: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async makePayment() {
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.fundAccount.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Show payment methods popup
|
||||
this.$store.dispatch('callSingleChargeProcess', this.chargeAmount)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
189
resources/js/components/Subscription/UserBillingAlerts.vue
Normal file
189
resources/js/components/Subscription/UserBillingAlerts.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="bell">
|
||||
{{ $t('Billing Alert') }}
|
||||
</FormLabel>
|
||||
|
||||
<div v-if="user.data.relationships.alert">
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5 flex items-center">
|
||||
{{ user.data.relationships.alert.data.attributes.formatted }}
|
||||
<edit2-icon v-if="! showUpdateBillingAlertForm" @click="showUpdateBillingAlertForm = ! showUpdateBillingAlertForm" size="12" class="vue-feather cursor-pointer ml-2 transform -translate-y-0.5" />
|
||||
<trash2-icon v-if="showUpdateBillingAlertForm" @click="deleteBillingAlert" size="12" class="vue-feather cursor-pointer ml-2 transform -translate-y-0.5" />
|
||||
</b>
|
||||
|
||||
<b class="block text-sm text-gray-400">
|
||||
{{ $t('Alert will be triggered after you reach the value above.') }}
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<ValidationObserver v-if="showUpdateBillingAlertForm" ref="updatebillingAlertForm" @submit.prevent="updateBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
|
||||
<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
|
||||
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
|
||||
<input v-model="billingAlertAmount"
|
||||
:placeholder="$t('Alert Amount...')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'border-red-700': errors[0]}"
|
||||
/>
|
||||
<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="sm:w-auto w-full">
|
||||
{{ $t('Update Alert') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
|
||||
<ValidationObserver v-if="! user.data.relationships.alert" ref="billingAlertForm" @submit.prevent="setBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
|
||||
<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
|
||||
<div class="flex space-x-4">
|
||||
<input v-model="billingAlertAmount"
|
||||
:placeholder="$t('Alert Amount...')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'border-red-700': errors[0]}"
|
||||
/>
|
||||
<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="submit-button">
|
||||
{{ $t('Set Alert') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
|
||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||
import AppInputText from "../Admin/AppInputText"
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import { Edit2Icon, Trash2Icon } from 'vue-feather-icons'
|
||||
import {events} from "../../bus";
|
||||
import {mapGetters} from "vuex";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: 'UserBillingAlerts',
|
||||
components: {
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
AppInputText,
|
||||
ButtonBase,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
FormLabel,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
billingAlertAmount: undefined,
|
||||
isSendingBillingAlert: false,
|
||||
showUpdateBillingAlertForm: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async updateBillingAlert() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.updatebillingAlertForm.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
this.isSendingBillingAlert = true
|
||||
|
||||
axios
|
||||
.patch(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`, {
|
||||
amount: this.billingAlertAmount
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
this.showUpdateBillingAlertForm = false
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your billing alert was updated successfully'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isSendingBillingAlert = false
|
||||
})
|
||||
},
|
||||
async setBillingAlert() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.billingAlertForm.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
this.isSendingBillingAlert = true
|
||||
|
||||
axios
|
||||
.post('/api/subscriptions/billing-alerts', {
|
||||
amount: this.billingAlertAmount
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your billing alert was set successfully'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isSendingBillingAlert = false
|
||||
})
|
||||
},
|
||||
deleteBillingAlert() {
|
||||
events.$emit('confirm:open', {
|
||||
title: this.$t('Are you sure you want to delete your alert?'),
|
||||
message: this.$t('You will no longer receive any notifications that your billing limit has been exceeded.'),
|
||||
action: {
|
||||
id: this.user.data.relationships.alert.data.id,
|
||||
operation: 'delete-billing-alert',
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
events.$on('action:confirmed', data => {
|
||||
|
||||
if (data.operation === 'delete-billing-alert')
|
||||
axios.delete(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`)
|
||||
.then(() => {
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
this.showUpdateBillingAlertForm = false
|
||||
this.billingAlertAmount = undefined
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your billing alert was deleted.'),
|
||||
})
|
||||
})
|
||||
.catch(() => this.$isSomethingWrong())
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Edit your Subscription') }}
|
||||
</FormLabel>
|
||||
|
||||
<AppInputSwitch :title="$t('Cancel Subscription')" :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')">
|
||||
<ButtonBase @click.native="cancelSubscriptionConfirmation" :loading="isCancelling" class="sm:w-auto w-full" button-style="secondary">
|
||||
{{ $t('Cancel Now') }}
|
||||
</ButtonBase>
|
||||
</AppInputSwitch>
|
||||
|
||||
<AppInputSwitch :title="$t('Upgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
|
||||
<ButtonBase @click.native="$openUpgradeOptions" class="sm:w-auto w-full" button-style="secondary">
|
||||
{{ $t('Upgrade Now') }}
|
||||
</ButtonBase>
|
||||
</AppInputSwitch>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputSwitch from "../Admin/AppInputSwitch"
|
||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import {events} from "../../bus";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: 'UserEditSubscription',
|
||||
components: {
|
||||
AppInputSwitch,
|
||||
ButtonBase,
|
||||
FormLabel
|
||||
},
|
||||
computed: {
|
||||
subscription() {
|
||||
return this.$store.getters.user.data.relationships.subscription.data
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isCancelling: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancelSubscriptionConfirmation() {
|
||||
events.$emit('confirm:open', {
|
||||
title: this.$t('Are you sure you want to cancel subscription?'),
|
||||
message: this.$t("You'll continue to have access to the features you've paid for until the end of your billing cycle."),
|
||||
action: {
|
||||
operation: 'cancel-subscription',
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
events.$on('action:confirmed', data => {
|
||||
if (data.operation === 'cancel-subscription') {
|
||||
|
||||
// Start deleting spinner button
|
||||
this.isCancelling = true
|
||||
|
||||
// Send post request
|
||||
axios
|
||||
.post('/api/subscriptions/cancel')
|
||||
.then(() => {
|
||||
|
||||
// Update user data
|
||||
this.$store.dispatch('getAppData').then(() => {
|
||||
this.fetchSubscriptionDetail()
|
||||
})
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('popup_subscription_cancel.title'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isCancelling = false
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div v-if="! hasSubscription" class="card shadow-card">
|
||||
<InfoBox style="margin-bottom: 0">
|
||||
<p>{{ $t("You don't have any subscription") }}</p>
|
||||
</InfoBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||
|
||||
export default {
|
||||
name: 'UserEmptySubscription',
|
||||
components: {
|
||||
InfoBox
|
||||
},
|
||||
computed: {
|
||||
hasSubscription() {
|
||||
return this.$store.getters.user.data.relationships.subscription
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
62
resources/js/components/Subscription/UserFailedPayments.vue
Normal file
62
resources/js/components/Subscription/UserFailedPayments.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div v-if="user.data.relationships.failedPayments && user.data.relationships.failedPayments.data.length > 0" class="card shadow-card">
|
||||
<FormLabel icon="frown">
|
||||
{{ $t('Failed Payments') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
-{{ user.data.meta.totalDebt }}
|
||||
</b>
|
||||
|
||||
<b class="mb-3 block text-sm text-gray-400 mb-5">
|
||||
{{ $t("We are unable to charge your usage. Please register new credit card or fund your account with sufficient amount and we'll give it another try!") }}
|
||||
</b>
|
||||
|
||||
<!--Failed Payments-->
|
||||
<div
|
||||
v-for="payment in user.data.relationships.failedPayments.data"
|
||||
:key="payment.data.id"
|
||||
class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed"
|
||||
>
|
||||
<div class="w-2/4 leading-none">
|
||||
<b class="text-sm font-bold leading-none">
|
||||
{{ payment.data.attributes.note }}
|
||||
</b>
|
||||
</div>
|
||||
<div class="text-left w-1/4">
|
||||
<span class="text-sm font-bold text-gray-560 capitalize">
|
||||
{{ $t(payment.data.attributes.source) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-right w-1/4">
|
||||
<span class="text-sm font-bold">
|
||||
{{ payment.data.attributes.created_at }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-right w-1/4">
|
||||
<span class="text-sm font-bold text-red">
|
||||
{{ payment.data.attributes.amount }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'UserFailedPayments',
|
||||
components: {
|
||||
FormLabel,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
])
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Subscription') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ status }}
|
||||
</b>
|
||||
<b class="mb-3 block text-sm text-gray-400 mb-8">
|
||||
{{ subscription.data.relationships.plan.data.attributes.name }} / {{ price }}
|
||||
</b>
|
||||
|
||||
<div v-for="(limit, i) in limitations" :key="i" :class="{'mb-6': (Object.keys(limitations).length - 1) !== i}">
|
||||
<b class="mb-3 block text-sm text-gray-400">
|
||||
{{ limit.message }}
|
||||
</b>
|
||||
<ProgressLine :data="limit.distribution" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import ProgressLine from "../Admin/ProgressLine"
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'UserFixedSubscriptionDetail',
|
||||
components: {
|
||||
ProgressLine,
|
||||
FormLabel,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
]),
|
||||
subscription() {
|
||||
return this.$store.getters.user.data.relationships.subscription
|
||||
},
|
||||
limitations() {
|
||||
let limitations = []
|
||||
|
||||
Object
|
||||
.entries(this.user.data.meta.limitations)
|
||||
.map(([key, item]) => {
|
||||
|
||||
let payload = {
|
||||
color: {
|
||||
'max_storage_amount': 'warning',
|
||||
'max_team_members': 'purple',
|
||||
},
|
||||
message: {
|
||||
'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
|
||||
'max_team_members': `Total ${item.use} of ${item.total} Members`,
|
||||
},
|
||||
title: {
|
||||
'max_storage_amount': `Storage`,
|
||||
'max_team_members': `Team Members`,
|
||||
}
|
||||
}
|
||||
|
||||
limitations.push({
|
||||
message: payload.message[key],
|
||||
distribution: [
|
||||
{
|
||||
progress: item.percentage,
|
||||
color: payload.color[key],
|
||||
title: payload.title[key],
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
|
||||
return limitations
|
||||
},
|
||||
status() {
|
||||
return {
|
||||
'active': `Active until ${this.subscription.data.attributes.renews_at}`,
|
||||
'cancelled': `Ends at ${this.subscription.data.attributes.ends_at}`,
|
||||
}[this.subscription.data.attributes.status]
|
||||
},
|
||||
price() {
|
||||
return {
|
||||
'month': `${this.subscription.data.relationships.plan.data.attributes.price} Per Month`,
|
||||
'year': `${this.subscription.data.relationships.plan.data.attributes.price} Per Year`,
|
||||
}[this.subscription.data.relationships.plan.data.attributes.interval]
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div v-if="config.isStripe" class="card shadow-card">
|
||||
<FormLabel icon="credit-card">
|
||||
{{ $t('Payment Method') }}
|
||||
</FormLabel>
|
||||
|
||||
<!-- User has registered payment method -->
|
||||
<div v-if="hasPaymentMethod">
|
||||
<b v-if="config.subscriptionType === 'metered' && user.data.relationships.balance.data.attributes.balance > 0" class="mb-3 block text-sm mb-5">
|
||||
{{ $t('credit_to_auto_withdraw', {credit: user.data.relationships.balance.data.attributes.formatted}) }}
|
||||
</b>
|
||||
|
||||
<!-- Card -->
|
||||
<PaymentCard
|
||||
v-for="card in user.data.relationships.creditCards.data"
|
||||
:key="card.data.id"
|
||||
:card="card"
|
||||
/>
|
||||
|
||||
<small class="text-xs text-gray-500 pt-3 leading-none sm:block hidden">
|
||||
{{ $t('We are settling your payment automatically via your saved credit card.') }}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- User doesn't have registered payment method -->
|
||||
<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">
|
||||
{{ $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">
|
||||
<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">
|
||||
{{ $t('Store My Credit Card') }}
|
||||
</ButtonBase>
|
||||
<div id="error-message">
|
||||
<!-- Display error message to your customers here -->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import PaymentCard from "./PaymentCard"
|
||||
import Spinner from "../FilesView/Spinner"
|
||||
import {mapGetters} from "vuex";
|
||||
import {events} from "../../bus";
|
||||
import {loadStripe} from "@stripe/stripe-js";
|
||||
import axios from "axios";
|
||||
|
||||
// Define stripe variables
|
||||
let stripe, elements = undefined
|
||||
|
||||
export default {
|
||||
name: 'UserStoredPaymentMethods',
|
||||
components: {
|
||||
ButtonBase,
|
||||
FormLabel,
|
||||
PaymentCard,
|
||||
Spinner
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isDarkMode',
|
||||
'config',
|
||||
'user',
|
||||
]),
|
||||
hasPaymentMethod() {
|
||||
return this.user.data.relationships.creditCards && this.user.data.relationships.creditCards.data.length > 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
|
||||
isCreditCardForm: false,
|
||||
|
||||
stripeData: {
|
||||
isInitialization: true,
|
||||
storingStripePaymentMethod: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async storeStripePaymentMethod() {
|
||||
|
||||
this.stripeData.storingStripePaymentMethod = true
|
||||
|
||||
const {error} = await stripe.confirmSetup({
|
||||
//`Elements` instance that was used to create the Payment Element
|
||||
elements,
|
||||
redirect: 'if_required',
|
||||
confirmParams: {
|
||||
return_url: window.location.href,
|
||||
}
|
||||
});
|
||||
|
||||
if (error) {
|
||||
// This point will only be reached if there is an immediate error when
|
||||
// confirming the payment. Show error to your customer (e.g., payment
|
||||
// details incomplete)
|
||||
const messageContainer = document.querySelector('#error-message');
|
||||
messageContainer.textContent = error.message;
|
||||
} else {
|
||||
// Your customer will be redirected to your `return_url`. For some payment
|
||||
// methods like iDEAL, your customer will be redirected to an intermediate
|
||||
// site first to authorize the payment, then redirected to the `return_url`.
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your credit card was stored successfully'),
|
||||
})
|
||||
|
||||
// TODO: L9 - load credit card after was stored in database
|
||||
}
|
||||
|
||||
this.stripeData.storingStripePaymentMethod = false
|
||||
},
|
||||
async stripeInit() {
|
||||
|
||||
// Init stripe js
|
||||
stripe = await loadStripe(this.config.stripe_public_key);
|
||||
|
||||
await axios.get('/api/stripe/setup-intent')
|
||||
.then(response => {
|
||||
// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
|
||||
elements = stripe.elements({
|
||||
clientSecret: response.data.client_secret,
|
||||
appearance: {
|
||||
theme: 'stripe',
|
||||
variables: {
|
||||
colorPrimary: this.config.app_color,
|
||||
fontFamily: 'Nunito',
|
||||
borderRadius: '8px',
|
||||
colorText: this.isDarkMode ? '#bec6cf' : '#1B2539',
|
||||
colorBackground: this.isDarkMode ? '#191b1e' : '#fff',
|
||||
fontWeightNormal: '700',
|
||||
fontSizeSm: '0.875rem',
|
||||
colorSuccessText: '#0ABB87',
|
||||
colorSuccess: '#0ABB87',
|
||||
colorWarning: '#fd397a',
|
||||
colorWarningText: '#fd397a',
|
||||
colorDangerText: '#fd397a',
|
||||
colorTextSecondary: '#6b7280',
|
||||
spacingGridRow: '20px',
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Create and mount the Payment Element
|
||||
const paymentElement = elements.create('payment');
|
||||
|
||||
paymentElement.mount('#payment-element');
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
})
|
||||
|
||||
this.stripeData.isInitialization = false
|
||||
},
|
||||
showStoreCreditCardForm() {
|
||||
this.isCreditCardForm = !this.isCreditCardForm
|
||||
this.stripeInit()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="file-text">
|
||||
{{ $t('Transactions') }}
|
||||
</FormLabel>
|
||||
|
||||
<DatatableWrapper
|
||||
api="/api/subscriptions/transactions"
|
||||
:paginator="true"
|
||||
:columns="columns"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-4">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.note }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<ColorLabel :color="$getTransactionStatusColor(row.data.attributes.status)">
|
||||
{{ row.data.attributes.status }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
|
||||
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<!--Empty page-->
|
||||
<template v-slot:empty-page>
|
||||
<InfoBox>
|
||||
<p>{{ $t('admin_page_user.invoices.empty') }}</p>
|
||||
</InfoBox>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ColorLabel from "../Others/ColorLabel"
|
||||
import DatatableWrapper from "../Others/Tables/DatatableWrapper"
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||
|
||||
export default {
|
||||
name: 'UserTransactionsForFixedBilling',
|
||||
components: {ColorLabel, DatatableWrapper, FormLabel, InfoBox},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
label: this.$t('Note'),
|
||||
field: 'note',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Status'),
|
||||
field: 'status',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_invoices.table.total'),
|
||||
field: 'amount',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Payed At'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Service'),
|
||||
field: 'driver',
|
||||
sortable: true
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="file-text">
|
||||
{{ $t('Transactions') }}
|
||||
</FormLabel>
|
||||
|
||||
<DatatableWrapper
|
||||
api="/api/subscriptions/transactions"
|
||||
:paginator="true"
|
||||
:columns="columns"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-4">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.note }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<ColorLabel class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
|
||||
{{ row.data.attributes.status }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="py-4">
|
||||
<span class="text-sm font-bold capitalize">
|
||||
{{ $t(row.data.attributes.type) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
|
||||
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<!--Empty page-->
|
||||
<template v-slot:empty-page>
|
||||
<InfoBox>
|
||||
<p>{{ $t('admin_page_user.invoices.empty') }}</p>
|
||||
</InfoBox>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ColorLabel from "../Others/ColorLabel"
|
||||
import DatatableWrapper from "../Others/Tables/DatatableWrapper"
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||
|
||||
export default {
|
||||
name: 'UserTransactionsForMeteredBilling',
|
||||
components: {
|
||||
ColorLabel,
|
||||
DatatableWrapper,
|
||||
FormLabel,
|
||||
InfoBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
label: this.$t('Note'),
|
||||
field: 'note',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Status'),
|
||||
field: 'status',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Type'),
|
||||
field: 'status',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_invoices.table.total'),
|
||||
field: 'amount',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Payed At'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Service'),
|
||||
field: 'driver',
|
||||
sortable: true
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div v-if="['paystack', 'paypal'].includes(subscription.attributes.driver)" class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Update Payments') }}
|
||||
</FormLabel>
|
||||
|
||||
<AppInputSwitch :title="$t('Update your Payment Method')" :description="$t('You will be redirected to your payment provider to edit your payment method.')" :is-last="true">
|
||||
<ButtonBase @click.native="updatePaymentMethod" :loading="isGeneratedUpdateLink" class="sm:w-auto w-full" button-style="theme">
|
||||
{{ $t('Update Payments') }}
|
||||
</ButtonBase>
|
||||
</AppInputSwitch>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputSwitch from "../Admin/AppInputSwitch"
|
||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import axios from "axios";
|
||||
import {events} from "../../bus";
|
||||
|
||||
export default {
|
||||
name: 'UserUpdatePaymentMethodsExternally',
|
||||
components: {
|
||||
AppInputSwitch,
|
||||
ButtonBase,
|
||||
FormLabel
|
||||
},
|
||||
computed: {
|
||||
subscription() {
|
||||
return this.$store.getters.user.data.relationships.subscription.data
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isGeneratedUpdateLink: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updatePaymentMethod() {
|
||||
|
||||
this.isGeneratedUpdateLink = true
|
||||
|
||||
axios.post(`/api/subscriptions/edit/${this.subscription.id}`)
|
||||
.then(response => {
|
||||
window.location = response.data.url
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
|
||||
this.isGeneratedUpdateLink = false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
54
resources/js/components/Subscription/UserUsageEstimates.vue
Normal file
54
resources/js/components/Subscription/UserUsageEstimates.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel icon="bar-chart">
|
||||
{{ $t('Usage Estimates') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ user.data.meta.usages.costEstimate }}
|
||||
</b>
|
||||
|
||||
<b class="mb-3 block text-sm text-gray-400 mb-5">
|
||||
{{ user.data.relationships.subscription.data.attributes.updated_at }} {{ $t('till now') }}
|
||||
</b>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in user.data.meta.usages.featureEstimates" :key="i">
|
||||
<div class="w-2/4 leading-none">
|
||||
<b class="text-sm font-bold leading-none">
|
||||
{{ $t(usage.feature) }}
|
||||
</b>
|
||||
<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
|
||||
{{ $t(`feature_usage_desc_${usage.feature}`) }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="text-left w-1/4">
|
||||
<span class="text-sm font-bold text-gray-560">
|
||||
{{ usage.usage }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-right w-1/4">
|
||||
<span class="text-sm font-bold text-theme">
|
||||
{{ usage.cost }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'UserUsageEstimates',
|
||||
components: {
|
||||
FormLabel
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
])
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user