feat: add a payment link for pending subscriptions

rotki · Apr 4, 2024 · 31776fb · 31776fb
1 parent b465b12
commit 31776fb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/components/account/home/SubscriptionTable.vue b/components/account/home/SubscriptionTable.vue
@@ -116,6 +116,10 @@ watch(pending, (pending) => {
 
 onUnmounted(() => pause());
 
+function isPending(sub: Subscription) {
+  return sub.status === 'Pending';
+}
+
 function hasAction(sub: Subscription, action: 'renew' | 'cancel') {
   if (action === 'cancel')
     return sub.status !== 'Pending' && sub.actions.includes('cancel');
@@ -126,7 +130,7 @@ function hasAction(sub: Subscription, action: 'renew' | 'cancel') {
 }
 
 function displayActions(sub: Subscription) {
-  return hasAction(sub, 'renew') || hasAction(sub, 'cancel');
+  return hasAction(sub, 'renew') || hasAction(sub, 'cancel') || isPending(sub);
 }
 
 function getChipStatusColor(status: string): ContextColorsType | undefined {
@@ -202,6 +206,14 @@ async function cancelSubscription(sub: Subscription) {
           >
             {{ t('actions.renew') }}
           </ButtonLink>
+          <ButtonLink
+            v-if="isPending(row)"
+            :disabled="cancelling"
+            :to="{ path: '/checkout/pay/method' }"
+            color="primary"
+          >
+            {{ t('account.subscriptions.payment_detail') }}
+          </ButtonLink>
         </div>
         <div
           v-else

diff --git a/locales/en.json b/locales/en.json
@@ -215,6 +215,7 @@
         "cost_in_symbol_per_period": "Cost in {symbol} per period"
       },
       "no_subscriptions_found": "No subscriptions found",
+      "payment_detail": "Payment Details",
       "title": "Subscription History"
     },
     "tabs": {