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 {