mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
404 lines
18 KiB
Vue
404 lines
18 KiB
Vue
<template>
|
|
<PageTab>
|
|
<!--Global payment settings-->
|
|
<div class="card shadow-card">
|
|
<FormLabel icon="dollar">
|
|
{{ $t('Subscription Payments') }}
|
|
</FormLabel>
|
|
|
|
<AppInputSwitch :title="$t('Allow Subscription Payments')" :description="$t('User can subscribe to fixed or metered plan')" :is-last="! allowedPayments" class="flex">
|
|
<SwitchInput @input="$updateText('/admin/settings', 'allowed_payments', allowedPayments)" v-model="allowedPayments" :state="allowedPayments" />
|
|
</AppInputSwitch>
|
|
|
|
<AppInputText v-if="allowedPayments" :title="$t('Subscription Type')" :is-last="true">
|
|
<SelectInput @change="subscriptionTypeChange" :default="config.subscriptionType" :options="subscriptionTypes" :placeholder="$t('Select your subscription type')"/>
|
|
</AppInputText>
|
|
</div>
|
|
|
|
<!--Metered settings-->
|
|
<div v-if="config.subscriptionType === 'metered'" class="card shadow-card">
|
|
<FormLabel icon="bar-chart">
|
|
{{ $t('Metered Billing Settings') }}
|
|
</FormLabel>
|
|
|
|
<AppInputSwitch :title="$t('Allow Registration Bonus')" :description="$t('User credit automatically user bonus to the balance after user registration.')" :is-last="! allowedRegistrationBonus" class="flex">
|
|
<SwitchInput @input="$updateText('/admin/settings', 'allowed_registration_bonus', allowedRegistrationBonus)" v-model="allowedRegistrationBonus" :state="allowedRegistrationBonus" />
|
|
</AppInputSwitch>
|
|
|
|
<AppInputText v-if="allowedRegistrationBonus" :title="$t('Registration Bonus Amount')" :description="this.$t('This bonus will be automatically added when user successfully register his account.')" :is-last="true">
|
|
<input @input="$updateText('/admin/settings', 'registration_bonus_amount', registrationBonusAmount)" v-model="registrationBonusAmount" :placeholder="$t('Type registration bonus amount...')" type="number" class="focus-border-theme input-dark" />
|
|
</AppInputText>
|
|
</div>
|
|
|
|
<!--Stripe method configuration-->
|
|
<div v-if="allowedPayments" class="card shadow-card">
|
|
<img :src="$getPaymentLogo('stripe')" alt="Stripe" class="mb-4 h-8">
|
|
|
|
<AppInputSwitch :title="$t('Allow Stripe Service')" :description="$t('Allow your users pay by their credit card')" :is-last="! stripe.allowedService" class="flex">
|
|
<SwitchInput @input="$updateText('/admin/settings', 'allowed_stripe', stripe.allowedService)" v-model="stripe.allowedService" :state="stripe.allowedService" />
|
|
</AppInputSwitch>
|
|
|
|
<!--Stripe credentials are set up-->
|
|
<div v-if="stripe.allowedService">
|
|
<div v-if="stripe.isConfigured">
|
|
<AppInputText @input="$updateText('/admin/settings', 'stripe_payment_description', stripe.paymentDescription)" :title="$t('Payment Description')" :description="$t('The description showed below user payment method selection.')">
|
|
<textarea rows="2" @input="$updateText('/admin/settings', 'stripe_payment_description', stripe.paymentDescription, true)" v-model="stripe.paymentDescription" :placeholder="$t('Describe in short which methods user can pay with this payment method...')" type="text" class="focus-border-theme input-dark" />
|
|
</AppInputText>
|
|
|
|
<AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
|
|
<CopyInput size="small" :str="getWebhookEndpoint('stripe')" />
|
|
</AppInputText>
|
|
|
|
<div @click="stripe.isVisibleCredentialsForm = !stripe.isVisibleCredentialsForm" class="flex items-center cursor-pointer" :class="{'mb-4': stripe.isVisibleCredentialsForm}">
|
|
<edit2-icon size="14" class="vue-feather text-theme mr-2.5" />
|
|
<b class="text-sm">{{ $t('Update Your Credentials') }}</b>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Set up Stripe credentials-->
|
|
<ValidationObserver
|
|
v-if="! stripe.isConfigured || stripe.isVisibleCredentialsForm"
|
|
@submit.prevent="storeCredentials('stripe')"
|
|
ref="credentialsForm"
|
|
v-slot="{ invalid }"
|
|
tag="form"
|
|
class="p-5 dark:border-dark-secondary border rounded-xl"
|
|
>
|
|
<FormLabel v-if="! stripe.isConfigured" icon="shield">
|
|
{{ $t('Configure Your Credentials') }}
|
|
</FormLabel>
|
|
<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
|
|
<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
|
|
<input v-model="stripe.credentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
|
|
</AppInputText>
|
|
</ValidationProvider>
|
|
<ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
|
|
<AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
|
|
<input v-model="stripe.credentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
|
|
</AppInputText>
|
|
</ValidationProvider>
|
|
|
|
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
|
|
{{ $t('Store Credentials') }}
|
|
</ButtonBase>
|
|
</ValidationObserver>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Paystack method configuration-->
|
|
<div v-if="allowedPayments" class="card shadow-card">
|
|
<img :src="$getPaymentLogo('paystack')" alt="Paystack" class="mb-4 h-7">
|
|
|
|
<AppInputSwitch :title="$t('Allow Paystack Service')" :description="$t('Allow your users pay by their credit card')" :is-last="! paystack.allowedService" class="flex">
|
|
<SwitchInput @input="$updateText('/admin/settings', 'allowed_paystack', paystack.allowedService)" v-model="paystack.allowedService" :state="paystack.allowedService" />
|
|
</AppInputSwitch>
|
|
|
|
<!--Paystack credentials are set up-->
|
|
<div v-if="paystack.allowedService">
|
|
<div v-if="paystack.isConfigured">
|
|
<AppInputText @input="$updateText('/admin/settings', 'paystack_payment_description', paystack.paymentDescription)" :title="$t('Payment Description')" :description="$t('The description showed below user payment method selection.')">
|
|
<textarea rows="2" @input="$updateText('/admin/settings', 'paystack_payment_description', paystack.paymentDescription, true)" v-model="paystack.paymentDescription" :placeholder="$t('Describe in short which methods user can pay with this payment method...')" type="text" class="focus-border-theme input-dark" />
|
|
</AppInputText>
|
|
|
|
<AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
|
|
<CopyInput size="small" :str="getWebhookEndpoint('paystack')" />
|
|
</AppInputText>
|
|
|
|
<div @click="paystack.isVisibleCredentialsForm = !paystack.isVisibleCredentialsForm" class="flex items-center cursor-pointer" :class="{'mb-4': paystack.isVisibleCredentialsForm}">
|
|
<edit2-icon size="14" class="vue-feather text-theme mr-2.5" />
|
|
<b class="text-sm">{{ $t('Update Your Credentials') }}</b>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Set up Paystack credentials-->
|
|
<ValidationObserver
|
|
v-if="! paystack.isConfigured || paystack.isVisibleCredentialsForm"
|
|
@submit.prevent="storeCredentials('paystack')"
|
|
ref="credentialsForm"
|
|
v-slot="{ invalid }"
|
|
tag="form"
|
|
class="p-5 dark:border-dark-secondary border rounded-xl"
|
|
>
|
|
<FormLabel v-if="! paystack.isConfigured" icon="shield">
|
|
{{ $t('Configure Your Credentials') }}
|
|
</FormLabel>
|
|
<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
|
|
<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
|
|
<input v-model="paystack.credentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
|
|
</AppInputText>
|
|
</ValidationProvider>
|
|
<ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
|
|
<AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
|
|
<input v-model="paystack.credentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
|
|
</AppInputText>
|
|
</ValidationProvider>
|
|
|
|
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
|
|
{{ $t('Store Credentials') }}
|
|
</ButtonBase>
|
|
</ValidationObserver>
|
|
</div>
|
|
</div>
|
|
|
|
<!--PayPal method configuration-->
|
|
<div v-if="allowedPayments" class="card shadow-card">
|
|
<img :src="$getPaymentLogo('paypal')" alt="PayPal" class="mb-4 h-8">
|
|
|
|
<AppInputSwitch :title="$t('Allow PayPal Service')" :description="$t('Allow your users pay by their credit card')" :is-last="! paypal.allowedService" class="flex">
|
|
<SwitchInput @input="$updateText('/admin/settings', 'allowed_paypal', paypal.allowedService)" v-model="paypal.allowedService" :state="paypal.allowedService" />
|
|
</AppInputSwitch>
|
|
|
|
<!--Stripe credentials are set up-->
|
|
<div v-if="paypal.allowedService">
|
|
<div v-if="paypal.isConfigured">
|
|
<AppInputText @input="$updateText('/admin/settings', 'paypal_payment_description', paypal.paymentDescription)" :title="$t('Payment Description')" :description="$t('The description showed below user payment method selection.')">
|
|
<textarea rows="2" @input="$updateText('/admin/settings', 'paypal_payment_description', paypal.paymentDescription, true)" v-model="paypal.paymentDescription" :placeholder="$t('Describe in short which methods user can pay with this payment method...')" type="text" class="focus-border-theme input-dark" />
|
|
</AppInputText>
|
|
|
|
<AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
|
|
<CopyInput size="small" :str="getWebhookEndpoint('paypal')" />
|
|
</AppInputText>
|
|
|
|
<div @click="paypal.isVisibleCredentialsForm = !paypal.isVisibleCredentialsForm" class="flex items-center cursor-pointer" :class="{'mb-4': paypal.isVisibleCredentialsForm}">
|
|
<edit2-icon size="14" class="vue-feather text-theme mr-2.5" />
|
|
<b class="text-sm">{{ $t('Update Your Credentials') }}</b>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Set up Paypal credentials-->
|
|
<ValidationObserver
|
|
v-if="! paypal.isConfigured || paypal.isVisibleCredentialsForm"
|
|
@submit.prevent="storeCredentials('paypal')"
|
|
ref="credentialsForm"
|
|
v-slot="{ invalid }"
|
|
tag="form"
|
|
class="p-5 dark:border-dark-secondary border rounded-xl"
|
|
>
|
|
<FormLabel v-if="! paypal.isConfigured" icon="shield">
|
|
{{ $t('Configure Your Credentials') }}
|
|
</FormLabel>
|
|
<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
|
|
<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
|
|
<input v-model="paypal.credentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
|
|
</AppInputText>
|
|
</ValidationProvider>
|
|
<ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
|
|
<AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
|
|
<input v-model="paypal.credentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
|
|
</AppInputText>
|
|
</ValidationProvider>
|
|
|
|
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
|
|
{{ $t('Store Credentials') }}
|
|
</ButtonBase>
|
|
</ValidationObserver>
|
|
</div>
|
|
</div>
|
|
</PageTab>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
Edit2Icon,
|
|
} from 'vue-feather-icons'
|
|
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
|
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
|
|
import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
|
|
import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
|
|
import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
|
|
import AppInputSwitch from "../../../../components/Admin/AppInputSwitch"
|
|
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
|
|
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
|
import CopyInput from "../../../../components/Others/Forms/CopyInput"
|
|
import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
|
|
import AppInputText from "../../../../components/Admin/AppInputText"
|
|
import PageTab from '/resources/js/components/Others/Layout/PageTab'
|
|
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
|
import {required} from 'vee-validate/dist/rules'
|
|
import {events} from '/resources/js/bus'
|
|
import {mapGetters} from 'vuex'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
name: 'AppPayments',
|
|
components: {
|
|
ValidationObserver,
|
|
ValidationProvider,
|
|
AppInputSwitch,
|
|
AppInputText,
|
|
PageTabGroup,
|
|
SwitchInput,
|
|
SelectInput,
|
|
ImageInput,
|
|
ButtonBase,
|
|
CopyInput,
|
|
FormLabel,
|
|
Edit2Icon,
|
|
SetupBox,
|
|
required,
|
|
PageTab,
|
|
InfoBox,
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'subscriptionTypes',
|
|
'config',
|
|
]),
|
|
submitButtonText() {
|
|
return this.isLoading ? this.$t('admin_settings.payments.button_testing') : this.$t('admin_settings.payments.button_submit')
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
allowedRegistrationBonus: true,
|
|
registrationBonusAmount: undefined,
|
|
|
|
allowedPayments: false,
|
|
|
|
isLoading: false,
|
|
isError: false,
|
|
errorMessage: '',
|
|
stripe: {
|
|
allowedService: true,
|
|
isConfigured: false,
|
|
isVisibleCredentialsForm: false,
|
|
paymentDescription: undefined,
|
|
credentials: {
|
|
key: undefined,
|
|
secret: undefined,
|
|
}
|
|
},
|
|
paystack: {
|
|
allowedService: true,
|
|
isConfigured: false,
|
|
isVisibleCredentialsForm: false,
|
|
paymentDescription: undefined,
|
|
credentials: {
|
|
key: undefined,
|
|
secret: undefined,
|
|
}
|
|
},
|
|
paypal: {
|
|
allowedService: true,
|
|
isConfigured: false,
|
|
isVisibleCredentialsForm: false,
|
|
paymentDescription: undefined,
|
|
credentials: {
|
|
key: undefined,
|
|
secret: undefined,
|
|
}
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
async storeCredentials(service) {
|
|
|
|
// Validate fields
|
|
const isValid = await this.$refs.credentialsForm.validate();
|
|
|
|
if (!isValid) return;
|
|
|
|
// Start loading
|
|
this.isLoading = true
|
|
|
|
let credentials = {
|
|
stripe: {
|
|
service: 'stripe',
|
|
key: this.stripe.credentials.key,
|
|
secret: this.stripe.credentials.secret,
|
|
},
|
|
paystack: {
|
|
service: 'paystack',
|
|
key: this.paystack.credentials.key,
|
|
secret: this.paystack.credentials.secret,
|
|
},
|
|
paypal: {
|
|
service: 'paypal',
|
|
key: this.paypal.credentials.key,
|
|
secret: this.paypal.credentials.secret,
|
|
},
|
|
}
|
|
|
|
// Send request to get verify account
|
|
axios
|
|
.post('/api/admin/settings/payment-service', credentials[service])
|
|
.then(() => {
|
|
|
|
// Update Credentials
|
|
let commitKey = {
|
|
stripe: 'SET_STRIPE_CREDENTIALS',
|
|
paystack: 'SET_PAYSTACK_CREDENTIALS',
|
|
paypal: 'SET_PAYPAL_CREDENTIALS',
|
|
}[service]
|
|
|
|
// Commit credentials
|
|
this.$store.commit(commitKey, credentials[service])
|
|
|
|
this[service].allowedService = true
|
|
this[service].isConfigured = true
|
|
this[service].isVisibleCredentialsForm = false
|
|
|
|
// Show toaster
|
|
events.$emit('toaster', {
|
|
type: 'success',
|
|
message: this.$t('toaster.credentials_set', {service: service}),
|
|
})
|
|
})
|
|
.catch(error => {
|
|
|
|
if (error.response.status === 500) {
|
|
this.isError = true
|
|
this.errorMessage = error.response.data.message
|
|
}
|
|
})
|
|
.finally(() => this.isLoading = false)
|
|
},
|
|
subscriptionTypeChange(type) {
|
|
events.$emit('confirm:open', {
|
|
title: this.$t('Are you sure you want to change subscription type?'),
|
|
message: this.$t('We strongly do not recommend change this value if there is any subscribed user to prevent any failures. You can operate only with one type of subscription and you can not change it on the fly!'),
|
|
action: {
|
|
type: type,
|
|
operation: 'change-subscription-type',
|
|
}
|
|
})
|
|
},
|
|
getWebhookEndpoint(service) {
|
|
return `${this.config.host}/api/subscriptions/${service}/webhook`
|
|
},
|
|
},
|
|
mounted() {
|
|
// Set payment description
|
|
this.stripe.paymentDescription = this.config.stripe_payment_description
|
|
this.paystack.paymentDescription = this.config.paystack_payment_description
|
|
this.paypal.paymentDescription = this.config.paypal_payment_description
|
|
|
|
// Set if service is allowed
|
|
this.stripe.allowedService = this.config.isStripe
|
|
this.paystack.allowedService = this.config.isPaystack
|
|
this.paypal.allowedService = this.config.isPayPal
|
|
|
|
if (this.config.stripe_public_key)
|
|
this.stripe.isConfigured = true
|
|
|
|
if (this.config.paystack_public_key)
|
|
this.paystack.isConfigured = true
|
|
|
|
if (this.config.paypal_client_id)
|
|
this.paypal.isConfigured = true
|
|
|
|
this.allowedPayments = this.config.allowed_payments
|
|
|
|
// Set metered
|
|
this.allowedRegistrationBonus = this.config.allowed_registration_bonus
|
|
this.registrationBonusAmount = this.config.registration_bonus_amount
|
|
},
|
|
created() {
|
|
events.$on('action:confirmed', data => {
|
|
if (data.operation === 'change-subscription-type')
|
|
this.$updateText('/admin/settings', 'subscription_type', data.type)
|
|
})
|
|
}
|
|
}
|
|
</script>
|