mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -3,61 +3,50 @@
|
||||
<PopupHeader :title="$t('Select Payment Method')" icon="credit-card" />
|
||||
|
||||
<PopupContent style="padding: 0 20px">
|
||||
<!--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="config.paypal_payment_description">
|
||||
<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>
|
||||
|
||||
<!--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="config.paypal_payment_description"
|
||||
>
|
||||
<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>
|
||||
<!--PayPal Buttons-->
|
||||
<div id="paypal-button-container"></div>
|
||||
</div>
|
||||
|
||||
<!--PayPal Buttons-->
|
||||
<div id="paypal-button-container"></div>
|
||||
</div>
|
||||
|
||||
<!--Paystack implementation-->
|
||||
<PaymentMethod
|
||||
v-if="config.isPaystack"
|
||||
driver="paystack"
|
||||
:description="config.paystack_payment_description"
|
||||
>
|
||||
<paystack
|
||||
@click.native="pickedPaymentMethod('paystack')"
|
||||
v-if="user && config"
|
||||
:channels="['card', 'bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer']"
|
||||
class="font-bold"
|
||||
currency="ZAR"
|
||||
:amount="singleChargeAmount * 100"
|
||||
:email="user.data.attributes.email"
|
||||
:paystackkey="config.paystack_public_key"
|
||||
:reference="$generatePaystackReference()"
|
||||
:callback="paystackPaymentSuccessful"
|
||||
:close="paystackClosed"
|
||||
>
|
||||
<span class="text-sm text-theme font-bold cursor-pointer">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</paystack>
|
||||
</PaymentMethod>
|
||||
<!--Paystack implementation-->
|
||||
<PaymentMethod v-if="config.isPaystack" driver="paystack" :description="config.paystack_payment_description">
|
||||
<paystack
|
||||
@click.native="pickedPaymentMethod('paystack')"
|
||||
v-if="user && config"
|
||||
:channels="['card', 'bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer']"
|
||||
class="font-bold"
|
||||
currency="ZAR"
|
||||
:amount="singleChargeAmount * 100"
|
||||
:email="user.data.attributes.email"
|
||||
:paystackkey="config.paystack_public_key"
|
||||
:reference="$generatePaystackReference()"
|
||||
:callback="paystackPaymentSuccessful"
|
||||
:close="paystackClosed"
|
||||
>
|
||||
<span class="text-theme cursor-pointer text-sm font-bold">
|
||||
{{ $t('Select') }}
|
||||
</span>
|
||||
</paystack>
|
||||
</PaymentMethod>
|
||||
</PopupContent>
|
||||
|
||||
<PopupActions>
|
||||
<ButtonBase
|
||||
class="w-full"
|
||||
@click.native="$closePopup()"
|
||||
button-style="secondary"
|
||||
>
|
||||
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
|
||||
{{ $t('Cancel Payment') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
@@ -65,117 +54,117 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PopupWrapper from "./Popup/PopupWrapper";
|
||||
import PopupActions from "./Popup/PopupActions";
|
||||
import PopupContent from "./Popup/PopupContent";
|
||||
import PopupHeader from "./Popup/PopupHeader";
|
||||
import ButtonBase from "../FilesView/ButtonBase";
|
||||
import { loadScript } from "@paypal/paypal-js"
|
||||
import PaymentMethod from "./PaymentMethod"
|
||||
import Spinner from "../FilesView/Spinner"
|
||||
import {events} from '../../bus'
|
||||
import PopupWrapper from './Popup/PopupWrapper'
|
||||
import PopupActions from './Popup/PopupActions'
|
||||
import PopupContent from './Popup/PopupContent'
|
||||
import PopupHeader from './Popup/PopupHeader'
|
||||
import ButtonBase from '../FilesView/ButtonBase'
|
||||
import { loadScript } from '@paypal/paypal-js'
|
||||
import PaymentMethod from './PaymentMethod'
|
||||
import Spinner from '../FilesView/Spinner'
|
||||
import { events } from '../../bus'
|
||||
import paystack from 'vue-paystack'
|
||||
import {mapGetters} from "vuex"
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "SelectSingleChargeMethodPopup",
|
||||
components: {
|
||||
PaymentMethod,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
paystack,
|
||||
Spinner,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
paypal: {
|
||||
isMethodsLoaded: false,
|
||||
isMethodLoading: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'singleChargeAmount',
|
||||
'config',
|
||||
'user',
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
pickedPaymentMethod(driver) {
|
||||
if (driver === 'paystack') {
|
||||
this.$closePopup()
|
||||
}
|
||||
if (driver === 'paypal' && !this.paypal.isMethodsLoaded) {
|
||||
this.PayPalInitialization()
|
||||
}
|
||||
},
|
||||
async PayPalInitialization() {
|
||||
this.paypal.isMethodLoading = true
|
||||
name: 'SelectSingleChargeMethodPopup',
|
||||
components: {
|
||||
PaymentMethod,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
paystack,
|
||||
Spinner,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
paypal: {
|
||||
isMethodsLoaded: false,
|
||||
isMethodLoading: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['singleChargeAmount', 'config', 'user']),
|
||||
},
|
||||
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 userId = this.user.data.id
|
||||
const amount = this.singleChargeAmount
|
||||
const userId = this.user.data.id
|
||||
const amount = this.singleChargeAmount
|
||||
|
||||
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({
|
||||
createOrder: function(data, actions) {
|
||||
return actions.order.create({
|
||||
purchase_units: [{
|
||||
amount: {
|
||||
value: amount,
|
||||
},
|
||||
custom_id: userId
|
||||
}]
|
||||
});
|
||||
}
|
||||
}).render('#paypal-button-container');
|
||||
},
|
||||
paystackPaymentSuccessful() {
|
||||
this.$closePopup()
|
||||
// Initialize paypal buttons for single charge
|
||||
await paypal
|
||||
.Buttons({
|
||||
createOrder: function (data, actions) {
|
||||
return actions.order.create({
|
||||
purchase_units: [
|
||||
{
|
||||
amount: {
|
||||
value: amount,
|
||||
},
|
||||
custom_id: userId,
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
})
|
||||
.render('#paypal-button-container')
|
||||
},
|
||||
paystackPaymentSuccessful() {
|
||||
this.$closePopup()
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your payment was successfully received.'),
|
||||
})
|
||||
},
|
||||
paystackClosed() {
|
||||
// ...
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('popup:close', () => this.paypal.isMethodsLoaded = false)
|
||||
}
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your payment was successfully received.'),
|
||||
})
|
||||
},
|
||||
paystackClosed() {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
created() {
|
||||
events.$on('popup:close', () => (this.paypal.isMethodsLoaded = false))
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../../sass/vuefilemanager/variables';
|
||||
@import '../../../sass/vuefilemanager/mixins';
|
||||
@import '../../../sass/vuefilemanager/variables';
|
||||
@import '../../../sass/vuefilemanager/mixins';
|
||||
|
||||
.mobile-actions {
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
margin: 0 -20px;
|
||||
padding: 10px 0 10px 20px;
|
||||
}
|
||||
.mobile-actions {
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
margin: 0 -20px;
|
||||
padding: 10px 0 10px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user