mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
387 lines
16 KiB
Vue
387 lines
16 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">
|
|
<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>
|
|
|
|
<!--Stripe method configuration-->
|
|
<div v-if="allowedPayments" class="card shadow-card">
|
|
<FormLabel icon="credit-card">
|
|
{{ $t('Stripe') }}
|
|
</FormLabel>
|
|
|
|
<AppInputSwitch :title="$t('Allow Stripe Service')" :description="$t('Allow your users pay by their credit card')" :is-last="! stripe.allowedService">
|
|
<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 border rounded-xl"
|
|
>
|
|
<FormLabel 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">
|
|
<FormLabel icon="credit-card">
|
|
{{ $t('Paystack') }}
|
|
</FormLabel>
|
|
|
|
<AppInputSwitch :title="$t('Allow Paystack Service')" :description="$t('Allow your users pay by their credit card')" :is-last="! paystack.allowedService">
|
|
<SwitchInput @input="$updateText('/admin/settings', 'allowed_paystack', paystack.allowedService)" v-model="paystack.allowedService" :state="paystack.allowedService" />
|
|
</AppInputSwitch>
|
|
|
|
<!--Stripe 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 border rounded-xl"
|
|
>
|
|
<FormLabel 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">
|
|
<FormLabel icon="credit-card">
|
|
{{ $t('PayPal') }}
|
|
</FormLabel>
|
|
|
|
<AppInputSwitch :title="$t('Allow PayPal Service')" :description="$t('Allow your users pay by their credit card')" :is-last="! paypal.allowedService">
|
|
<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 border rounded-xl"
|
|
>
|
|
<FormLabel 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 {
|
|
allowedPayments: false,
|
|
isLoading: false,
|
|
isError: false,
|
|
errorMessage: '',
|
|
stripe: {
|
|
allowedService: true,
|
|
isConfigured: false,
|
|
isVisibleCredentialsForm: false,
|
|
paymentDescription: undefined,
|
|
credentials: {
|
|
key: 'test',
|
|
secret: 'test',
|
|
}
|
|
},
|
|
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
|
|
},
|
|
created() {
|
|
events.$on('action:confirmed', data => {
|
|
if (data.operation === 'change-subscription-type')
|
|
this.$updateText('/admin/settings', 'subscription_type', data.type)
|
|
})
|
|
}
|
|
}
|
|
</script>
|