chore: optimize billing card for the case of no any plan

messages/en.json

@@ -481,7 +481,8 @@
         },
         "currentPlan": {
           "title": "Current Plan",
-          "description": "Your current plan details"
+          "description": "Your current plan details",
+          "noPlan": "You have no active plan"
         },
         "CustomerPortalButton": {
           "loading": "Loading...",

messages/zh.json

@@ -482,7 +482,8 @@
         },
         "currentPlan": {
           "title": "当前方案",
-          "description": "您当前的方案详情"
+          "description": "您当前的方案详情",
+          "noPlan": "您没有激活的方案"
         },
         "CustomerPortalButton": {
           "loading": "加载中...",
@@ -495,6 +496,7 @@
         "lifetimeMessage": "您拥有所有高级功能的终身使用权限",
         "manageSubscription": "管理订阅和账单",
         "manageBilling": "管理账单",
+        "upgradePlan": "升级方案",
         "retry": "重试",
         "errorMessage": "获取数据失败"
       },

src/actions/create-checkout-session.ts

@@ -8,6 +8,7 @@ import { CreateCheckoutParams } from "@/payment/types";
 import { getLocale } from "next-intl/server";
 import { createSafeActionClient } from 'next-safe-action';
 import { z } from 'zod';
+import { Routes } from "@/routes";
 
 // Create a safe action client
 const actionClient = createSafeActionClient();
@@ -69,7 +70,7 @@ export const createCheckoutAction = actionClient
 
       // Create the checkout session with localized URLs
       const successUrl = getUrlWithLocale('/settings/billing?session_id={CHECKOUT_SESSION_ID}', locale);
-      const cancelUrl = getUrlWithLocale('/pricing', locale);
+      const cancelUrl = getUrlWithLocale(Routes.Pricing, locale);
       const params: CreateCheckoutParams = {
         planId,
         priceId,

src/components/settings/billing/billing-card.tsx

@@ -12,6 +12,7 @@ import { authClient } from '@/lib/auth-client';
 import { formatDate, formatPrice } from '@/lib/formatter';
 import { cn } from '@/lib/utils';
 import { PlanIntervals } from '@/payment/types';
+import { Routes } from '@/routes';
 import { RefreshCwIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
@@ -25,6 +26,37 @@ export default function BillingCard() {
     currentPlan: currentPlanFromStore,
     refetch
   } = usePayment();
+
+  // currentPlanFromStore maybe null, so we need to check if it is null
+  if (!currentPlanFromStore) {
+    return (
+      <div className="grid gap-8 md:grid-cols-2">
+        <Card className={cn("w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col")}>
+          <CardHeader>
+            <CardTitle>{t('currentPlan.title')}</CardTitle>
+            <CardDescription>{t('currentPlan.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="text-sm text-muted-foreground">
+              {t('currentPlan.noPlan')}
+            </div>
+          </CardContent>
+          <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-muted rounded-none">
+            <Button
+              variant="default"
+              className="cursor-pointer"
+              asChild
+            >
+              <LocaleLink href={Routes.Pricing}>
+                {t('upgradePlan')}
+              </LocaleLink>
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+    );
+  }
+
   // Get price plans with translations
   const pricePlans = getPricePlans();
   const plans = Object.values(pricePlans);
@@ -179,7 +211,7 @@ export default function BillingCard() {
               className="cursor-pointer"
               asChild
             >
-              <LocaleLink href="/pricing">
+              <LocaleLink href={Routes.Pricing}>
                 {t('upgradePlan')}
               </LocaleLink>
             </Button>