paystack refactoring

package.json

@@ -38,7 +38,6 @@
         "vue": "^2.6.14",
         "vue-feather-icons": "^5.1.0",
         "vue-i18n": "^8.27.0",
-        "vue-paystack": "^2.0.4",
         "vue-recaptcha-v3": "^1.9.0",
         "vue-router": "^3.5.3",
         "vuex": "^3.6.2"

resources/js/components/Others/ChargePaymentPopup.vue

@@ -11,7 +11,7 @@
                 }"
             >
                 <PaymentMethod
-                    @click.native="pickedPaymentMethod('paypal')"
+                    @click.native="payByPayPal"
                     driver="paypal"
                     :description="config.paypal_payment_description"
                 >
@@ -35,25 +35,18 @@
 			<PaymentMethod
 				v-if="config.isPaystack"
 				driver="paystack"
-                :description="config.paystack_payment_description"
+				:description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')"
 			>
-                <paystack
+				<div v-if="paystack.isGettingCheckoutLink" class="translate-y-3 scale-50 transform">
-                    @click.native="pickedPaymentMethod('paystack')"
+					<Spinner />
-                    v-if="user && config"
+				</div>
-                    :channels="['card', 'bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer']"
+				<span
-                    class="font-bold"
+					@click="payByPaystack()"
-                    currency="ZAR"
+					:class="{ 'opacity-0': paystack.isGettingCheckoutLink }"
-                    :amount="singleChargeAmount * 100"
+					class="text-theme cursor-pointer text-sm font-bold"
-                    :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>
 
@@ -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) {
+		payByPaystack() {
-            if (driver === 'paystack') {
+			this.paystack.isGettingCheckoutLink = true
-                this.$closePopup()
+
-            }
+			axios
-            if (driver === 'paypal' && !this.paypal.isMethodsLoaded) {
+				.post('/api/paystack/checkout', {
-                this.PayPalInitialization()
+					amount: this.singleChargeAmount * 100,
-            }
+				})
+				.then((response) => {
+					window.location = response.data.data.authorization_url
+				})
 		},
-        async PayPalInitialization() {
+        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))

resources/js/components/Subscription/ChangeSubscriptionPopup.vue

@@ -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,

resources/js/components/Subscription/SubscribeAccountPopup.vue

@@ -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
+                    <div v-if="paystack.isGettingCheckoutLink" class="translate-y-3 scale-50 transform">
-                        v-if="user && config"
+                        <Spinner />
-                        :channels="['bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer']"
+                    </div>
-                        class="font-bold"
+                    <span
-                        :currency="config.isDev ? 'ZAR' : selectedPlan.data.attributes.currency"
+                        @click="payByPaystack()"
-                        :plan="selectedPlan.data.meta.driver_plan_id.paystack"
+                        :class="{ 'opacity-0': paystack.isGettingCheckoutLink }"
-                        :amount="selectedPlan.data.attributes.amount * 100"
+                        class="text-theme cursor-pointer text-sm font-bold"
-                        :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>
 
@@ -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,13 +127,12 @@ 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',
@@ -149,7 +141,6 @@ export default {
         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) {
+        payByPaystack() {
-            if (driver === 'paystack') {
+            this.paystack.isGettingCheckoutLink = true
-                this.$closePopup()
+
-            }
+            axios
-            if (driver === 'paypal' && !this.paypal.isMethodsLoaded) {
+                .post('/api/paystack/checkout', {
-                this.PayPalInitialization()
+                    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
@@ -271,9 +272,6 @@ export default {
             // todo: temporary reload function
             setTimeout(() => document.location.reload(), 1000)
         },
-        paystackClosed() {
-            // ...
-        },
     },
     created() {
         // Load available plans

resources/js/views/Auth/SignUp.vue

@@ -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>