From 31776fb265ded93d8e1ce445aa3744aac13de526 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Wed, 3 Apr 2024 17:21:34 +0700
Subject: [PATCH] feat: add a payment link for pending subscriptions

---
 components/account/home/SubscriptionTable.vue | 14 +++++++++++++-
 locales/en.json                               |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/account/home/SubscriptionTable.vue b/components/account/home/SubscriptionTable.vue
index cd3cd82c..ee08ddad 100644
--- 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
index e5447544..b09f9688 100644
--- 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": {