🚸 Distinguish past_due from canceled for expired Plus users

composables/use-likecoin-session-api.ts

@@ -467,6 +467,10 @@ export function useLikeCoinSessionAPI() {
     })
   }
 
+  function retryLikerPlusPayment() {
+    return fetch.value(`/plus/retry`, { method: 'POST' })
+  }
+
   return {
     createNFTBookPurchase,
     createNFTBookCartPurchase,
@@ -483,5 +487,6 @@ export function useLikeCoinSessionAPI() {
     sendCollectorMessage,
     fetchClaimableFreeBooks,
     claimFreeBook,
+    retryLikerPlusPayment,
   }
 }

i18n/locales/en.json

@@ -105,8 +105,10 @@
   "account_page_subscription": "Membership",
   "account_page_subscription_expired": "Expired",
   "account_page_subscription_free": "Free",
+  "account_page_subscription_past_due": "Payment Failed",
   "account_page_subscription_plus": "Plus",
   "account_page_title": "Account",
+  "account_page_update_payment": "Update Payment",
   "account_page_update_settings_error": "Unable to update account settings.",
   "account_page_upgrade_to_plus": "Upgrade to Plus",
   "account_page_view_about": "About 3ook.com",

i18n/locales/zh-Hant.json

@@ -105,8 +105,10 @@
   "account_page_subscription": "會員",
   "account_page_subscription_expired": "已過期",
   "account_page_subscription_free": "免費",
+  "account_page_subscription_past_due": "付款失敗",
   "account_page_subscription_plus": "Plus",
   "account_page_title": "帳戶",
+  "account_page_update_payment": "更新付款方式",
   "account_page_update_settings_error": "未能更新帳戶設定。",
   "account_page_upgrade_to_plus": "升級至 Plus",
   "account_page_view_about": "關於 3ook.com",

pages/account/index.vue

@@ -19,7 +19,7 @@
             #right
           >
             <UButton
-              :label="user?.isLikerPlus ? $t('account_page_manage_subscription') : $t('account_page_renew_subscription')"
+              :label="likerPlusButtonLabel"
               :variant="user?.isLikerPlus ? 'outline' : 'solid'"
               color="primary"
               :loading="isOpeningBillingPortal"
@@ -617,18 +617,31 @@ const publishBookURL = computed(() => {
   return `${config.public.publishBookEndpoint}?utm_source=3ookcom&utm_medium=referral&utm_campaign=3ookcom_account`
 })
 
+const isPaymentPastDue = computed(() =>
+  !!user.value?.isExpiredLikerPlus && user.value?.likerPlusSubscriptionStatus === 'past_due',
+)
+
 const subscriptionStateLabel = computed(() => {
   if (!user.value) return undefined
   if (user.value.isLikerPlus) {
     // TODO: Support Trial
     return $t('account_page_subscription_plus')
   }
   if (user.value.isExpiredLikerPlus) {
+    if (isPaymentPastDue.value) {
+      return $t('account_page_subscription_past_due')
+    }
     return $t('account_page_subscription_expired')
   }
   return $t('account_page_subscription_free')
 })
 
+const likerPlusButtonLabel = computed(() => {
+  if (user.value?.isLikerPlus) return $t('account_page_manage_subscription')
+  if (isPaymentPastDue.value) return $t('account_page_update_payment')
+  return $t('account_page_renew_subscription')
+})
+
 const likeWalletButtonTo = computed(() => {
   if (!user.value?.likeWallet) return undefined
   return `${config.public.likerLandSiteURL}/${locale.value}/${user.value.likeWallet}?tab=collected`
@@ -665,11 +678,10 @@ const isOpeningBillingPortal = ref(false)
 async function handleLikerPlusButtonClick() {
   useLogEvent('account_liker_plus_button_click')
 
-  if (!user.value?.isLikerPlus && !user.value?.isExpiredLikerPlus) {
+  if (!user.value?.isLikerPlus && !isPaymentPastDue.value) {
     await navigateTo(localeRoute({ name: 'member' }))
     return
   }
-
   if (isOpeningBillingPortal.value) return
   try {
     isOpeningBillingPortal.value = true
@@ -680,6 +692,18 @@ async function handleLikerPlusButtonClick() {
     do {
       await sleep(3000)
     } while (!isWindowFocused.value)
+
+    await accountStore.refreshSessionInfo()
+
+    if (isPaymentPastDue.value) {
+      try {
+        await likeCoinSessionAPI.retryLikerPlusPayment()
+      }
+      catch (retryError) {
+        console.warn('Payment retry after portal return:', retryError)
+      }
+    }
+
     isOpeningBillingPortal.value = false
   }
   catch (error) {

server/api/account/refresh.post.ts

@@ -35,6 +35,7 @@ export default defineEventHandler(async (event) => {
       isLikerPlus: userInfoRes.isLikerPlus || false,
       isExpiredLikerPlus: userInfoRes.isExpiredLikerPlus || false,
       likerPlusPeriod: userInfoRes.likerPlusPeriod,
+      likerPlusSubscriptionStatus: userInfoRes.likerPlusSubscriptionStatus,
     },
   })
 

server/api/login.post.ts

@@ -73,6 +73,7 @@ export default defineEventHandler(async (event) => {
     isExpiredLikerPlus: userInfoRes.isExpiredLikerPlus || false,
     likerPlusPeriod: userInfoRes.likerPlusPeriod,
     ttsKey: randomBytes(16).toString('hex'),
+    likerPlusSubscriptionStatus: userInfoRes.likerPlusSubscriptionStatus,
   }
   await setUserSession(event, { user: userInfo })
 

server/api/register.post.ts

@@ -72,6 +72,7 @@ export default defineEventHandler(async (event) => {
     isLikerPlus: userInfoRes.isLikerPlus || false,
     isExpiredLikerPlus: userInfoRes.isExpiredLikerPlus || false,
     ttsKey: randomBytes(16).toString('hex'),
+    likerPlusSubscriptionStatus: userInfoRes.likerPlusSubscriptionStatus,
   }
   await setUserSession(event, { user: userInfo })
 

shared/types/api.d.ts

@@ -8,6 +8,7 @@ export interface LikerInfoResponseData {
   description: string
   isLikerPlus?: boolean
   isExpiredLikerPlus?: boolean
+  likerPlusSubscriptionStatus?: 'active' | 'past_due' | 'canceled'
 }
 
 export interface LikerProfileResponseData extends LikerInfoResponseData {

types/nuxt-auth-utils.d.ts

@@ -15,6 +15,7 @@ declare module '#auth-utils' {
     isExpiredLikerPlus?: boolean
     likerPlusPeriod?: LikerPlusStatus
     ttsKey?: string
+    likerPlusSubscriptionStatus?: 'active' | 'past_due' | 'canceled'
   }
 }