refactor: components

Author: G3root

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

@@ -1,5 +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";
 import type { Metadata } from "next";
@@ -15,8 +14,7 @@ const BillingPage = async () => {
 
   return (
     <PageLayout title="Billing" description="manage your billing">
-      <PlanDetails subscription={subscription} />
-      <Pricing products={products} subscription={subscription} />
+      <PlanDetails products={products} subscription={subscription} />
     </PageLayout>
   );
 };

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

@@ -1,36 +1,36 @@
 import { dayjsExt } from "@/common/dayjs";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { badgeVariants } from "@/components/ui/badge";
+import { PricingModal, type PricingModalProps } from "../pricing-modal";
 
-import type { RouterOutputs } from "@/trpc/shared";
+interface PlanDetailsProps extends PricingModalProps {}
 
-type TSubscription =
-  RouterOutputs["billing"]["getSubscription"]["subscription"];
-
-interface PlanDetailsProps {
-  subscription: TSubscription;
-}
-
-export function PlanDetails({ subscription }: PlanDetailsProps) {
+export function PlanDetails({ subscription, products }: 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>
+          <div className="flex flex-col gap-y-3">
+            <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>
+
+            <div className="flex items-center justify-center">
+              <PricingModal subscription={subscription} products={products} />
+            </div>
+          </div>
         </AlertDescription>
       </Alert>
     </div>

src/components/billing/pricing/empty-plans.tsx renamed to src/components/billing/pricing-modal/empty-plans.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { getStripeClient } from "@/client-only/stripe";
+import Modal, { type ModalProps } from "@/components/common/modal";
+import { Button } from "@/components/ui/button";
 import type { PricingPlanInterval, PricingType } from "@/prisma/enums";
 import { api } from "@/trpc/react";
 import type { RouterOutputs } from "@/trpc/shared";
@@ -136,3 +138,17 @@ export function Pricing({ products, subscription }: PricingProps) {
     <EmptyPlans />
   );
 }
+
+export type PricingModalProps = PricingProps;
+
+export function PricingModal({ products, subscription }: PricingModalProps) {
+  return (
+    <Modal
+      title="Upgrade or manage plans"
+      trigger={<Button variant="secondary">Upgrade or Manage plan</Button>}
+      size="screen"
+    >
+      <Pricing products={products} subscription={subscription} />
+    </Modal>
+  );
+}