/
subscriptions.tsx
103 lines (90 loc) · 3.38 KB
/
subscriptions.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { type SubscriptionStatusType } from "@/types/types";
import { cn, isValidSubscription } from "@/lib/utils";
import { db, plans, type NewSubscription } from "@/db/schema";
import { getUserSubscriptions } from "@/app/actions";
import { Section } from "../../section";
import { ChangePlan } from "../plans/change-plan-button";
import { SubscriptionActions } from "./actions";
import { SubscriptionDate } from "./date";
import { SubscriptionPrice } from "./price";
import { SubscriptionStatus } from "./status";
export async function Subscriptions() {
const userSubscriptions = await getUserSubscriptions();
const allPlans = await db.select().from(plans);
if (userSubscriptions.length === 0) {
return (
<p className="not-prose mb-2">
It appears that you do not have any subscriptions. Please sign up for a
plan below.
</p>
);
}
// Show active subscriptions first, then paused, then canceled
const sortedSubscriptions = userSubscriptions.sort((a, b) => {
if (a.status === "active" && b.status !== "active") {
return -1;
}
if (a.status === "paused" && b.status === "cancelled") {
return -1;
}
return 0;
});
return (
<Section className="not-prose relative">
{sortedSubscriptions.map(
(subscription: NewSubscription, index: number) => {
const plan = allPlans.find((p) => p.id === subscription.planId);
const status = subscription.status as SubscriptionStatusType;
if (!plan) {
throw new Error("Plan not found");
}
return (
<Section.Item
key={index}
className="flex-col items-stretch justify-center gap-2"
>
<header className="flex items-center justify-between gap-3">
<div className="flex min-h-8 flex-wrap items-center gap-x-3 gap-y-1">
<h2
className={cn(
"text-lg text-surface-900",
!isValidSubscription(status) && "text-inherit",
)}
>
{plan.productName} ({plan.name})
</h2>
</div>
<div className="flex items-center gap-2">
{isValidSubscription(status) && (
<ChangePlan planId={subscription.planId} />
)}
<SubscriptionActions subscription={subscription} />
</div>
</header>
<div className="flex flex-wrap items-center gap-2">
<SubscriptionPrice
endsAt={subscription.endsAt}
interval={plan.interval}
intervalCount={plan.intervalCount}
price={subscription.price}
isUsageBased={plan.isUsageBased ?? false}
/>
<SubscriptionStatus
status={status}
statusFormatted={subscription.statusFormatted}
isPaused={Boolean(subscription.isPaused)}
/>
<SubscriptionDate
endsAt={subscription.endsAt}
renewsAt={subscription.renewsAt}
status={status}
trialEndsAt={subscription.trialEndsAt}
/>
</div>
</Section.Item>
);
},
)}
</Section>
);
}