mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,290 +1,257 @@
|
||||
<template>
|
||||
<PopupWrapper name="select-plan-subscription">
|
||||
<PopupHeader :title="$t('Upgrade Your Account')" icon="credit-card" />
|
||||
|
||||
<PopupHeader :title="$t('Upgrade Your Account')" icon="credit-card" />
|
||||
<!--Payment Options-->
|
||||
<div v-if="isPaymentOptionPage">
|
||||
<PopupContent>
|
||||
<!--Stripe implementation-->
|
||||
<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">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</PaymentMethod>
|
||||
|
||||
<!--Payment Options-->
|
||||
<div v-if="isPaymentOptionPage">
|
||||
<PopupContent>
|
||||
<!--PayPal implementation-->
|
||||
<div
|
||||
v-if="config.isPayPal"
|
||||
:class="{
|
||||
'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.')">
|
||||
<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">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</PaymentMethod>
|
||||
|
||||
<!--Stripe implementation-->
|
||||
<PaymentMethod
|
||||
v-if="config.isStripe"
|
||||
driver="stripe"
|
||||
:description="$t('Pay by your credit card or Apple Pay')"
|
||||
>
|
||||
<div v-if="stripe.isGettingCheckoutLink" class="transform scale-50 translate-y-3">
|
||||
<Spinner />
|
||||
</div>
|
||||
<span @click="payByStripe" :class="{'opacity-0': stripe.isGettingCheckoutLink}" class="text-sm text-theme font-bold cursor-pointer">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</PaymentMethod>
|
||||
<!--PayPal Buttons-->
|
||||
<div id="paypal-button-container"></div>
|
||||
</div>
|
||||
|
||||
<!--PayPal implementation-->
|
||||
<div
|
||||
v-if="config.isPayPal"
|
||||
:class="{'dark:bg-2x-dark-foreground bg-light-background rounded-xl px-4 mb-2': paypal.isMethodsLoaded}"
|
||||
>
|
||||
<PaymentMethod
|
||||
@click.native="pickedPaymentMethod('paypal')"
|
||||
driver="paypal"
|
||||
:description="$t('Available PayPal Credit, Debit or Credit Card.')"
|
||||
>
|
||||
<div v-if="paypal.isMethodLoading" class="transform scale-50 translate-y-3">
|
||||
<Spinner />
|
||||
</div>
|
||||
<span v-if="! paypal.isMethodsLoaded" :class="{'opacity-0': paypal.isMethodLoading}" class="text-sm text-theme font-bold cursor-pointer">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</PaymentMethod>
|
||||
<!--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"
|
||||
:plan="selectedPlan.data.meta.driver_plan_id.paystack"
|
||||
:amount="selectedPlan.data.attributes.amount * 100"
|
||||
:email="user.data.attributes.email"
|
||||
:paystackkey="config.paystack_public_key"
|
||||
:reference="$generatePaystackReference()"
|
||||
:callback="paymentSuccessful"
|
||||
:close="paystackClosed"
|
||||
>
|
||||
<span class="text-theme cursor-pointer text-sm font-bold">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</paystack>
|
||||
</PaymentMethod>
|
||||
</PopupContent>
|
||||
|
||||
<!--PayPal Buttons-->
|
||||
<div id="paypal-button-container"></div>
|
||||
</div>
|
||||
<PopupActions>
|
||||
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
|
||||
{{ $t('Cancel Payment') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</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"
|
||||
:plan="selectedPlan.data.meta.driver_plan_id.paystack"
|
||||
:amount="selectedPlan.data.attributes.amount * 100"
|
||||
:email="user.data.attributes.email"
|
||||
:paystackkey="config.paystack_public_key"
|
||||
:reference="$generatePaystackReference()"
|
||||
:callback="paymentSuccessful"
|
||||
:close="paystackClosed"
|
||||
>
|
||||
<span class="text-sm text-theme font-bold cursor-pointer">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</paystack>
|
||||
</PaymentMethod>
|
||||
</PopupContent>
|
||||
<!--Select Payment Plans-->
|
||||
<div v-if="!isPaymentOptionPage">
|
||||
<PopupContent v-if="plans">
|
||||
<!--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">
|
||||
{{ $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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PopupActions>
|
||||
<ButtonBase
|
||||
class="w-full"
|
||||
@click.native="$closePopup()"
|
||||
button-style="secondary"
|
||||
>
|
||||
{{ $t('Cancel Payment') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</div>
|
||||
<!--List available plans-->
|
||||
<div>
|
||||
<PlanDetail
|
||||
v-for="(plan, i) in plans.data"
|
||||
:plan="plan"
|
||||
:key="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)"
|
||||
/>
|
||||
</div>
|
||||
</PopupContent>
|
||||
|
||||
<!--Select Payment Plans-->
|
||||
<div v-if="! isPaymentOptionPage">
|
||||
<PopupContent v-if="plans">
|
||||
|
||||
<!--Toggle yearly billing-->
|
||||
<div v-if="hasYearlyPlans.length > 0" class="px-5 mb-2 text-right">
|
||||
<label :class="{'text-gray-400': !isSelectedYearlyPlans}" class="font-bold cursor-pointer text-xs">
|
||||
{{ $t('Billed Annually') }}
|
||||
</label>
|
||||
<div class="relative inline-block w-12 align-middle select-none">
|
||||
<SwitchInput class="transform scale-75" v-model="isSelectedYearlyPlans" :state="isSelectedYearlyPlans" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--List available plans-->
|
||||
<div>
|
||||
<PlanDetail
|
||||
v-for="(plan, i) in plans.data"
|
||||
:plan="plan"
|
||||
:key="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)"
|
||||
/>
|
||||
</div>
|
||||
</PopupContent>
|
||||
|
||||
<!--Actions-->
|
||||
<PopupActions>
|
||||
<ButtonBase
|
||||
class="w-full"
|
||||
@click.native="$closePopup()"
|
||||
button-style="secondary"
|
||||
>{{ $t('popup_move_item.cancel') }}
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
class="w-full"
|
||||
:button-style="buttonStyle"
|
||||
@click.native="isPaymentOptionPage = true"
|
||||
>{{ $t('Upgrade Account') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</div>
|
||||
<!--Actions-->
|
||||
<PopupActions>
|
||||
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }} </ButtonBase>
|
||||
<ButtonBase class="w-full" :button-style="buttonStyle" @click.native="isPaymentOptionPage = true">{{ $t('Upgrade Account') }} </ButtonBase>
|
||||
</PopupActions>
|
||||
</div>
|
||||
</PopupWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PaymentMethod from "../Others/PaymentMethod";
|
||||
import {loadScript} from "@paypal/paypal-js";
|
||||
import SwitchInput from "../Others/Forms/SwitchInput";
|
||||
import PopupWrapper from "../Others/Popup/PopupWrapper";
|
||||
import PopupActions from '../Others/Popup/PopupActions'
|
||||
import PopupContent from '../Others/Popup/PopupContent'
|
||||
import PopupHeader from '../Others/Popup/PopupHeader'
|
||||
import ButtonBase from "../FilesView/ButtonBase";
|
||||
import PlanDetail from "./PlanDetail";
|
||||
import paystack from 'vue-paystack';
|
||||
import {mapGetters} from "vuex";
|
||||
import {events} from "../../bus";
|
||||
import axios from "axios";
|
||||
import Spinner from "../FilesView/Spinner";
|
||||
import PaymentMethod from '../Others/PaymentMethod'
|
||||
import { loadScript } from '@paypal/paypal-js'
|
||||
import SwitchInput from '../Others/Forms/SwitchInput'
|
||||
import PopupWrapper from '../Others/Popup/PopupWrapper'
|
||||
import PopupActions from '../Others/Popup/PopupActions'
|
||||
import PopupContent from '../Others/Popup/PopupContent'
|
||||
import PopupHeader from '../Others/Popup/PopupHeader'
|
||||
import ButtonBase from '../FilesView/ButtonBase'
|
||||
import PlanDetail from './PlanDetail'
|
||||
import paystack from 'vue-paystack'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '../../bus'
|
||||
import axios from 'axios'
|
||||
import Spinner from '../FilesView/Spinner'
|
||||
|
||||
export default {
|
||||
name: 'SelectPlanSubscriptionPopup',
|
||||
components: {
|
||||
Spinner,
|
||||
PaymentMethod,
|
||||
paystack,
|
||||
PlanDetail,
|
||||
SwitchInput,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
},
|
||||
watch: {
|
||||
isSelectedYearlyPlans() {
|
||||
this.selectedPlan = undefined
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config',
|
||||
'user',
|
||||
]),
|
||||
intervalPlanType() {
|
||||
return this.isSelectedYearlyPlans
|
||||
? 'year'
|
||||
: 'month'
|
||||
},
|
||||
buttonStyle() {
|
||||
return this.selectedPlan
|
||||
? 'theme'
|
||||
: 'secondary'
|
||||
},
|
||||
userSubscribedPlanId() {
|
||||
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')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stripe: {
|
||||
isGettingCheckoutLink: false,
|
||||
},
|
||||
paypal: {
|
||||
isMethodsLoaded: false,
|
||||
isMethodLoading: false
|
||||
},
|
||||
isPaymentOptionPage: false,
|
||||
isSelectedYearlyPlans: false,
|
||||
isLoading: false,
|
||||
selectedPlan: undefined,
|
||||
plans: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pickedPaymentMethod(driver) {
|
||||
if (driver === 'paystack') {
|
||||
this.$closePopup()
|
||||
}
|
||||
if (driver === 'paypal' && !this.paypal.isMethodsLoaded) {
|
||||
this.PayPalInitialization()
|
||||
}
|
||||
},
|
||||
async PayPalInitialization() {
|
||||
this.paypal.isMethodLoading = true
|
||||
export default {
|
||||
name: 'SelectPlanSubscriptionPopup',
|
||||
components: {
|
||||
Spinner,
|
||||
PaymentMethod,
|
||||
paystack,
|
||||
PlanDetail,
|
||||
SwitchInput,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
},
|
||||
watch: {
|
||||
isSelectedYearlyPlans() {
|
||||
this.selectedPlan = undefined
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config', 'user']),
|
||||
intervalPlanType() {
|
||||
return this.isSelectedYearlyPlans ? 'year' : 'month'
|
||||
},
|
||||
buttonStyle() {
|
||||
return this.selectedPlan ? 'theme' : 'secondary'
|
||||
},
|
||||
userSubscribedPlanId() {
|
||||
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')
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stripe: {
|
||||
isGettingCheckoutLink: false,
|
||||
},
|
||||
paypal: {
|
||||
isMethodsLoaded: false,
|
||||
isMethodLoading: false,
|
||||
},
|
||||
isPaymentOptionPage: false,
|
||||
isSelectedYearlyPlans: false,
|
||||
isLoading: false,
|
||||
selectedPlan: undefined,
|
||||
plans: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pickedPaymentMethod(driver) {
|
||||
if (driver === 'paystack') {
|
||||
this.$closePopup()
|
||||
}
|
||||
if (driver === 'paypal' && !this.paypal.isMethodsLoaded) {
|
||||
this.PayPalInitialization()
|
||||
}
|
||||
},
|
||||
async PayPalInitialization() {
|
||||
this.paypal.isMethodLoading = true
|
||||
|
||||
let paypal;
|
||||
let paypal
|
||||
|
||||
try {
|
||||
paypal = await loadScript({
|
||||
'client-id': this.config.paypal_client_id,
|
||||
'vault': true,
|
||||
});
|
||||
} catch (error) {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('Failed to load the PayPal service'),
|
||||
})
|
||||
}
|
||||
try {
|
||||
paypal = await loadScript({
|
||||
'client-id': this.config.paypal_client_id,
|
||||
vault: true,
|
||||
})
|
||||
} catch (error) {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('Failed to load the PayPal service'),
|
||||
})
|
||||
}
|
||||
|
||||
const planId = this.selectedPlan.data.meta.driver_plan_id.paypal
|
||||
const userId = this.user.data.id
|
||||
const app = this
|
||||
const planId = this.selectedPlan.data.meta.driver_plan_id.paypal
|
||||
const userId = this.user.data.id
|
||||
const app = this
|
||||
|
||||
this.paypal.isMethodsLoaded = true
|
||||
this.paypal.isMethodLoading = false
|
||||
this.paypal.isMethodsLoaded = true
|
||||
this.paypal.isMethodLoading = false
|
||||
|
||||
// Initialize paypal buttons for single charge
|
||||
await paypal.Buttons({
|
||||
createSubscription: function (data, actions) {
|
||||
return actions.subscription.create({
|
||||
plan_id: planId,
|
||||
custom_id: userId
|
||||
});
|
||||
},
|
||||
onApprove: function (data, actions) {
|
||||
app.paymentSuccessful()
|
||||
}
|
||||
}).render('#paypal-button-container');
|
||||
},
|
||||
payByStripe() {
|
||||
this.stripe.isGettingCheckoutLink = true
|
||||
// Initialize paypal buttons for single charge
|
||||
await paypal
|
||||
.Buttons({
|
||||
createSubscription: function (data, actions) {
|
||||
return actions.subscription.create({
|
||||
plan_id: planId,
|
||||
custom_id: userId,
|
||||
})
|
||||
},
|
||||
onApprove: function (data, actions) {
|
||||
app.paymentSuccessful()
|
||||
},
|
||||
})
|
||||
.render('#paypal-button-container')
|
||||
},
|
||||
payByStripe() {
|
||||
this.stripe.isGettingCheckoutLink = true
|
||||
|
||||
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
|
||||
},
|
||||
paymentSuccessful() {
|
||||
this.$closePopup()
|
||||
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
|
||||
},
|
||||
paymentSuccessful() {
|
||||
this.$closePopup()
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your payment was successfully received.'),
|
||||
})
|
||||
},
|
||||
paystackClosed() {
|
||||
// ...
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// Load available plans
|
||||
axios.get('/api/subscriptions/plans')
|
||||
.then(response => {
|
||||
this.plans = response.data
|
||||
})
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your payment was successfully received.'),
|
||||
})
|
||||
},
|
||||
paystackClosed() {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// Load available plans
|
||||
axios.get('/api/subscriptions/plans').then((response) => {
|
||||
this.plans = response.data
|
||||
})
|
||||
|
||||
// Reset states on popup close
|
||||
events.$on('popup:close', () => {
|
||||
this.isSelectedYearlyPlans = false
|
||||
this.isPaymentOptionPage = false
|
||||
this.selectedPlan = undefined
|
||||
this.paypal.isMethodsLoaded = false
|
||||
})
|
||||
}
|
||||
}
|
||||
// Reset states on popup close
|
||||
events.$on('popup:close', () => {
|
||||
this.isSelectedYearlyPlans = false
|
||||
this.isPaymentOptionPage = false
|
||||
this.selectedPlan = undefined
|
||||
this.paypal.isMethodsLoaded = false
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user