UI fixes

resources/js/components/Subscription/PaymentCard.vue

@@ -51,6 +51,9 @@
 						})
 						.catch(() => this.$isSomethingWrong())
 			})
-		}
+		},
+		destroyed() {
+			events.$off('action:confirmed')
+		},
 	}
 </script>

resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue

@@ -81,25 +81,25 @@
 
 		<!--Select Payment Plans-->
 		<div v-if="! isPaymentOptionPage">
-			<PopupContent>
+			<PopupContent v-if="plans">
 
 				<!--Toggle yearly billing-->
-				<div class="px-5 mb-2 text-right">
-					<label :class="{'text-gray-400': !isYearlyPlans}" class="font-bold cursor-pointer text-xs">
+				<div v-if="hasYearlyPlans.length > 0" class="px-5 mb-2 text-right">
+					<label :class="{'text-gray-400': !isSelectedYearlyPlans}" class="font-bold cursor-pointer text-xs">
 						{{ $t('Billed Annually') }}
 					</label>
 					<div class="relative inline-block w-12 align-middle select-none">
-						<SwitchInput class="transform scale-75" v-model="isYearlyPlans" :state="isYearlyPlans" />
+						<SwitchInput class="transform scale-75" v-model="isSelectedYearlyPlans" :state="isSelectedYearlyPlans" />
 					</div>
 				</div>
 
 				<!--List available plans-->
-				<div class="px-4" v-if="plans">
+				<div class="px-4">
 					<PlanDetail
-						v-for="(plan, i) in plans"
+						v-for="(plan, i) in plans.data"
 						:plan="plan"
 						:key="plan.data.id"
-						v-if="plan.data.attributes.interval === intervalPlanType && userActivePlanId !== plan.data.id"
+						v-if="plan.data.attributes.interval === intervalPlanType && userSubscribedPlanId !== plan.data.id"
 						:is-selected="selectedPlan && selectedPlan.data.id === plan.data.id"
 						@click.native="selectPlan(plan)"
 					/>
@@ -156,7 +156,7 @@
 			ButtonBase,
 		},
 		watch: {
-			isYearlyPlans() {
+			isSelectedYearlyPlans() {
 				this.selectedPlan = undefined
 			}
 		},
@@ -166,7 +166,7 @@
 				'user',
 			]),
 			intervalPlanType() {
-				return this.isYearlyPlans
+				return this.isSelectedYearlyPlans
 					? 'year'
 					: 'month'
 			},
@@ -175,9 +175,12 @@
 					? 'theme'
 					: 'secondary'
 			},
-			userActivePlanId() {
-				return this.user && this.user.data.relationships.subscription.data.relationships.plan.data.id
+			userSubscribedPlanId() {
+				return (this.user && this.user.data.relationships.subscription) && this.user.data.relationships.subscription.data.relationships.plan.data.id
 			},
+			hasYearlyPlans() {
+				return this.plans.data.filter(plan => plan.data.attributes.interval === 'year')
+			}
 		},
 		data() {
 			return {
@@ -188,7 +191,7 @@
 					isMethodsLoaded: false,
 				},
 				isPaymentOptionPage: false,
-				isYearlyPlans: false,
+				isSelectedYearlyPlans: false,
 				isLoading: false,
 				selectedPlan: undefined,
 				plans: undefined,
@@ -263,10 +266,19 @@
 			}
 		},
 		created() {
+			// Load available plans
 			axios.get('/api/subscriptions/plans')
 				.then(response => {
-					this.plans = response.data.data
+					this.plans = response.data
 				})
+
+			// Reset states on popup close
+			events.$on('popup:close', () => {
+				this.isSelectedYearlyPlans = false
+				this.isPaymentOptionPage = false
+				this.selectedPlan = undefined
+				this.paypal.isMethodsLoaded = false
+			})
 		}
 	}
 </script>

resources/js/components/Subscription/UserBillingAlerts.vue

@@ -168,7 +168,6 @@ export default {
 	},
 	created() {
 		events.$on('action:confirmed', data => {
-
 			if (data.operation === 'delete-billing-alert')
 				axios.delete(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`)
 					.then(() => {
@@ -184,6 +183,9 @@ export default {
 					})
 					.catch(() => this.$isSomethingWrong())
 		})
-	}
+	},
+	destroyed() {
+		events.$off('action:confirmed')
+	},
 }
 </script>

resources/js/components/Subscription/UserEditSubscription.vue

@@ -4,15 +4,15 @@
 			{{ $t('Edit your Subscription') }}
 		</FormLabel>
 
-		<AppInputSwitch :title="$t('Cancel Subscription')" :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')">
+		<AppInputSwitch v-if="subscription.attributes.status !== 'cancelled'" :title="$t('Cancel Subscription')" :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')">
 			<ButtonBase @click.native="cancelSubscriptionConfirmation" :loading="isCancelling" class="sm:w-auto w-full" button-style="secondary">
 				{{ $t('Cancel Now') }}
 			</ButtonBase>
 		</AppInputSwitch>
 
-		<AppInputSwitch :title="$t('Change Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
+		<AppInputSwitch :title="$t('Upgrade or Downgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
 			<ButtonBase @click.native="$openUpgradeOptions" class="sm:w-auto w-full" button-style="secondary">
-				{{ $t('Change Now') }}
+				{{ $t('Change Plan') }}
 			</ButtonBase>
 		</AppInputSwitch>
 	</div>
@@ -57,7 +57,6 @@
 			},
 		},
 		created() {
-
 			events.$on('action:confirmed', data => {
 				if (data.operation === 'cancel-subscription') {
 
@@ -89,8 +88,10 @@
 							this.isCancelling = false
 						})
 				}
-
 			})
-		}
+		},
+		destroyed() {
+			events.$off('action:confirmed')
+		},
 	}
 </script>

resources/js/components/Subscription/UserFixedSubscriptionDetail.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="card shadow-card">
+	<div v-if="hasSubscription" class="card shadow-card">
 		<FormLabel>
 			{{ $t('Subscription') }}
 		</FormLabel>
@@ -38,6 +38,9 @@
 			subscription() {
 				return this.$store.getters.user.data.relationships.subscription
 			},
+			hasSubscription() {
+				return this.$store.getters.user.data.relationships.subscription
+			},
 			limitations() {
 				let limitations = []
 

resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="['paystack', 'paypal'].includes(subscription.attributes.driver)" class="card shadow-card">
+	<div v-if="hasSubscription && ['paystack', 'paypal'].includes(subscription.attributes.driver)" class="card shadow-card">
 		<FormLabel>
 			{{ $t('Update Payments') }}
 		</FormLabel>
@@ -29,7 +29,10 @@
 		computed: {
 			subscription() {
 				return this.$store.getters.user.data.relationships.subscription.data
-			}
+			},
+			hasSubscription() {
+				return this.$store.getters.user.data.relationships.subscription
+			},
 		},
 		data() {
 			return {

resources/js/views/Admin/AppSettings/AppSettings.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
 		<!--Page Tab links-->
-		<div class="card shadow-card py-0 sticky top-0 z-10">
+		<div class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0; padding-top: 0;">
 			<CardNavigation :pages="pages" class="-mx-1" />
 		</div>
 

resources/js/views/Admin/PaymentSettings/PaymentSettings.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
 		<!--Page Tab links-->
-		<div class="card shadow-card py-0 sticky top-0 z-10">
+		<div class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0; padding-top: 0;">
 			<CardNavigation :pages="pages" class="-mx-1" />
 		</div>
 

resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue

@@ -441,6 +441,9 @@
 				if (data.operation === 'change-subscription-type')
 					this.$updateText('/admin/settings', 'subscription_type', data.type)
 			})
-		}
+		},
+		destroyed() {
+			events.$off('action:confirmed')
+		},
 	}
 </script>

resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue

@@ -16,7 +16,7 @@
 			<!--Description-->
 			<ValidationProvider tag="div" mode="passive" name="Description" v-slot="{ errors }">
 				<AppInputText :title="$t('admin_page_plans.form.description')" :is-last="true">
-					<textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"></textarea>
+					<textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" maxlength="120"></textarea>
 				</AppInputText>
 			</ValidationProvider>
 		</div>

resources/js/views/Admin/Plans/FixedPlan.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-		<div v-if="plan" class="card shadow-card pb-0 sticky top-0 z-10">
+		<div v-if="plan" class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0">
 
 			<div class="mb-2">
 				<h1 class="font-bold text-xl">

resources/js/views/Admin/Plans/MeteredPlan.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-		<div v-if="plan" class="card shadow-card pb-0 sticky top-0 z-10">
+		<div v-if="plan" class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0;">
 
 			<div class="mb-2">
 				<h1 class="font-bold text-xl">

resources/js/views/Admin/Users/User.vue

@@ -2,7 +2,7 @@
     <div>
 		<div id="page-content" v-if="! isLoading">
 			<!--Page Tab links-->
-			<div class="card shadow-card pt-4 pb-0 sticky top-0 z-10">
+			<div class="card shadow-card pt-4 sticky top-0 z-10" style="padding-bottom: 0;">
 				<div class="user-thumbnail">
 					<div class="avatar">
 						<img :src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name">

resources/js/views/FileView/SharedWithMe.vue

@@ -229,8 +229,8 @@
 						.catch(() => this.$isSomethingWrong())
 			})
 		},
-		beforeDestroy() {
+		destroyed() {
 			events.$off('action:confirmed')
-		}
+		},
 	}
 </script>

resources/js/views/FileView/TeamFolders.vue

@@ -256,8 +256,8 @@
 						.catch(() => this.$isSomethingWrong())
 			})
 		},
-		beforeDestroy() {
+		destroyed() {
 			events.$off('action:confirmed')
-		}
+		},
 	}
 </script>

resources/js/views/Profile.vue

@@ -22,7 +22,7 @@
         <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">
             <div v-if="! isLoading" id="page-content">
 
-				<div class="card shadow-card pb-0 sticky top-0 z-10">
+				<div class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0">
 					<!--User thumbnail-->
                     <div class="mb-3">
                         <div class="user-thumbnail">

resources/js/views/User/Password.vue

@@ -222,7 +222,10 @@
 			})
 
 			events.$on('reload-personal-access-tokens', () => this.getPersonalAccessTokens())
-		}
+		},
+		destroyed() {
+			events.$off('action:confirmed')
+		},
 	}
 </script>