vue components refactoring

2026-04-18 08:12:15 +00:00 · 2022-04-13 16:19:10 +02:00
parent 6a4bfa8bfe
commit 338f8664b7
251 changed files with 1068 additions and 1943 deletions
--- a/resources/js/components/Subscription/FixedTransactionRow.vue
+++ b/resources/js/components/Subscription/FixedTransactionRow.vue
@@ -62,9 +62,9 @@
    </tr>
 </template>
 <script>
-import MemberAvatar from '../FilesView/MemberAvatar'
+import MemberAvatar from '../UI/Others/MemberAvatar'
 import MeteredTransactionDetailRow from './MeteredTransactionDetailRow'
-import ColorLabel from '../Others/ColorLabel'
+import ColorLabel from '../UI/Labels/ColorLabel'
 import { EyeIcon, FileTextIcon } from 'vue-feather-icons'

 export default {
--- a/resources/js/components/Subscription/MeteredTransactionRow.vue
+++ b/resources/js/components/Subscription/MeteredTransactionRow.vue
@@ -74,9 +74,9 @@
    </tr>
 </template>
 <script>
-import MemberAvatar from '../FilesView/MemberAvatar'
+import MemberAvatar from '../UI/Others/MemberAvatar'
 import MeteredTransactionDetailRow from './MeteredTransactionDetailRow'
-import ColorLabel from '../Others/ColorLabel'
+import ColorLabel from '../UI/Labels/ColorLabel'
 import { EyeIcon, FileTextIcon } from 'vue-feather-icons'

 export default {
--- a/resources/js/components/Subscription/PaymentMethod.vue
+++ b/resources/js/components/Subscription/PaymentMethod.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="flex items-center justify-between border-b border-dashed border-light py-4 dark:border-opacity-5">
+        <div>
+            <img :src="$getPaymentLogo(driver)" :alt="driver" class="h-6" />
+            <small class="block pt-2 text-xs leading-4 dark:text-gray-500 text-gray-500">
+                {{ description }}
+            </small>
+        </div>
+        <div v-if="$slots.default" class="bg-theme-200 relative inline-block rounded-lg px-3 py-1">
+            <slot />
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'PaymentMethod',
+    props: ['description', 'driver'],
+}
+</script>
--- a/resources/js/components/Subscription/PlanDetail.vue
+++ b/resources/js/components/Subscription/PlanDetail.vue
@@ -32,7 +32,7 @@
 </template>
 <script>
 import { CheckIcon } from 'vue-feather-icons'
-import CheckBox from '../FilesView/CheckBox'
+import CheckBox from '../Inputs/CheckBox'

 export default {
    name: 'PlanDetail',
--- a/resources/js/components/Subscription/PlanPeriodSwitcher.vue
+++ b/resources/js/components/Subscription/PlanPeriodSwitcher.vue
@@ -16,7 +16,7 @@
 	</div>
 </template>
 <script>
-import SwitchInput from '../Others/Forms/SwitchInput'
+import SwitchInput from '../Inputs/SwitchInput'

 export default {
 	name: 'PlanPeriodSwitcher',
--- a/resources/js/components/Subscription/Popups/ChangeSubscriptionPopup.vue
+++ b/resources/js/components/Subscription/Popups/ChangeSubscriptionPopup.vue
@@ -44,18 +44,18 @@
 </template>

 <script>
-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 PopupWrapper from '../../Popups/Components/PopupWrapper'
+import PopupActions from '../../Popups/Components/PopupActions'
+import PopupContent from '../../Popups/Components/PopupContent'
+import PopupHeader from '../../Popups/Components/PopupHeader'
+import ButtonBase from '../../UI/Buttons/ButtonBase'
+import PlanDetail from '../PlanDetail'
 import {mapGetters} from 'vuex'
-import {events} from '../../bus'
+import {events} from '../../../bus'
 import axios from 'axios'
-import Spinner from '../FilesView/Spinner'
-import InfoBox from '../Others/Forms/InfoBox'
-import PlanPeriodSwitcher from "./PlanPeriodSwitcher";
+import Spinner from '../../UI/Others/Spinner'
+import InfoBox from '../../UI/Others/InfoBox'
+import PlanPeriodSwitcher from "../PlanPeriodSwitcher";

 export default {
    name: 'ChangeSubscriptionPopup',
--- a/resources/js/components/Subscription/Popups/ChargePaymentPopup.vue
+++ b/resources/js/components/Subscription/Popups/ChargePaymentPopup.vue
@@ -0,0 +1,182 @@
+<template>
+    <PopupWrapper name="select-payment-method">
+        <PopupHeader :title="$t('select_payment_method')" icon="credit-card" />
+
+        <PopupContent style="padding: 0 20px">
+			<InfoBox v-if="!config.isPayPal && !config.isPaystack" class="!mb-0">
+				<p>{{ $t("not_any_payment_method") }}</p>
+			</InfoBox>
+
+            <!--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="payByPayPal"
+                    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="$t(config.paystack_payment_description)"
+			>
+				<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>
+            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
+                {{ $t('cancel_payment') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import PopupWrapper from '../../Popups/Components/PopupWrapper'
+import PopupActions from '../../Popups/Components/PopupActions'
+import PopupContent from '../../Popups/Components/PopupContent'
+import PopupHeader from '../../Popups/Components/PopupHeader'
+import ButtonBase from '../../UI/Buttons/ButtonBase'
+import { loadScript } from '@paypal/paypal-js'
+import PaymentMethod from '../PaymentMethod'
+import Spinner from '../../UI/Others/Spinner'
+import InfoBox from "../../UI/Others/InfoBox"
+import { events } from '../../../bus'
+import { mapGetters } from 'vuex'
+import axios from "axios";
+
+export default {
+    name: 'ChargePaymentPopup',
+    components: {
+        PaymentMethod,
+        PopupWrapper,
+        PopupActions,
+        PopupContent,
+        PopupHeader,
+        ButtonBase,
+        Spinner,
+		InfoBox,
+    },
+    data() {
+        return {
+            paypal: {
+                isMethodsLoaded: false,
+                isMethodLoading: false,
+            },
+			paystack: {
+				isGettingCheckoutLink: false,
+			},
+        }
+    },
+    computed: {
+        ...mapGetters(['singleChargeAmount', 'config', 'user']),
+    },
+    methods: {
+		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
+
+            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_paypal'),
+                })
+            }
+
+            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('payment_was_successfully_received'),
+            })
+
+			// todo: temporary reload function
+			setTimeout(() => document.location.reload(), 500)
+        },
+    },
+    created() {
+        events.$on('popup:close', () => (this.paypal.isMethodsLoaded = false))
+    },
+}
+</script>
--- a/resources/js/components/Subscription/Popups/SubscribeAccountPopup.vue
+++ b/resources/js/components/Subscription/Popups/SubscribeAccountPopup.vue
@@ -118,21 +118,21 @@
 </template>

 <script>
-import PaymentMethod from '../Others/PaymentMethod'
+import PaymentMethod from '../PaymentMethod'
 import { loadScript } from '@paypal/paypal-js'
-import SwitchInput from '../Others/Forms/SwitchInput'
-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 SwitchInput from '../../Inputs/SwitchInput'
+import PopupWrapper from '../../Popups/Components/PopupWrapper'
+import PopupActions from '../../Popups/Components/PopupActions'
+import PopupContent from '../../Popups/Components/PopupContent'
+import PopupHeader from '../../Popups/Components/PopupHeader'
+import ButtonBase from '../../UI/Buttons/ButtonBase'
+import PlanDetail from '../PlanDetail'
 import { mapGetters } from 'vuex'
-import { events } from '../../bus'
+import { events } from '../../../bus'
 import axios from 'axios'
-import Spinner from '../FilesView/Spinner'
-import InfoBox from '../Others/Forms/InfoBox'
-import PlanPeriodSwitcher from './PlanPeriodSwitcher'
+import Spinner from '../../UI/Others/Spinner'
+import InfoBox from '../../UI/Others/InfoBox'
+import PlanPeriodSwitcher from '../PlanPeriodSwitcher'


 export default {
--- a/resources/js/components/Subscription/UserBalance.vue
+++ b/resources/js/components/Subscription/UserBalance.vue
@@ -51,9 +51,9 @@
 </template>
 <script>
 import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
-import ButtonBase from '../FilesView/ButtonBase'
-import FormLabel from '../Others/Forms/FormLabel'
-import AppInputText from '../Admin/AppInputText'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import FormLabel from '../UI/Labels/FormLabel'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { mapGetters } from 'vuex'

 export default {
--- a/resources/js/components/Subscription/UserBillingAlerts.vue
+++ b/resources/js/components/Subscription/UserBillingAlerts.vue
@@ -113,9 +113,9 @@
 </template>
 <script>
 import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
-import ButtonBase from '../FilesView/ButtonBase'
-import AppInputText from '../Admin/AppInputText'
-import FormLabel from '../Others/Forms/FormLabel'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import FormLabel from '../UI/Labels/FormLabel'
 import { Edit2Icon, Trash2Icon } from 'vue-feather-icons'
 import { events } from '../../bus'
 import { mapGetters } from 'vuex'
--- a/resources/js/components/Subscription/UserEditSubscription.vue
+++ b/resources/js/components/Subscription/UserEditSubscription.vue
@@ -36,11 +36,11 @@
 </template>

 <script>
-import AppInputButton from '../Admin/AppInputButton'
-import AppInputText from '../Admin/AppInputText'
-import AppInputSwitch from '../Admin/AppInputSwitch'
-import ButtonBase from '../FilesView/ButtonBase'
-import FormLabel from '../Others/Forms/FormLabel'
+import AppInputButton from '../Forms/Layouts/AppInputButton'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import FormLabel from '../UI/Labels/FormLabel'
 import { events } from '../../bus'
 import axios from 'axios'

--- a/resources/js/components/Subscription/UserEmptySubscription.vue
+++ b/resources/js/components/Subscription/UserEmptySubscription.vue
@@ -25,9 +25,9 @@
 </template>

 <script>
-import InfoBox from '../Others/Forms/InfoBox'
-import FormLabel from '../Others/Forms/FormLabel'
-import ButtonBase from '../FilesView/ButtonBase'
+import InfoBox from '../UI/Others/InfoBox'
+import FormLabel from '../UI/Labels/FormLabel'
+import ButtonBase from '../UI/Buttons/ButtonBase'

 export default {
    name: 'UserEmptySubscription',
--- a/resources/js/components/Subscription/UserFailedPayments.vue
+++ b/resources/js/components/Subscription/UserFailedPayments.vue
@@ -50,8 +50,8 @@
 </template>

 <script>
-import FormLabel from '../Others/Forms/FormLabel'
-import InfoBox from '../Others/Forms/InfoBox'
+import FormLabel from '../UI/Labels/FormLabel'
+import InfoBox from '../UI/Others/InfoBox'
 import { mapGetters } from 'vuex'

 export default {
--- a/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
+++ b/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
@@ -22,8 +22,8 @@
    </div>
 </template>
 <script>
-import FormLabel from '../Others/Forms/FormLabel'
-import ProgressLine from '../Admin/ProgressLine'
+import FormLabel from '../UI/Labels/FormLabel'
+import ProgressLine from '../UI/ProgressChart/ProgressLine'
 import { mapGetters } from 'vuex'

 export default {
--- a/resources/js/components/Subscription/UserStoredPaymentMethods.vue
+++ b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
@@ -69,15 +69,15 @@
    </div>
 </template>
 <script>
-import ButtonBase from '../FilesView/ButtonBase'
-import FormLabel from '../Others/Forms/FormLabel'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import FormLabel from '../UI/Labels/FormLabel'
 import PaymentCard from './PaymentCard'
-import Spinner from '../FilesView/Spinner'
+import Spinner from '../UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 import { loadStripe } from '@stripe/stripe-js'
 import axios from 'axios'
-import InfoBox from "../Others/Forms/InfoBox";
+import InfoBox from "../UI/Others/InfoBox";

 // Define stripe variables
 let stripe,
--- a/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
+++ b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
@@ -24,11 +24,11 @@
    </div>
 </template>
 <script>
-import InfoBox from '../Others/Forms/InfoBox'
-import DatatableWrapper from '../Others/Tables/DatatableWrapper'
+import InfoBox from '../UI/Others/InfoBox'
+import DatatableWrapper from '../UI/Table/DatatableWrapper'
 import FixedTransactionRow from './FixedTransactionRow'
-import FormLabel from '../Others/Forms/FormLabel'
-import ColorLabel from '../Others/ColorLabel'
+import FormLabel from '../UI/Labels/FormLabel'
+import ColorLabel from '../UI/Labels/ColorLabel'

 export default {
    name: 'UserTransactionsForFixedBilling',
--- a/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
+++ b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
@@ -27,10 +27,10 @@
 </template>
 <script>
 import { EyeIcon, FileTextIcon } from 'vue-feather-icons'
-import ColorLabel from '../Others/ColorLabel'
-import DatatableWrapper from '../Others/Tables/DatatableWrapper'
-import FormLabel from '../Others/Forms/FormLabel'
-import InfoBox from '../Others/Forms/InfoBox'
+import ColorLabel from '../UI/Labels/ColorLabel'
+import DatatableWrapper from '../UI/Table/DatatableWrapper'
+import FormLabel from '../UI/Labels/FormLabel'
+import InfoBox from '../UI/Others/InfoBox'
 import { mapGetters } from 'vuex'
 import MeteredTransactionDetailRow from './MeteredTransactionDetailRow'
 import MeteredTransactionRow from './MeteredTransactionRow'
--- a/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
+++ b/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
@@ -22,12 +22,12 @@
 </template>

 <script>
-import AppInputSwitch from '../Admin/AppInputSwitch'
-import ButtonBase from '../FilesView/ButtonBase'
-import FormLabel from '../Others/Forms/FormLabel'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import FormLabel from '../UI/Labels/FormLabel'
 import axios from 'axios'
 import { events } from '../../bus'
-import AppInputButton from '../Admin/AppInputButton'
+import AppInputButton from '../Forms/Layouts/AppInputButton'

 export default {
    name: 'UserUpdatePaymentMethodsExternally',
--- a/resources/js/components/Subscription/UserUsageEstimates.vue
+++ b/resources/js/components/Subscription/UserUsageEstimates.vue
@@ -44,7 +44,7 @@
    </div>
 </template>
 <script>
-import FormLabel from '../Others/Forms/FormLabel'
+import FormLabel from '../UI/Labels/FormLabel'
 import { mapGetters } from 'vuex'

 export default {