feat: add plan details component

Author: G3root

src/app/(authenticated)/(dashboard)/[publicId]/settings/billing/page.tsx

@@ -1,3 +1,4 @@
+import { PlanDetails } from "@/components/billing/plan-details";
 import { Pricing } from "@/components/billing/pricing";
 import { PageLayout } from "@/components/dashboard/page-layout";
 import { api } from "@/trpc/server";
@@ -14,6 +15,7 @@ const BillingPage = async () => {
 
   return (
     <PageLayout title="Billing" description="manage your billing">
+      <PlanDetails subscription={subscription} />
       <Pricing products={products} subscription={subscription} />
     </PageLayout>
   );

src/components/billing/plan-details/index.tsx

@@ -0,0 +1,38 @@
+import { dayjsExt } from "@/common/dayjs";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { badgeVariants } from "@/components/ui/badge";
+
+import type { RouterOutputs } from "@/trpc/shared";
+
+type TSubscription =
+  RouterOutputs["billing"]["getSubscription"]["subscription"];
+
+interface PlanDetailsProps {
+  subscription: TSubscription;
+}
+
+export function PlanDetails({ subscription }: PlanDetailsProps) {
+  return (
+    <div>
+      <Alert>
+        <AlertTitle>Plan Details</AlertTitle>
+        <AlertDescription>
+          <p>
+            You are currently on the{" "}
+            <span className={badgeVariants()}>
+              {subscription ? subscription.price.product.name : "Free"}
+            </span>{" "}
+            plan.{" "}
+            {subscription ? (
+              <>
+                Current billing cycle:{" "}
+                {dayjsExt(subscription?.currentPeriodStart).format("ll")} -{" "}
+                {dayjsExt(subscription?.currentPeriodEnd).format("ll")}
+              </>
+            ) : null}
+          </p>
+        </AlertDescription>
+      </Alert>
+    </div>
+  );
+}