nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

paystack refactoring

Browse Source
This commit is contained in:
Čarodej
2022-03-04 13:36:28 +01:00
parent 0f6dd0304f
commit cad1a1680c
5 changed files with 81 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
resources/js/components/Others/ChargePaymentPopup.vue
View File

@@ -11,7 +11,7 @@
}"
>
<PaymentMethod
@click.native="pickedPaymentMethod('paypal')"
@click.native="payByPayPal"
driver="paypal"
:description="config.paypal_payment_description"
>
@@ -31,30 +31,23 @@
<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="paymentSuccessful"
:close="paystackClosed"
>
<span class="text-theme cursor-pointer text-sm font-bold">
{{ $t('Select') }}
</span>
</paystack>
</PaymentMethod>
<!--Paystack implementation-->
<PaymentMethod
v-if="config.isPaystack"
driver="paystack"
:description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')"
>
<div v-if="paystack.isGettingCheckoutLink" class="translate-y-3 scale-50 transform">
<Spinner />
</div>
<span
@click="payByPaystack()"
:class="{ 'opacity-0': paystack.isGettingCheckoutLink }"
class="text-theme cursor-pointer text-sm font-bold"
>
{{ $t('Select') }}
</span>
</PaymentMethod>
</PopupContent>
<PopupActions>
@@ -75,8 +68,8 @@ 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 axios from "axios";
export default {
name: 'ChargePaymentPopup',
@@ -87,7 +80,6 @@ export default {
PopupContent,
PopupHeader,
ButtonBase,
paystack,
Spinner,
},
data() {
@@ -96,21 +88,31 @@ export default {
isMethodsLoaded: false,
isMethodLoading: false,
},
paystack: {
isGettingCheckoutLink: false,
},
}
},
computed: {
...mapGetters(['singleChargeAmount', 'config', 'user']),
},
methods: {
pickedPaymentMethod(driver) {
if (driver === 'paystack') {
this.$closePopup()
}
if (driver === 'paypal' && !this.paypal.isMethodsLoaded) {
this.PayPalInitialization()
}
},
async PayPalInitialization() {
payByPaystack() {
this.paystack.isGettingCheckoutLink = true
axios
.post('/api/paystack/checkout', {
amount: this.singleChargeAmount * 100,
})
.then((response) => {
window.location = response.data.data.authorization_url
})
},
async payByPayPal() {
if (this.paypal.isMethodLoading) {
return
}
this.paypal.isMethodLoading = true
let paypal
@@ -166,9 +168,6 @@ export default {
// todo: temporary reload function
setTimeout(() => document.location.reload(), 500)
},
paystackClosed() {
// ...
},
},
created() {
events.$on('popup:close', () => (this.paypal.isMethodsLoaded = false))

5
resources/js/components/Subscription/ChangeSubscriptionPopup.vue
View File

@@ -44,15 +44,12 @@
</template>
<script>
import PaymentMethod from '../Others/PaymentMethod'
import {loadScript} from '@paypal/paypal-js'
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'
@@ -66,8 +63,6 @@ export default {
PlanPeriodSwitcher,
InfoBox,
Spinner,
PaymentMethod,
paystack,
PlanDetail,
PopupWrapper,
PopupActions,

68
resources/js/components/Subscription/SubscribeAccountPopup.vue
View File

@@ -31,7 +31,7 @@
}"
>
<PaymentMethod
@click.native="pickedPaymentMethod('paypal')"
@click.native="payByPayPal"
driver="paypal"
:description="$t('Available PayPal Credit, Debit or Credit Card.')"
>
@@ -57,23 +57,16 @@
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="config.isDev ? 'ZAR' : selectedPlan.data.attributes.currency"
: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"
<div v-if="paystack.isGettingCheckoutLink" class="translate-y-3 scale-50 transform">
<Spinner />
</div>
<span
@click="payByPaystack()"
:class="{ 'opacity-0': paystack.isGettingCheckoutLink }"
class="text-theme cursor-pointer text-sm font-bold"
>
<span class="text-theme cursor-pointer text-sm font-bold">
{{ $t('Select') }}
</span>
</paystack>
{{ $t('Select') }}
</span>
</PaymentMethod>
</PopupContent>
@@ -100,7 +93,7 @@
:plan="plan"
:key="plan.data.id"
v-if="plan.data.attributes.interval === intervalPlanType"
:class="{'opacity-50 pointer-events-none': userSubscribedPlanId === plan.data.id}"
:class="{ 'pointer-events-none opacity-50': userSubscribedPlanId === plan.data.id }"
:is-selected="selectedPlan && selectedPlan.data.id === plan.data.id"
@click.native="selectPlan(plan)"
/>
@@ -134,22 +127,20 @@ 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 InfoBox from '../Others/Forms/InfoBox'
import PlanPeriodSwitcher from "./PlanPeriodSwitcher"
import PlanPeriodSwitcher from './PlanPeriodSwitcher'
export default {
name: 'SubscribeAccountPopup',
components: {
PlanPeriodSwitcher,
PlanPeriodSwitcher,
InfoBox,
Spinner,
PaymentMethod,
paystack,
PlanDetail,
SwitchInput,
PopupWrapper,
@@ -184,6 +175,9 @@ export default {
},
data() {
return {
paystack: {
isGettingCheckoutLink: false,
},
stripe: {
isGettingCheckoutLink: false,
},
@@ -199,15 +193,22 @@ export default {
}
},
methods: {
pickedPaymentMethod(driver) {
if (driver === 'paystack') {
this.$closePopup()
}
if (driver === 'paypal' && !this.paypal.isMethodsLoaded) {
this.PayPalInitialization()
}
payByPaystack() {
this.paystack.isGettingCheckoutLink = true
axios
.post('/api/paystack/checkout', {
planCode: this.selectedPlan.data.meta.driver_plan_id.paystack,
})
.then((response) => {
window.location = response.data.data.authorization_url
})
},
async PayPalInitialization() {
async payByPayPal() {
if (this.paypal.isMethodLoading) {
return
}
this.paypal.isMethodLoading = true
let paypal
@@ -268,11 +269,8 @@ export default {
message: this.$t('Your payment was successfully received.'),
})
// todo: temporary reload function
setTimeout(() => document.location.reload(), 1000)
},
paystackClosed() {
// ...
// todo: temporary reload function
setTimeout(() => document.location.reload(), 1000)
},
},
created() {

10
resources/js/views/Auth/SignUp.vue
View File

@@ -262,6 +262,16 @@ export default {
},
created() {
this.$scrollTop()
if (this.config.isDemo || this.config.isDev) {
this.register = {
name: 'John Doe',
email: 'demo-' + Math.floor(Math.random() * 100000) + '@doe.com',
password: 'vuefilemanager',
password_confirmation: 'vuefilemanager',
reCaptcha: null,
}
}
},
}
</script>