upgrade subscription popup

resources/js/components/Others/ChargePaymentPopup.vue

@@ -0,0 +1,177 @@
+<template>
+    <PopupWrapper name="select-payment-method">
+        <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 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="paymentSuccessful"
+                    :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">
+                {{ $t('Cancel Payment') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</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 paystack from 'vue-paystack'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'ChargePaymentPopup',
+    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
+
+            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
+
+            this.paypal.isMethodsLoaded = true
+            this.paypal.isMethodLoading = false
+			const app = this
+
+			// 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,
+                                },
+                            ],
+                        })
+                    },
+					onApprove: function () {
+						app.paymentSuccessful()
+					},
+                })
+                .render('#paypal-button-container')
+        },
+        paymentSuccessful() {
+            this.$closePopup()
+
+            events.$emit('toaster', {
+                type: 'success',
+                message: this.$t('Your payment was successfully received.'),
+            })
+
+			// todo: temporary reload function
+			setTimeout(() => document.location.reload(), 500)
+        },
+        paystackClosed() {
+            // ...
+        },
+    },
+    created() {
+        events.$on('popup:close', () => (this.paypal.isMethodsLoaded = false))
+    },
+}
+</script>