From eb5a25820c21632cf02e010736ed102e2d57cd9f Mon Sep 17 00:00:00 2001
From: shadcn <arshad@chummun.com>
Date: Mon, 21 Nov 2022 12:53:05 +0400
Subject: [PATCH] feat: add a note for testing subscriptions

---
 app/(dashboard)/dashboard/billing/loading.tsx |  1 +
 app/(dashboard)/dashboard/billing/page.tsx    | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/app/(dashboard)/dashboard/billing/loading.tsx b/app/(dashboard)/dashboard/billing/loading.tsx
index fdda505..2019484 100644
--- a/app/(dashboard)/dashboard/billing/loading.tsx
+++ b/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>
   )
diff --git a/app/(dashboard)/dashboard/billing/page.tsx b/app/(dashboard)/dashboard/billing/page.tsx
index afd188b..795244b 100644
--- a/app/(dashboard)/dashboard/billing/page.tsx
+++ b/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>
   )