feat: add a note for testing subscriptions

app/(dashboard)/dashboard/billing/loading.tsx

@@ -11,6 +11,7 @@ export default function DashboardBillingLoading() {
       />
       <div className="grid gap-10">
         <Card.Skeleton />
+        <Card.Skeleton />
       </div>
     </DashboardShell>
   )

app/(dashboard)/dashboard/billing/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation"
 import { getCurrentUser } from "@/lib/session"
 import { authOptions } from "@/lib/auth"
 import { getUserSubscriptionPlan as getUserSubscriptionPlan } from "@/lib/subscription"
+import { Card } from "@/ui/card"
 import { DashboardHeader } from "@/components/dashboard/header"
 import { DashboardShell } from "@/components/dashboard/shell"
 import { BillingForm } from "@/components/dashboard/billing-form"
@@ -24,6 +25,31 @@ export default async function BillingPage() {
       />
       <div className="grid gap-10">
         <BillingForm subscriptionPlan={subscriptionPlan} />
+        <Card>
+          <Card.Header>
+            <Card.Title>Note</Card.Title>
+          </Card.Header>
+          <Card.Content className="space-y-4 pb-6 text-sm">
+            <p>
+              Taxonomy app is a demo app using a Stripe test environment.{" "}
+              <strong>
+                You can test the upgrade and won&apos;t be charged.
+              </strong>
+            </p>
+            <p>
+              You can find a list of test card numbers on the{" "}
+              <a
+                href="https://stripe.com/docs/testing#cards"
+                target="_blank"
+                rel="noreferrer"
+                className="font-medium underline underline-offset-8"
+              >
+                Stripe docs
+              </a>
+              .
+            </p>
+          </Card.Content>
+        </Card>
       </div>
     </DashboardShell>
   )