fix: subscriber middleware logic

components/checkout/plan/PlanSelection.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { get, set } from '@vueuse/core';
 import { useMainStore } from '~/store';
+import { canBuyNewSubscription } from '~/utils/subscription';
 import type { Plan } from '~/types';
 
 const { t } = useI18n();
@@ -41,6 +42,8 @@ function next() {
  });
 }
 
+const canBuy = reactive(canBuyNewSubscription)(account);
+
 const css = useCssModule();
 </script>
 
@@ -93,7 +96,7 @@ const css = useCssModule();
 
  <div :class="css.continue">
  <RuiButton
- :disabled="!selected"
+ :disabled="!selected || !canBuy"
  :loading="processing"
  class="w-full"
  color="primary"
@@ -103,6 +106,22 @@ const css = useCssModule();
  {{ t('actions.continue') }}
  </RuiButton>
  </div>
+
+ <div
+ v-if="!canBuy"
+ class="inline text-sm text-rui-text-secondary mt-2"
+ >
+ <span>* {{ t('home.plans.cannot_continue') }}</span>
+ <ButtonLink
+ to="/home/subscription"
+ variant="text"
+ color="primary"
+ inline
+ class="leading-[0] hover:underline"
+ >
+ {{ t('page_header.manage_premium') }}
+ </ButtonLink>
+ </div>
  </div>
  </div>
 </template>

components/common/AppShowcaseSlider.vue

@@ -54,7 +54,7 @@ scanImages();
  <SwiperSlide
  v-for="(image, i) in images"
  :key="i"
- class="relative pt-[56.2%]"
+ class="relative pt-[56.2%] bg-rui-grey-100"
  >
  <img
  :src="image"

components/products/ProductsButtons.vue

@@ -16,9 +16,6 @@ withDefaults(
 
 const store = useMainStore();
 const { account } = storeToRefs(store);
-const hasActiveSubscription = computed(
- () => !!get(account)?.hasActiveSubscription,
-);
 
 const allowNavigation = computed(() => {
  if (!isDefined(account))
@@ -45,7 +42,6 @@ const { t } = useI18n();
  </ButtonLink>
 
  <RuiTooltip
- v-if="!hasActiveSubscription"
  :disabled="allowNavigation"
  tooltip-class="max-w-[20rem]"
  >
@@ -62,14 +58,5 @@ const { t } = useI18n();
  </template>
  {{ t('subscription.error.unverified_email') }}
  </RuiTooltip>
- <ButtonLink
- v-else
- to="/home/subscription"
- size="lg"
- variant="filled"
- :color="color"
- >
- {{ t('page_header.manage_premium') }}
- </ButtonLink>
  </div>
 </template>

locales/en.json

@@ -479,6 +479,7 @@
  }
  },
  "plans": {
+ "cannot_continue": "You cannot continue because you have an active subscription. Click here to",
  "title": "Start using rotki today!",
  "most_popular": "Most popular",
  "choose": "Choose Plan",

middleware/subscriber.ts

@@ -1,20 +1,13 @@
 import { storeToRefs } from 'pinia';
-import { get } from '@vueuse/core';
 import { useMainStore } from '~/store';
+import { canBuyNewSubscription } from '~/utils/subscription';
 
 export default defineNuxtRouteMiddleware(async () => {
  const { account } = storeToRefs(useMainStore());
 
- if (!isDefined(account))
- return;
+ const canBuy = canBuyNewSubscription(account);
 
- const { hasActiveSubscription, subscriptions } = get(account);
- if (hasActiveSubscription) {
- const renewableSubscriptions = subscriptions.filter(({ actions }) =>
- actions.includes('renew'),
- );
-
- if (!renewableSubscriptions)
- return navigateTo('/home/subscription');
+ if (!canBuy) {
+ return navigateTo('/home/subscription');
  }
 });

pages/checkout/pay/index.vue

@@ -2,7 +2,7 @@
 import { commonAttrs, noIndex } from '~/utils/metadata';
 
 definePageMeta({
- middleware: ['maintenance', 'unverified', 'pending-payment', 'subscriber'],
+ middleware: ['maintenance', 'unverified', 'pending-payment'],
 });
 
 useHead({

utils/subscription.ts

@@ -0,0 +1,18 @@
+import { get } from '@vueuse/core';
+import type { Account } from '~/types';
+
+export function canBuyNewSubscription(account: Ref<Account | null>): boolean {
+ if (!isDefined(account))
+ return true;
+
+ const { hasActiveSubscription, subscriptions } = get(account);
+
+ if (!hasActiveSubscription)
+ return true;
+
+ const renewableSubscriptions = subscriptions.filter(({ actions }) =>
+ actions.includes('renew'),
+ );
+
+ return renewableSubscriptions.length > 0;
+}