From b9e8eeb28053504cb1c4999724e804a958a937a4 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Wed, 4 Sep 2024 16:57:15 +0700
Subject: [PATCH] fix: subscriber middleware logic

---
 components/checkout/plan/PlanSelection.vue | 21 ++++++++++++++++++++-
 components/common/AppShowcaseSlider.vue    |  2 +-
 components/products/ProductsButtons.vue    | 13 -------------
 locales/en.json                            |  1 +
 middleware/subscriber.ts                   | 15 ++++-----------
 pages/checkout/pay/index.vue               |  2 +-
 utils/subscription.ts                      | 18 ++++++++++++++++++
 7 files changed, 45 insertions(+), 27 deletions(-)
 create mode 100644 utils/subscription.ts

diff --git a/components/checkout/plan/PlanSelection.vue b/components/checkout/plan/PlanSelection.vue
index 940e72fe..8b27a308 100644
--- a/components/checkout/plan/PlanSelection.vue
+++ b/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>
diff --git a/components/common/AppShowcaseSlider.vue b/components/common/AppShowcaseSlider.vue
index 6f3b5499..e5deb1ed 100644
--- a/components/common/AppShowcaseSlider.vue
+++ b/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"
diff --git a/components/products/ProductsButtons.vue b/components/products/ProductsButtons.vue
index 0591feff..0c028e63 100644
--- a/components/products/ProductsButtons.vue
+++ b/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>
diff --git a/locales/en.json b/locales/en.json
index 7f3d888b..cb2eb7cd 100644
--- a/locales/en.json
+++ b/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",
diff --git a/middleware/subscriber.ts b/middleware/subscriber.ts
index c7945a26..93a480ee 100644
--- a/middleware/subscriber.ts
+++ b/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');
   }
 });
diff --git a/pages/checkout/pay/index.vue b/pages/checkout/pay/index.vue
index 3c59971c..ad2a3e3f 100644
--- a/pages/checkout/pay/index.vue
+++ b/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({
diff --git a/utils/subscription.ts b/utils/subscription.ts
new file mode 100644
index 00000000..f0211cc1
--- /dev/null
+++ b/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;
+}