mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
upload request prototype UI
This commit is contained in:
Čarodej
@@ -9,7 +9,10 @@
|
||||
<div v-if="row.data.relationships.user" class="flex items-center">
|
||||
<MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
|
||||
<b
|
||||
class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
|
||||
style="max-width: 155px"
|
||||
>
|
||||
{{ row.data.relationships.user.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs text-gray-600 dark:text-gray-500">
|
||||
@@ -38,7 +41,11 @@
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<div class="w-28">
|
||||
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
|
||||
<img
|
||||
class="inline-block max-h-5"
|
||||
:src="$getPaymentLogo(row.data.attributes.driver)"
|
||||
:alt="row.data.attributes.driver"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="pl-3 text-right md:pl-1">
|
||||
|
||||
@@ -9,7 +9,10 @@
|
||||
<div v-if="row.data.relationships.user" class="flex items-center">
|
||||
<MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
|
||||
<b
|
||||
class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
|
||||
style="max-width: 155px"
|
||||
>
|
||||
{{ row.data.relationships.user.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs text-gray-600 dark:text-gray-500">
|
||||
@@ -43,7 +46,11 @@
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<div class="w-28">
|
||||
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
|
||||
<img
|
||||
class="inline-block max-h-5"
|
||||
:src="$getPaymentLogo(row.data.attributes.driver)"
|
||||
:alt="row.data.attributes.driver"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="pl-3 text-right md:pl-1">
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-between rounded-lg bg-light-background py-3 px-2 dark:bg-2x-dark-foreground md:px-4">
|
||||
<div
|
||||
class="flex items-center justify-between rounded-lg bg-light-background py-3 px-2 dark:bg-2x-dark-foreground md:px-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img :src="`/assets/gateways/${card.data.attributes.brand}.svg`" alt="" class="mr-3 h-5 rounded" />
|
||||
<b class="whitespace-nowrap text-sm font-bold capitalize leading-none">
|
||||
@@ -26,7 +28,9 @@ export default {
|
||||
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.'),
|
||||
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',
|
||||
|
||||
@@ -10,7 +10,9 @@
|
||||
<b class="flex-1 pl-4 text-left text-lg">
|
||||
{{ plan.data.attributes.name }}
|
||||
</b>
|
||||
<span class="text-theme bg-theme-100 ml-9 inline-block whitespace-nowrap rounded-xl py-1 px-2 text-sm font-extrabold">
|
||||
<span
|
||||
class="text-theme bg-theme-100 ml-9 inline-block whitespace-nowrap rounded-xl py-1 px-2 text-sm font-extrabold"
|
||||
>
|
||||
{{ plan.data.attributes.price }} /
|
||||
{{ $t(`interval.${plan.data.attributes.interval}`) }}
|
||||
</span>
|
||||
|
||||
@@ -6,11 +6,19 @@
|
||||
<div v-if="isPaymentOptionPage">
|
||||
<PopupContent>
|
||||
<!--Stripe implementation-->
|
||||
<PaymentMethod v-if="config.isStripe" driver="stripe" :description="$t('Pay by your credit card or Apple Pay')">
|
||||
<PaymentMethod
|
||||
v-if="config.isStripe"
|
||||
driver="stripe"
|
||||
:description="$t('Pay by your credit card or Apple Pay')"
|
||||
>
|
||||
<div v-if="stripe.isGettingCheckoutLink" class="translate-y-3 scale-50 transform">
|
||||
<Spinner />
|
||||
</div>
|
||||
<span @click="payByStripe" :class="{ 'opacity-0': stripe.isGettingCheckoutLink }" class="text-theme cursor-pointer text-sm font-bold">
|
||||
<span
|
||||
@click="payByStripe"
|
||||
:class="{ 'opacity-0': stripe.isGettingCheckoutLink }"
|
||||
class="text-theme cursor-pointer text-sm font-bold"
|
||||
>
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</PaymentMethod>
|
||||
@@ -22,11 +30,19 @@
|
||||
'mb-2 rounded-xl bg-light-background px-4 dark:bg-2x-dark-foreground': paypal.isMethodsLoaded,
|
||||
}"
|
||||
>
|
||||
<PaymentMethod @click.native="pickedPaymentMethod('paypal')" driver="paypal" :description="$t('Available PayPal Credit, Debit or Credit Card.')">
|
||||
<PaymentMethod
|
||||
@click.native="pickedPaymentMethod('paypal')"
|
||||
driver="paypal"
|
||||
:description="$t('Available PayPal Credit, Debit or Credit Card.')"
|
||||
>
|
||||
<div v-if="paypal.isMethodLoading" class="translate-y-3 scale-50 transform">
|
||||
<Spinner />
|
||||
</div>
|
||||
<span v-if="!paypal.isMethodsLoaded" :class="{ 'opacity-0': paypal.isMethodLoading }" class="text-theme cursor-pointer text-sm font-bold">
|
||||
<span
|
||||
v-if="!paypal.isMethodsLoaded"
|
||||
:class="{ 'opacity-0': paypal.isMethodLoading }"
|
||||
class="text-theme cursor-pointer text-sm font-bold"
|
||||
>
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</PaymentMethod>
|
||||
@@ -36,7 +52,11 @@
|
||||
</div>
|
||||
|
||||
<!--Paystack implementation-->
|
||||
<PaymentMethod v-if="config.isPaystack" driver="paystack" :description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')">
|
||||
<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']"
|
||||
@@ -67,18 +87,24 @@
|
||||
<!--Select Payment Plans-->
|
||||
<div v-if="!isPaymentOptionPage">
|
||||
<PopupContent v-if="plans">
|
||||
|
||||
<InfoBox v-if="plans.data.length === 0" class="!mb-0">
|
||||
<p>There isn't any plan yet.</p>
|
||||
</InfoBox>
|
||||
<InfoBox v-if="plans.data.length === 0" class="!mb-0">
|
||||
<p>There isn't any plan yet.</p>
|
||||
</InfoBox>
|
||||
|
||||
<!--Toggle yearly billing-->
|
||||
<div v-if="hasYearlyPlans.length > 0" class="mb-2 px-5 text-right">
|
||||
<label :class="{ 'text-gray-400': !isSelectedYearlyPlans }" class="cursor-pointer text-xs font-bold">
|
||||
<label
|
||||
:class="{ 'text-gray-400': !isSelectedYearlyPlans }"
|
||||
class="cursor-pointer text-xs font-bold"
|
||||
>
|
||||
{{ $t('Billed Annually') }}
|
||||
</label>
|
||||
<div class="relative inline-block w-12 select-none align-middle">
|
||||
<SwitchInput class="scale-75 transform" v-model="isSelectedYearlyPlans" :state="isSelectedYearlyPlans" />
|
||||
<SwitchInput
|
||||
class="scale-75 transform"
|
||||
v-model="isSelectedYearlyPlans"
|
||||
:state="isSelectedYearlyPlans"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -88,7 +114,9 @@
|
||||
v-for="(plan, i) in plans.data"
|
||||
:plan="plan"
|
||||
:key="plan.data.id"
|
||||
v-if="plan.data.attributes.interval === intervalPlanType && userSubscribedPlanId !== plan.data.id"
|
||||
v-if="
|
||||
plan.data.attributes.interval === intervalPlanType && userSubscribedPlanId !== plan.data.id
|
||||
"
|
||||
:is-selected="selectedPlan && selectedPlan.data.id === plan.data.id"
|
||||
@click.native="selectPlan(plan)"
|
||||
/>
|
||||
@@ -97,8 +125,16 @@
|
||||
|
||||
<!--Actions-->
|
||||
<PopupActions>
|
||||
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }} </ButtonBase>
|
||||
<ButtonBase class="w-full" v-if="plans.data.length !== 0" :button-style="buttonStyle" @click.native="isPaymentOptionPage = true">{{ $t('Upgrade Account') }} </ButtonBase>
|
||||
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary"
|
||||
>{{ $t('popup_move_item.cancel') }}
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
class="w-full"
|
||||
v-if="plans.data.length !== 0"
|
||||
:button-style="buttonStyle"
|
||||
@click.native="isPaymentOptionPage = true"
|
||||
>{{ $t('Upgrade Account') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</div>
|
||||
</PopupWrapper>
|
||||
@@ -119,12 +155,12 @@ import { mapGetters } from 'vuex'
|
||||
import { events } from '../../bus'
|
||||
import axios from 'axios'
|
||||
import Spinner from '../FilesView/Spinner'
|
||||
import InfoBox from "../Others/Forms/InfoBox";
|
||||
import InfoBox from '../Others/Forms/InfoBox'
|
||||
|
||||
export default {
|
||||
name: 'SelectPlanSubscriptionPopup',
|
||||
components: {
|
||||
InfoBox,
|
||||
InfoBox,
|
||||
Spinner,
|
||||
PaymentMethod,
|
||||
paystack,
|
||||
@@ -150,7 +186,11 @@ export default {
|
||||
return this.selectedPlan ? 'theme' : 'secondary'
|
||||
},
|
||||
userSubscribedPlanId() {
|
||||
return this.user && this.user.data.relationships.subscription && this.user.data.relationships.subscription.data.relationships.plan.data.id
|
||||
return (
|
||||
this.user &&
|
||||
this.user.data.relationships.subscription &&
|
||||
this.user.data.relationships.subscription.data.relationships.plan.data.id
|
||||
)
|
||||
},
|
||||
hasYearlyPlans() {
|
||||
return this.plans.data.filter((plan) => plan.data.attributes.interval === 'year')
|
||||
|
||||
@@ -9,9 +9,27 @@
|
||||
</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="Amount" :rules="`required|min_value:${user.data.meta.totalDebt.amount}`">
|
||||
<AppInputText :description="$t('The amount will be increased as soon as we register your charge from payment gateway.')" :error="errors[0]" :is-last="true">
|
||||
<ValidationObserver
|
||||
ref="fundAccount"
|
||||
@submit.prevent="makePayment"
|
||||
v-slot="{ invalid }"
|
||||
tag="form"
|
||||
class="mt-6"
|
||||
>
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
v-slot="{ errors }"
|
||||
mode="passive"
|
||||
name="Amount"
|
||||
:rules="`required|min_value:${user.data.meta.totalDebt.amount}`"
|
||||
>
|
||||
<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="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
|
||||
<input
|
||||
v-model="chargeAmount"
|
||||
|
||||
@@ -13,7 +13,12 @@
|
||||
size="12"
|
||||
class="vue-feather ml-2 -translate-y-0.5 transform cursor-pointer"
|
||||
/>
|
||||
<trash2-icon v-if="showUpdateBillingAlertForm" @click="deleteBillingAlert" size="12" class="vue-feather ml-2 -translate-y-0.5 transform cursor-pointer" />
|
||||
<trash2-icon
|
||||
v-if="showUpdateBillingAlertForm"
|
||||
@click="deleteBillingAlert"
|
||||
size="12"
|
||||
class="vue-feather ml-2 -translate-y-0.5 transform cursor-pointer"
|
||||
/>
|
||||
</b>
|
||||
|
||||
<b class="block text-sm text-gray-400">
|
||||
@@ -21,9 +26,24 @@
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<ValidationObserver v-if="showUpdateBillingAlertForm" ref="updatebillingAlertForm" @submit.prevent="updateBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
|
||||
<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">
|
||||
<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="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
|
||||
<input
|
||||
v-model="billingAlertAmount"
|
||||
@@ -34,7 +54,13 @@
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="w-full sm:w-auto">
|
||||
<ButtonBase
|
||||
:loadint="isSendingBillingAlert"
|
||||
:disabled="isSendingBillingAlert"
|
||||
type="submit"
|
||||
button-style="theme"
|
||||
class="w-full sm:w-auto"
|
||||
>
|
||||
{{ $t('Update Alert') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
@@ -42,9 +68,24 @@
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
|
||||
<ValidationObserver v-if="!user.data.relationships.alert" ref="billingAlertForm" @submit.prevent="setBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
|
||||
<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">
|
||||
<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="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
|
||||
<input
|
||||
v-model="billingAlertAmount"
|
||||
@@ -55,7 +96,13 @@
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
/>
|
||||
<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="w-full sm:w-auto">
|
||||
<ButtonBase
|
||||
:loadint="isSendingBillingAlert"
|
||||
:disabled="isSendingBillingAlert"
|
||||
type="submit"
|
||||
button-style="theme"
|
||||
class="w-full sm:w-auto"
|
||||
>
|
||||
{{ $t('Set Alert') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
@@ -161,7 +208,9 @@ export default {
|
||||
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.'),
|
||||
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',
|
||||
|
||||
@@ -7,14 +7,27 @@
|
||||
<AppInputButton
|
||||
v-if="subscription.attributes.status !== 'cancelled'"
|
||||
: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.')"
|
||||
: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="w-full sm:w-auto" button-style="secondary">
|
||||
<ButtonBase
|
||||
@click.native="cancelSubscriptionConfirmation"
|
||||
:loading="isCancelling"
|
||||
class="w-full sm:w-auto"
|
||||
button-style="secondary"
|
||||
>
|
||||
{{ $t('Cancel Now') }}
|
||||
</ButtonBase>
|
||||
</AppInputButton>
|
||||
|
||||
<AppInputButton :title="$t('Upgrade or Downgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
|
||||
<AppInputButton
|
||||
:title="$t('Upgrade or Downgrade Plan')"
|
||||
:description="$t('You can upgrade your plan at any time you want.')"
|
||||
:is-last="true"
|
||||
>
|
||||
<ButtonBase @click.native="$openUpgradeOptions" class="w-full sm:w-auto" button-style="secondary">
|
||||
{{ $t('Change Plan') }}
|
||||
</ButtonBase>
|
||||
@@ -57,7 +70,9 @@ export default {
|
||||
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."),
|
||||
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',
|
||||
},
|
||||
|
||||
@@ -12,7 +12,13 @@
|
||||
{{ $t('Upgrade your account to get more.') }}
|
||||
</b>
|
||||
|
||||
<ButtonBase v-if="$store.getters.config.allowed_payments" @click.native="$openUpgradeOptions" type="submit" button-style="theme" class="mt-4 w-full">
|
||||
<ButtonBase
|
||||
v-if="$store.getters.config.allowed_payments"
|
||||
@click.native="$openUpgradeOptions"
|
||||
type="submit"
|
||||
button-style="theme"
|
||||
class="mt-4 w-full"
|
||||
>
|
||||
{{ $t('Upgrade Your Account') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,22 @@
|
||||
<template>
|
||||
<div v-if="user.data.relationships.failedPayments && user.data.relationships.failedPayments.data.length > 0" class="card shadow-card">
|
||||
<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="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl"> -{{ user.data.meta.totalDebt.formatted }} </b>
|
||||
<b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
|
||||
-{{ user.data.meta.totalDebt.formatted }}
|
||||
</b>
|
||||
|
||||
<b class="mb-3 mb-5 block text-sm text-gray-400">
|
||||
{{ $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!") }}
|
||||
{{
|
||||
$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-->
|
||||
|
||||
@@ -6,7 +6,12 @@
|
||||
|
||||
<!-- 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 mb-5 block text-sm">
|
||||
<b
|
||||
v-if="
|
||||
config.subscriptionType === 'metered' && user.data.relationships.balance.data.attributes.balance > 0
|
||||
"
|
||||
class="mb-3 mb-5 block text-sm"
|
||||
>
|
||||
{{
|
||||
$t('credit_to_auto_withdraw', {
|
||||
credit: user.data.relationships.balance.data.attributes.formatted,
|
||||
@@ -44,7 +49,12 @@
|
||||
<div id="payment-element">
|
||||
<!-- Elements will create form elements here -->
|
||||
</div>
|
||||
<ButtonBase :loading="stripe.storingStripePaymentMethod" type="submit" button-style="theme" class="mt-4 w-full">
|
||||
<ButtonBase
|
||||
:loading="stripe.storingStripePaymentMethod"
|
||||
type="submit"
|
||||
button-style="theme"
|
||||
class="mt-4 w-full"
|
||||
>
|
||||
{{ $t('Store My Credit Card') }}
|
||||
</ButtonBase>
|
||||
<div id="error-message">
|
||||
|
||||
@@ -4,7 +4,12 @@
|
||||
{{ $t('Transactions') }}
|
||||
</FormLabel>
|
||||
|
||||
<DatatableWrapper class="overflow-x-auto" api="/api/subscriptions/transactions" :paginator="true" :columns="columns">
|
||||
<DatatableWrapper
|
||||
class="overflow-x-auto"
|
||||
api="/api/subscriptions/transactions"
|
||||
:paginator="true"
|
||||
:columns="columns"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<FixedTransactionRow :row="row" />
|
||||
</template>
|
||||
@@ -36,7 +41,9 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
return this.$store.getters.transactionColumns.filter((column) => !['type', 'user_id'].includes(column.field))
|
||||
return this.$store.getters.transactionColumns.filter(
|
||||
(column) => !['type', 'user_id'].includes(column.field)
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -10,7 +10,10 @@
|
||||
<MeteredTransactionRow :row="row" @showDetail="showTransactionDetail" />
|
||||
|
||||
<!--Transaction detail-->
|
||||
<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
|
||||
<MeteredTransactionDetailRow
|
||||
v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id"
|
||||
:row="row"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!--Empty page-->
|
||||
|
||||
@@ -4,8 +4,17 @@
|
||||
{{ $t('Update Payments') }}
|
||||
</FormLabel>
|
||||
|
||||
<AppInputButton :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="w-full sm:w-auto" button-style="theme">
|
||||
<AppInputButton
|
||||
: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="w-full sm:w-auto"
|
||||
button-style="theme"
|
||||
>
|
||||
{{ $t('Update Payments') }}
|
||||
</ButtonBase>
|
||||
</AppInputButton>
|
||||
@@ -30,7 +39,11 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
canShowForSubscription() {
|
||||
return this.hasSubscription && !this.subscription.attributes.is_cancelled && ['paystack', 'paypal'].includes(this.subscription.attributes.driver)
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user