- process single charge

resources/js/components/Others/PaymentMethod.vue

@@ -0,0 +1,22 @@
+<template>
+	<div class="flex items-center justify-between py-4 border-b dark:border-opacity-5 border-light border-dashed">
+		<div>
+			<img :src="$getPaymentLogo(driver)" :alt="driver" class="h-6">
+			<small class="text-xs text-gray-500 pt-2 leading-4 block">
+				{{ description }}
+			</small>
+		</div>
+		<div v-if="$slots.default" class="bg-theme-200 inline-block px-3 py-1 rounded-lg">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'PaymentMethod',
+	props: [
+		'description',
+		'driver',
+	]
+}
+</script>

resources/js/components/Others/Popup/PopupHeader.vue

@@ -7,6 +7,7 @@
             <key-icon v-if="icon === 'key'" size="17" class="title-icon text-theme dark-text-theme" />
             <users-icon v-if="icon === 'users'" size="17" class="title-icon text-theme dark-text-theme" />
             <user-plus-icon v-if="icon === 'user-plus'" size="17" class="title-icon text-theme dark-text-theme" />
+            <credit-card-icon v-if="icon === 'credit-card'" size="17" class="title-icon text-theme dark-text-theme" />
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
@@ -16,7 +17,7 @@
 </template>
 
 <script>
-    import {KeyIcon, UserPlusIcon, CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon, ShareIcon, UsersIcon} from 'vue-feather-icons'
+    import {CreditCardIcon, KeyIcon, UserPlusIcon, CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon, ShareIcon, UsersIcon} from 'vue-feather-icons'
     import {events} from '/resources/js/bus'
 
     export default {
@@ -26,6 +27,7 @@
         ],
         components: {
             CornerDownRightIcon,
+			CreditCardIcon,
 			UserPlusIcon,
 			UsersIcon,
             ShareIcon,

resources/js/components/Others/Popup/PopupWrapper.vue

@@ -51,8 +51,6 @@
 
             // Close popup
             events.$on('popup:close', () => this.isVisibleWrapper = false)
-
-			//todo: if (this.name === 'create-team-folder') this.isVisibleWrapper = true
         }
     }
 </script>

resources/js/components/Others/SelectSingleChargeMethodPopup.vue

@@ -0,0 +1,178 @@
+<template>
+    <PopupWrapper name="select-payment-method">
+        <PopupHeader :title="$t('Select Payment Method')" icon="credit-card" />
+
+        <PopupContent style="padding: 0 20px">
+
+			<!--PayPal implementation-->
+			<div :class="{'dark:bg-2x-dark-foreground bg-light-background rounded-xl px-4 mb-2': paypalMethodsLoaded}">
+				<PaymentMethod
+					@click.native="pickedPaymentMethod('paypal')"
+					driver="paypal"
+					:description="$t('Available PayPal Credit, Debit or Credit Card.')"
+				>
+					<span v-if="! paypalMethodsLoaded" class="text-sm text-theme font-bold cursor-pointer">
+						{{ $t('Select') }}
+					</span>
+				</PaymentMethod>
+
+				<!--PayPal Buttons-->
+				<div v-if="paypalMethodsLoaded">
+					<div id="paypal-button-container"></div>
+				</div>
+			</div>
+
+			<!--Paystack implementation-->
+			<PaymentMethod
+				driver="paystack"
+				:description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')"
+			>
+				<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="reference"
+					:callback="paystackPaymentSuccessful"
+					:close="paystackClosed"
+				>
+					<span class="text-sm text-theme font-bold cursor-pointer">
+						{{ $t('Select') }}
+					</span>
+				 </paystack>
+			</PaymentMethod>
+        </PopupContent>
+
+        <PopupActions>
+            <ButtonBase
+				class="popup-button"
+				@click.native="$closePopup()"
+				button-style="secondary"
+			>
+                {{ $t('Cancel Payment') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
+import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
+import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
+import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
+import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+import { loadScript } from "@paypal/paypal-js"
+import PaymentMethod from "./PaymentMethod"
+import {events} from '/resources/js/bus'
+import paystack from 'vue-paystack'
+import {mapGetters} from "vuex"
+
+export default {
+	name: "SelectSingleChargeMethodPopup",
+	components: {
+		PaymentMethod,
+		PopupWrapper,
+		PopupActions,
+		PopupContent,
+		PopupHeader,
+		ButtonBase,
+		paystack,
+	},
+	data() {
+		return {
+			paypalMethodsLoaded: false,
+		}
+	},
+	computed: {
+		...mapGetters([
+			'singleChargeAmount',
+			'config',
+			'user',
+		]),
+		reference() {
+			let text = "";
+			let possible =
+				"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+			for (let i = 0; i < 10; i++)
+				text += possible.charAt(Math.floor(Math.random() * possible.length));
+
+			return text;
+		},
+	},
+	methods: {
+		pickedPaymentMethod(driver) {
+			if (driver === 'paystack') {
+				this.$closePopup()
+			}
+			if (driver === 'paypal' && !this.paypalMethodsLoaded) {
+				this.PayPalInitialization()
+			}
+		},
+		async PayPalInitialization() {
+			this.paypalMethodsLoaded = true
+
+			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'),
+				})
+			}
+
+			const userId = this.user.data.id
+			const amount = this.singleChargeAmount
+
+			// 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.paypalMethodsLoaded = false)
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    @import '/resources/sass/vuefilemanager/_variables';
+	@import '/resources/sass/vuefilemanager/_mixins';
+
+	.mobile-actions {
+		white-space: nowrap;
+		overflow-x: auto;
+		margin: 0 -20px;
+		padding: 10px 0 10px 20px;
+	}
+</style>

resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue

@@ -188,7 +188,7 @@
 					});
 				} catch (error) {
 					events.$emit('toaster', {
-						type: 'error',
+						type: 'danger',
 						message: this.$t('failed to load the PayPal components'),
 					})
 				}
@@ -210,7 +210,7 @@
 					}
 				}).render('#paypal-button-container');*/
 
-				// Initialize paypal buttons for subscription
+				// Initialize paypal buttons for single charge
 				await paypal.Buttons({
 					createOrder: function(data, actions) {
 						return actions.order.create({

resources/js/helpers/functionHelpers.js

@@ -326,7 +326,7 @@ const FunctionHelpers = {
 
         Vue.prototype.$getPaymentLogo = function (driver) {
             return {
-                'paypal': '/assets/payments/paypal.svg',
+                'paypal': store.getters.isDarkMode ? '/assets/payments/paypal-dark.svg' : '/assets/payments/paypal.svg',
                 'paystack': store.getters.isDarkMode ? '/assets/payments/paystack-dark.svg' : '/assets/payments/paystack.svg',
                 'stripe': '/assets/payments/stripe.svg',
                 'system': this.$getImage(store.getters.config.app_logo_horizontal),

resources/js/store/index.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 
 import fileFunctions from './modules/fileFunctions'
 import fileBrowser from './modules/fileBrowser'
+import payments from './modules/payments'
 import userAuth from './modules/userAuth'
 import sharing from './modules/sharing'
 import teams from './modules/teams'
@@ -14,6 +15,7 @@ export default new Vuex.Store({
     modules: {
         fileFunctions,
         fileBrowser,
+        payments,
         userAuth,
         sharing,
         teams,

resources/js/store/modules/payments.js

@@ -0,0 +1,33 @@
+import {events} from "../../bus";
+
+const defaultState = {
+	singleChargeAmount: undefined,
+}
+
+const actions = {
+	callSingleChargeProcess: ({commit}, amount) => {
+
+		// Open popup with payment methods
+		events.$emit('popup:open', {name: 'select-payment-method'})
+
+		// Store charge amount
+		commit('SET_SINGLE_CHARGE_AMOUNT', amount)
+	},
+}
+
+const mutations = {
+	SET_SINGLE_CHARGE_AMOUNT(state, amount) {
+		state.singleChargeAmount = amount
+	}
+}
+
+const getters = {
+	singleChargeAmount: state => state.singleChargeAmount,
+}
+
+export default {
+	state: defaultState,
+	getters,
+	actions,
+	mutations
+}

resources/js/views/Profile.vue

@@ -14,6 +14,9 @@
 		<!--Access Token Popup-->
 		<CreatePersonaTokenPopup />
 
+		<!--Payments Popup-->
+		<SelectSingleChargeMethodPopup />
+
 		<SidebarNavigation />
 
         <div v-if="user" class="px-6 w-full overflow-x-hidden relative pt-6 xl:max-w-screen-lg md:max-w-screen-md mx-auto">
@@ -77,6 +80,7 @@
 </template>
 
 <script>
+	import SelectSingleChargeMethodPopup from "../components/Others/SelectSingleChargeMethodPopup";
 	import ButtonBase from "../components/FilesView/ButtonBase";
 	import SelectPlanSubscriptionPopup from "../components/Subscription/SelectPlanSubscriptionPopup";
 	import ConfirmPopup from "../components/Others/Popup/ConfirmPopup";
@@ -91,10 +95,12 @@
 	import Spinner from '/resources/js/components/FilesView/Spinner'
 	import {mapGetters} from 'vuex'
 	import CardNavigation from "../components/Admin/CardNavigation";
+	import {events} from "../bus";
 
 	export default {
         name: 'Settings',
         components: {
+			SelectSingleChargeMethodPopup,
 			SelectPlanSubscriptionPopup,
 			ButtonBase,
 			ConfirmPopup,

resources/js/views/User/MeteredSubscription.vue

@@ -11,11 +11,11 @@
 				{{ user.data.relationships.balance.data.attributes.formatted }}
 			</b>
 
-			<ValidationObserver ref="changeStorageCapacity" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
+			<ValidationObserver ref="fundAccount" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
                 <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
 					<AppInputText :description="$t('The amount will be increased as soon as we register your charge from payment gateway.')" :error="errors[0]" :is-last="true">
-						<div class="flex space-x-4">
-							<input v-model="paymentAmount"
+						<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
+							<input v-model="chargeAmount"
 								   :placeholder="$t('Fund Your Account Balance...')"
 								   type="number"
 								   min="1"
@@ -23,7 +23,7 @@
 								   class="focus-border-theme input-dark"
 								   :class="{'border-red-700': errors[0]}"
 							/>
-							<ButtonBase type="submit" button-style="theme" class="submit-button">
+							<ButtonBase type="submit" button-style="theme" class="sm:w-auto w-full">
 								{{ $t('Make a Payment') }}
 							</ButtonBase>
 						</div>
@@ -52,7 +52,7 @@
 						<b class="text-sm font-bold leading-none">
 							{{ $t(usage.feature) }}
 						</b>
-						<small class="text-xs text-gray-500 pt-2 leading-none block">
+						<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
 							{{ $t(`feature_usage_desc_${usage.feature}`) }}
 						</small>
 					</div>
@@ -91,7 +91,7 @@
 			<ValidationObserver v-if="showUpdateBillingAlertForm" ref="updatebillingAlertForm" @submit.prevent="updateBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
                 <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
 					<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
-						<div class="flex space-x-4">
+						<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
 							<input v-model="billingAlertAmount"
 								   :placeholder="$t('Alert Amount...')"
 								   type="number"
@@ -100,7 +100,7 @@
 								   class="focus-border-theme input-dark"
 								   :class="{'border-red-700': errors[0]}"
 							/>
-							<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="submit-button">
+							<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="sm:w-auto w-full">
 								{{ $t('Update Alert') }}
 							</ButtonBase>
 						</div>
@@ -231,7 +231,7 @@
 				billingAlertAmount: undefined,
 				showUpdateBillingAlertForm: false,
 
-				paymentAmount: undefined,
+				chargeAmount: undefined,
 				columns: [
 					{
 						label: this.$t('Note'),
@@ -336,8 +336,14 @@
 					}
 				})
 			},
-			makePayment() {
-				// TODO: make a payment
+			async makePayment() {
+				// Validate fields
+				const isValid = await this.$refs.fundAccount.validate();
+
+				if (!isValid) return;
+
+				// Show payment methods popup
+				this.$store.dispatch('callSingleChargeProcess', this.chargeAmount)
 			},
 		},
 		created() {

resources/views/vuefilemanager/others/color-template.blade.php

@@ -28,6 +28,7 @@
         .bg-theme {background: {{ $color }}}
         .bg-theme-50 {background: {{ $color }}05}
         .bg-theme-100 {background: {{ $color }}10}
+        .bg-theme-200 {background: {{ $color }}20}
         .bg-theme-800 {background: {{ $color }}80}
         .hover-bg-theme:hover {background: {{ $color }}}
         .hover-bg-theme-100:hover {background: {{ $color }}10 !important;}