The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
fix trailing subscription state
+28
-6
+28
-6
app/profile/billing/page.tsx
+28
-6
app/profile/billing/page.tsx
···
16
16
import Modal from "@/components/modal";
17
17
import Notice from "@/components/notice";
18
18
import { OverviewLink } from "@/components/overview-link";
19
+
import { Badge } from "@/components/ui/badge";
19
20
import { Button } from "@/components/ui/button";
20
21
import { Separator } from "@/components/ui/separator";
21
22
import { Skeleton } from "@/components/ui/skeleton";
···
28
29
29
30
const { data, isLoading, error, edit } = useApi<ApiV1UsersMeBillingGetResponse>("/users/@me/billing");
30
31
31
-
if ((isLoading && !user?.premium) || (!isLoading && !data) || (data && data.status !== "active")) {
32
+
if ((isLoading && !user?.premium) || (!isLoading && !data) || (data && data.status !== "active" && data.status !== "trialing")) {
32
33
return (<>
33
34
{(error && error !== "Not Found") && <Notice message={error} />}
34
35
···
52
53
</>);
53
54
}
54
55
56
+
const trialEndsInDays = data?.status === "trialing"
57
+
? Math.floor(((data?.currentPeriodEnd - Date.now() / 1000) / (60 * 60 * 24)))
58
+
: 0;
59
+
55
60
return (
56
61
<div className="space-y-2">
57
62
<Box
···
59
64
small
60
65
>
61
66
<div className="flex flex-col">
62
-
<h2 className="font-bold text-3xl bg-gradient-to-r bg-clip-text text-transparent from-violet-400/80 to-indigo-400/80">Wamellow Premium</h2>
67
+
<h2 className="font-bold text-3xl bg-gradient-to-r bg-clip-text text-transparent from-violet-400/80 to-indigo-400/80">
68
+
Wamellow Premium
69
+
{data?.status === "trialing" && (
70
+
<Badge
71
+
className="relative bottom-1 ml-2"
72
+
>
73
+
trial — Ends {trialEndsInDays > 1 ? "in " : ""}{trialEndsInDays === 0 ? "Today" : trialEndsInDays === 1 ? "Tomorrow" : trialEndsInDays} {trialEndsInDays > 1 ? "days" : ""}
74
+
</Badge>
75
+
)}
76
+
</h2>
63
77
<p className="text-muted-foreground">You have all premium features for <span className="font-semibold text-neutral-300">EUR {(4 + (data?.donationQuantity || 0)).toFixed(2)} / {data?.priceId.startsWith("monthly_") ? "Month" : "Year"}</span>!</p>
64
78
</div>
65
79
<div className="flex gap-1 mt-4 md:mt-0">
···
83
97
Your subscription will expire on <span className="font-semibold text-neutral-300">{new Date(data!.currentPeriodEnd * 1000).toLocaleDateString()}</span> and you will not be charged again.
84
98
</p>
85
99
: <p>
86
-
Your subscription will be automatically renewed on <span className="font-semibold text-neutral-300">{new Date(data!.currentPeriodEnd * 1000).toLocaleDateString()}</span> and you{"'"}ll be charged <span className="font-semibold text-neutral-300">EUR {(4 + (data!.donationQuantity || 0)).toFixed(2)}</span>.
100
+
Your subscription will renew on <span className="font-semibold text-neutral-300">{new Date(data!.currentPeriodEnd * 1000).toLocaleDateString()}</span>, for a total of <span className="font-semibold text-neutral-300">EUR {(4 + (data!.donationQuantity || 0)).toFixed(2)}</span>.
87
101
88
-
You{"'"}re paying <span className="font-semibold text-neutral-300">EUR {(4).toFixed(2)} — Premium</span> and <span className="font-semibold text-neutral-300">EUR {(data!.donationQuantity || 0).toFixed(2)} — Donation{data!.donationQuantity ? "s" : ""}</span>
102
+
You{"'"}re paying <span className="font-semibold text-neutral-300">EUR {(4).toFixed(2)} Premium</span> and <span className="font-semibold text-neutral-300">EUR {(data!.donationQuantity || 0).toFixed(2)} Donation{data!.donationQuantity ? "s" : ""}</span>
89
103
{" "}
90
104
(<Button
91
105
className="text-sm p-0 m-0 h-3 text-violet-400"
···
136
150
open={changeDonationModalOpen}
137
151
setOpen={setChangeDonationModalOpen}
138
152
donationQuantity={data?.donationQuantity || 0}
153
+
trialing={data.status === "trialing"}
139
154
edit={edit}
140
155
/>
141
156
)}
···
235
250
open,
236
251
setOpen,
237
252
donationQuantity: defaultDonationQuantity,
253
+
trialing,
238
254
edit
239
255
}: {
240
256
open: boolean;
241
257
setOpen: (open: boolean) => void;
242
258
donationQuantity: number;
259
+
trialing: boolean;
243
260
edit: ApiEdit<ApiV1UsersMeBillingGetResponse>;
244
261
}) {
245
262
const [donation, setDonation] = useState(defaultDonationQuantity);
···
294
311
<div className="flex justify-between items-center mb-4">
295
312
<div>
296
313
<h2 className="text-lg font-medium text-neutral-100">Due Today</h2>
297
-
<p className="text-sm text-neutral-500">You{"'"}ll recieve an invoice via email.</p>
314
+
<p className="text-sm text-neutral-500">
315
+
{trialing
316
+
? "Due to your active trial, you will not be charged today."
317
+
: "You will receive an invoice via email."
318
+
}
319
+
</p>
298
320
</div>
299
321
300
-
<span className="text-xl font-medium text-neutral-100">€{dueToday.toFixed(2)}</span>
322
+
<span className="text-xl font-medium text-neutral-100">€{trialing ? 0 : dueToday.toFixed(2)}</span>
301
323
</div>
302
324
)}
303
325