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;
+}