mirror of
https://github.com/lukevella/rallly.git
synced 2025-04-28 17:56:37 +02:00
✨ Update billing page (#1578)
This commit is contained in:
Luke Vella
GitHub
parent
34f5555791
commit
b3aafb5af6
12 changed files with 766 additions and 493 deletions
|
|
@ -129,23 +129,6 @@
|
|||
"goToInvite": "Go to Invite Page",
|
||||
"planPro": "Pro",
|
||||
"Billing": "Billing",
|
||||
"subscriptionUpdatePayment": "Update Payment Details",
|
||||
"subscriptionCancel": "Cancel Subscription",
|
||||
"billingStatus": "Billing Status",
|
||||
"billingStatusDescription": "Manage your subscription and billing details",
|
||||
"freeForever": "free forever",
|
||||
"billingStatusState": "Status",
|
||||
"billingStatusActive": "Active",
|
||||
"billingStatusPaused": "Paused",
|
||||
"billingStatusDeleted": "Cancelled",
|
||||
"endDate": "End date",
|
||||
"dueDate": "Next payment due",
|
||||
"billingStatusPlan": "Plan",
|
||||
"billingPeriod": "Period",
|
||||
"billingPeriodMonthly": "Monthly",
|
||||
"billingPeriodYearly": "Yearly",
|
||||
"monthlyBillingDescription": "per month",
|
||||
"plan_extendedPollLife": "Keep polls indefinitely",
|
||||
"becomeATranslator": "Help translate",
|
||||
"noPolls": "No polls",
|
||||
"noPollsDescription": "Get started by creating a new poll.",
|
||||
|
|
@ -173,20 +156,10 @@
|
|||
"scrollRight": "Scroll Right",
|
||||
"shrink": "Shrink",
|
||||
"expand": "Expand",
|
||||
"activeSubscription": "Thank you for subscribing to Rallly Pro. You can manage your subscription and billing details from the billing portal.",
|
||||
"billingPortal": "Billing Portal",
|
||||
"supportDescription": "Need help with anything?",
|
||||
"supportBilling": "Please reach out if you need any assistance.",
|
||||
"contactSupport": "Contact Support",
|
||||
"planFreeDescription": "For casual users",
|
||||
"currentPlan": "Current Plan",
|
||||
"limitedAccess": "Access to core features",
|
||||
"pollsDeleted": "Polls are automatically deleted once they become inactive",
|
||||
"planProDescription": "For power users and professionals",
|
||||
"accessAllFeatures": "Access all features",
|
||||
"earlyAccess": "Get early access to new features",
|
||||
"earlyAdopterDescription": "As an early adopter, you'll lock in your subscription rate and won't be affected by future price increases.",
|
||||
"upgradeNowSaveLater": "Upgrade now, save later",
|
||||
"pricing": "Pricing",
|
||||
"pollSettingsDescription": "Customize the behaviour of your poll",
|
||||
"requireParticipantEmailLabel": "Make email address required for participants",
|
||||
|
|
@ -236,7 +209,6 @@
|
|||
"pastEventsEmptyStateDescription": "When you schedule events, they will appear here.",
|
||||
"activePollCount": "{{activePollCount}} Live",
|
||||
"createPoll": "Create poll",
|
||||
"yearlyBillingDescription": "per year",
|
||||
"addToCalendar": "Add to Calendar",
|
||||
"microsoft365": "Microsoft 365",
|
||||
"outlook": "Outlook",
|
||||
|
|
@ -247,7 +219,6 @@
|
|||
"timeZoneChangeDetectorMessage": "Your timezone has changed to <b>{currentTimeZone}</b>. Do you want to update your preferences?",
|
||||
"yesUpdateTimezone": "Yes, update my timezone",
|
||||
"noKeepCurrentTimezone": "No, keep the current timezone",
|
||||
"annualBenefit": "{count} months free",
|
||||
"removeAvatar": "Remove",
|
||||
"uploadProfilePicture": "Upload",
|
||||
"profilePictureDescription": "Up to 2MB, JPG or PNG",
|
||||
|
|
@ -304,5 +275,33 @@
|
|||
"createAccount": "Create Account",
|
||||
"tooManyRequests": "Too many requests",
|
||||
"tooManyRequestsDescription": "Please try again later.",
|
||||
"loginMagicLinkError": "This link is invalid or expired. Please request a new link."
|
||||
"loginMagicLinkError": "This link is invalid or expired. Please request a new link.",
|
||||
"subscriptionPriceMonthly": "{{price}} per month",
|
||||
"subscriptionPriceYearly": "{{price}} per year",
|
||||
"billingSubscriptionTitle": "Subscription",
|
||||
"billingSubscriptionDescription": "View and manage your current subscription plan",
|
||||
"billingSubscriptionNotActive": "You are not currently subscribed to a plan.",
|
||||
"billingSubscriptionUpgradeToProDescription": "Upgrade to Pro to get access to all features and benefits.",
|
||||
"billingSubscriptionUpgradeToPro": "Upgrade to Pro",
|
||||
"subscriptionStatusActive": "Active",
|
||||
"subscriptionStatusTrialing": "Trialing",
|
||||
"subscriptionStatusPastDue": "Past due",
|
||||
"subscriptionStatusCanceled": "Canceled",
|
||||
"subscriptionStatusUnpaid": "Unpaid",
|
||||
"subscriptionStatusUnknown": "Unknown",
|
||||
"paymentMethodUnknown": "Unknown",
|
||||
"subscriptionCancelOn": "Cancels {date}",
|
||||
"subscriptionStatusPaused": "Paused",
|
||||
"subscriptionStatusIncomplete": "Incomplete",
|
||||
"subscriptionStatusIncompleteExpired": "Incomplete expired",
|
||||
"billingSubscriptionPlan": "Plan",
|
||||
"billingSubscriptionPrice": "Price",
|
||||
"billingSubscriptionNextPaymentDue": "Next Payment Due",
|
||||
"billingPaymentMethod": "Payment Method",
|
||||
"noPaymentMethodSet": "No Payment Method Set",
|
||||
"addPaymentMethodDescription": "Please add a payment method to ensure uninterrupted service for your subscription.",
|
||||
"addPaymentMethod": "Add Payment Method",
|
||||
"needToMakeChanges": "Need to make changes?",
|
||||
"billingPortalDescription": "Visit the billing portal to manage your subscription, update payment methods, or view billing history.",
|
||||
"priceFree": "Free"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,273 +0,0 @@
|
|||
"use client";
|
||||
import { Button } from "@rallly/ui/button";
|
||||
import { Card } from "@rallly/ui/card";
|
||||
import { Label } from "@rallly/ui/label";
|
||||
import dayjs from "dayjs";
|
||||
import { ArrowUpRight, CreditCardIcon, SendIcon } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import Script from "next/script";
|
||||
|
||||
import {
|
||||
Settings,
|
||||
SettingsContent,
|
||||
SettingsSection,
|
||||
} from "@/components/settings/settings";
|
||||
import { Trans } from "@/components/trans";
|
||||
import { useSubscription } from "@/contexts/plan";
|
||||
import { trpc } from "@/trpc/client";
|
||||
|
||||
import type { PricingData } from "./billing-plans";
|
||||
import { BillingPlans } from "./billing-plans";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
Paddle: any;
|
||||
}
|
||||
}
|
||||
|
||||
const BillingPortal = () => {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-sm">
|
||||
<Trans
|
||||
i18nKey="activeSubscription"
|
||||
defaults="Thank you for subscribing to Rallly Pro. You can manage your subscription and billing details from the billing portal."
|
||||
/>
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<Button asChild>
|
||||
<Link
|
||||
href={`/api/stripe/portal?return_path=${encodeURIComponent(
|
||||
window.location.pathname,
|
||||
)}`}
|
||||
>
|
||||
<CreditCardIcon className="size-4" />
|
||||
<span>
|
||||
<Trans i18nKey="billingPortal" defaults="Billing Portal" />
|
||||
</span>
|
||||
<ArrowUpRight className="size-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const proPlanIdMonthly = process.env.NEXT_PUBLIC_PRO_PLAN_ID_MONTHLY as string;
|
||||
|
||||
const SubscriptionStatus = ({ pricingData }: { pricingData: PricingData }) => {
|
||||
const data = useSubscription();
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{!data.active ? (
|
||||
<BillingPlans pricingData={pricingData} />
|
||||
) : data.legacy ? (
|
||||
<LegacyBilling />
|
||||
) : (
|
||||
<SettingsSection
|
||||
title={<Trans i18nKey="billingStatus" defaults="Billing Status" />}
|
||||
description={
|
||||
<Trans
|
||||
i18nKey="billingStatusDescription"
|
||||
defaults="Manage your subscription and billing details."
|
||||
/>
|
||||
}
|
||||
>
|
||||
<BillingPortal />
|
||||
</SettingsSection>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LegacyBilling = () => {
|
||||
const { data: userPaymentData } = trpc.user.getBilling.useQuery();
|
||||
|
||||
if (!userPaymentData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { status, endDate, planId } = userPaymentData;
|
||||
|
||||
if (status === "trialing" || status === "past_due") {
|
||||
return <p>Invalid billing status</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID ? (
|
||||
<Script
|
||||
src="https://cdn.paddle.com/paddle/paddle.js"
|
||||
onLoad={() => {
|
||||
if (process.env.NEXT_PUBLIC_PADDLE_SANDBOX === "true") {
|
||||
window.Paddle.Environment.set("sandbox");
|
||||
}
|
||||
window.Paddle.Setup({
|
||||
vendor: Number(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<Card>
|
||||
<div className="grid gap-4 p-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<Label>
|
||||
<Trans i18nKey="billingStatusState" defaults="Status" />
|
||||
</Label>
|
||||
<div>
|
||||
{(() => {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return (
|
||||
<Trans i18nKey="billingStatusActive" defaults="Active" />
|
||||
);
|
||||
case "paused":
|
||||
return (
|
||||
<Trans i18nKey="billingStatusPaused" defaults="Paused" />
|
||||
);
|
||||
case "deleted":
|
||||
return (
|
||||
<Trans
|
||||
i18nKey="billingStatusDeleted"
|
||||
defaults="Cancelled"
|
||||
/>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{status === "deleted" ? (
|
||||
<Label>
|
||||
<Trans i18nKey="endDate" defaults="End date" />
|
||||
</Label>
|
||||
) : (
|
||||
<Label>
|
||||
<Trans i18nKey="dueDate" defaults="Due date" />
|
||||
</Label>
|
||||
)}
|
||||
<div>{dayjs(endDate).format("LL")}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label>
|
||||
<Trans i18nKey="billingStatusPlan" defaults="Plan" />
|
||||
</Label>
|
||||
<div>
|
||||
<Trans i18nKey="planPro" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label>
|
||||
<Trans i18nKey="billingPeriod" defaults="Period" />
|
||||
</Label>
|
||||
<div>
|
||||
{planId === proPlanIdMonthly ? (
|
||||
<Trans i18nKey="billingPeriodMonthly" defaults="Monthly" />
|
||||
) : (
|
||||
<Trans i18nKey="billingPeriodYearly" defaults="Yearly" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{status === "active" || status === "paused" ? (
|
||||
<div className="flex items-center gap-x-2 border-t bg-gray-50 p-3">
|
||||
<Button
|
||||
asChild
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.Paddle.Checkout.open({
|
||||
override: userPaymentData.updateUrl,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Link href={userPaymentData.updateUrl}>
|
||||
<CreditCardIcon className="size-4" />
|
||||
<Trans
|
||||
i18nKey="subscriptionUpdatePayment"
|
||||
defaults="Update Payment Details"
|
||||
/>
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
variant="destructive"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.Paddle.Checkout.open({
|
||||
override: userPaymentData.cancelUrl,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Link href={userPaymentData.cancelUrl}>
|
||||
<Trans i18nKey="subscriptionCancel" defaults="Cancel" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
<SettingsSection
|
||||
title={<Trans i18nKey="support" defaults="Support" />}
|
||||
description={
|
||||
<Trans i18nKey="supportDescription" defaults="Need help with anything?" />
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<p className="text-sm">
|
||||
<Trans
|
||||
i18nKey="supportBilling"
|
||||
defaults="Please reach out if you need any assistance."
|
||||
/>
|
||||
</p>
|
||||
<Button asChild>
|
||||
<Link href="mailto:support@rallly.co">
|
||||
<SendIcon className="size-4" />
|
||||
<Trans i18nKey="contactSupport" defaults="Contact Support" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</SettingsSection>;
|
||||
|
||||
export function BillingPage({ pricingData }: { pricingData: PricingData }) {
|
||||
return (
|
||||
<Settings>
|
||||
<SettingsContent>
|
||||
<SubscriptionStatus pricingData={pricingData} />
|
||||
<hr />
|
||||
<SettingsSection
|
||||
title={<Trans i18nKey="support" defaults="Support" />}
|
||||
description={
|
||||
<Trans
|
||||
i18nKey="supportDescription"
|
||||
defaults="Need help with anything?"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<p className="text-sm">
|
||||
<Trans
|
||||
i18nKey="supportBilling"
|
||||
defaults="Please reach out if you need any assistance."
|
||||
/>
|
||||
</p>
|
||||
<Button asChild>
|
||||
<Link href="mailto:support@rallly.co">
|
||||
<SendIcon className="size-4" />
|
||||
<Trans i18nKey="contactSupport" defaults="Contact Support" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</SettingsContent>
|
||||
</Settings>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,176 +0,0 @@
|
|||
import { Badge } from "@rallly/ui/badge";
|
||||
import {
|
||||
BillingPlan,
|
||||
BillingPlanDescription,
|
||||
BillingPlanHeader,
|
||||
BillingPlanPeriod,
|
||||
BillingPlanPerk,
|
||||
BillingPlanPerks,
|
||||
BillingPlanPrice,
|
||||
BillingPlanTitle,
|
||||
} from "@rallly/ui/billing-plan";
|
||||
import { Button } from "@rallly/ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@rallly/ui/tabs";
|
||||
import { TrendingUpIcon } from "lucide-react";
|
||||
import React from "react";
|
||||
|
||||
import { Trans } from "@/components/trans";
|
||||
import { UpgradeButton } from "@/components/upgrade-button";
|
||||
|
||||
export type PricingData = {
|
||||
monthly: {
|
||||
amount: number;
|
||||
currency: string;
|
||||
};
|
||||
yearly: {
|
||||
amount: number;
|
||||
currency: string;
|
||||
};
|
||||
};
|
||||
|
||||
export const BillingPlans = ({ pricingData }: { pricingData: PricingData }) => {
|
||||
const [tab, setTab] = React.useState("yearly");
|
||||
|
||||
return (
|
||||
<Tabs value={tab} onValueChange={setTab}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<TabsList>
|
||||
<TabsTrigger value="monthly">
|
||||
<Trans i18nKey="billingPeriodMonthly" />
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="yearly" className="inline-flex gap-x-2.5">
|
||||
<Trans i18nKey="billingPeriodYearly" />
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
<div className="grid gap-4 rounded-md md:grid-cols-2">
|
||||
<BillingPlan>
|
||||
<BillingPlanHeader>
|
||||
<BillingPlanTitle>
|
||||
<Trans i18nKey="planFree" />
|
||||
</BillingPlanTitle>
|
||||
<BillingPlanDescription>
|
||||
<Trans
|
||||
i18nKey="planFreeDescription"
|
||||
defaults="For casual users"
|
||||
/>
|
||||
</BillingPlanDescription>
|
||||
</BillingPlanHeader>
|
||||
<div>
|
||||
<BillingPlanPrice>$0</BillingPlanPrice>
|
||||
<BillingPlanPeriod>
|
||||
<Trans i18nKey="freeForever" />
|
||||
</BillingPlanPeriod>
|
||||
</div>
|
||||
<hr />
|
||||
<Button disabled className="w-full">
|
||||
<Trans i18nKey="currentPlan" defaults="Current Plan" />
|
||||
</Button>
|
||||
<BillingPlanPerks>
|
||||
<BillingPlanPerk>
|
||||
<Trans
|
||||
i18nKey="limitedAccess"
|
||||
defaults="Access to core features"
|
||||
/>
|
||||
</BillingPlanPerk>
|
||||
<BillingPlanPerk>
|
||||
<Trans
|
||||
i18nKey="pollsDeleted"
|
||||
defaults="Polls are automatically deleted once they become inactive"
|
||||
/>
|
||||
</BillingPlanPerk>
|
||||
</BillingPlanPerks>
|
||||
</BillingPlan>
|
||||
<div className="space-y-4 rounded-md border bg-white p-4 shadow-sm">
|
||||
<div>
|
||||
<BillingPlanTitle>
|
||||
<Trans i18nKey="planPro" />
|
||||
</BillingPlanTitle>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
<Trans
|
||||
i18nKey="planProDescription"
|
||||
defaults="For power users and professionals"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<TabsContent value="yearly">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<BillingPlanPrice>
|
||||
${pricingData.yearly.amount / 100}
|
||||
</BillingPlanPrice>
|
||||
<Badge variant="green">
|
||||
<Trans
|
||||
i18nKey="annualBenefit"
|
||||
defaults="{count} months free"
|
||||
values={{
|
||||
count: 4,
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<BillingPlanPeriod>
|
||||
<Trans
|
||||
i18nKey="yearlyBillingDescription"
|
||||
defaults="per year"
|
||||
/>
|
||||
</BillingPlanPeriod>
|
||||
</TabsContent>
|
||||
<TabsContent value="monthly">
|
||||
<BillingPlanPrice>
|
||||
${pricingData.monthly.amount / 100}
|
||||
</BillingPlanPrice>
|
||||
<BillingPlanPeriod>
|
||||
<Trans
|
||||
i18nKey="monthlyBillingDescription"
|
||||
defaults="per month"
|
||||
/>
|
||||
</BillingPlanPeriod>
|
||||
</TabsContent>
|
||||
</div>
|
||||
<hr />
|
||||
<UpgradeButton annual={tab === "yearly"} />
|
||||
<BillingPlanPerks>
|
||||
<BillingPlanPerk pro={true}>
|
||||
<Trans
|
||||
i18nKey="accessAllFeatures"
|
||||
defaults="Access all features"
|
||||
/>
|
||||
</BillingPlanPerk>
|
||||
<BillingPlanPerk pro={true}>
|
||||
<Trans i18nKey="plan_extendedPollLife" />
|
||||
</BillingPlanPerk>
|
||||
<BillingPlanPerk pro={true}>
|
||||
<Trans
|
||||
i18nKey="earlyAccess"
|
||||
defaults="Get early access to new features"
|
||||
/>
|
||||
</BillingPlanPerk>
|
||||
</BillingPlanPerks>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-cyan-800/10 bg-cyan-50 px-4 py-3 text-cyan-800 shadow-sm">
|
||||
<div className="mb-2">
|
||||
<TrendingUpIcon className="text-indigo mr-2 mt-0.5 size-6 shrink-0" />
|
||||
</div>
|
||||
<div className="mb-2 flex items-center gap-x-2">
|
||||
<h3 className="text-sm font-semibold">
|
||||
<Trans
|
||||
i18nKey="upgradeNowSaveLater"
|
||||
defaults="Upgrade now, save later"
|
||||
/>
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm">
|
||||
<Trans
|
||||
i18nKey="earlyAdopterDescription"
|
||||
defaults="As an early adopter, you'll lock in your subscription rate and won't be affected by future price increases."
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
"use client";
|
||||
|
||||
import { Badge } from "@rallly/ui/badge";
|
||||
import { z } from "zod";
|
||||
|
||||
import { Trans } from "@/components/trans";
|
||||
|
||||
const brandLabels = {
|
||||
visa: "Visa",
|
||||
mastercard: "Mastercard",
|
||||
amex: "American Express",
|
||||
discover: "Discover",
|
||||
unionpay: "UnionPay",
|
||||
eftpos_au: "Eftpos (AU)",
|
||||
jcb: "JCB",
|
||||
link: "Link",
|
||||
diners: "Diners Club",
|
||||
unknown: "Unknown",
|
||||
};
|
||||
|
||||
type CardBrands = keyof typeof brandLabels;
|
||||
|
||||
function CardDetails({ brand, last4 }: { brand: CardBrands; last4: string }) {
|
||||
const brandLabel = brandLabels[brand];
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<Badge>{brandLabel}</Badge>
|
||||
<span>**** {last4}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const cardDataSchema = z.object({
|
||||
brand: z
|
||||
.enum([
|
||||
"visa",
|
||||
"mastercard",
|
||||
"amex",
|
||||
"discover",
|
||||
"unionpay",
|
||||
"eftpos_au",
|
||||
"jcb",
|
||||
"diners",
|
||||
"link",
|
||||
"unknown",
|
||||
])
|
||||
.catch("unknown"),
|
||||
last4: z.string(),
|
||||
});
|
||||
|
||||
export function PaymentMethod({ type, data }: { type: string; data: unknown }) {
|
||||
switch (type) {
|
||||
case "card": {
|
||||
const cardData = cardDataSchema.parse(data);
|
||||
return <CardDetails brand={cardData.brand} last4={cardData.last4} />;
|
||||
}
|
||||
case "link":
|
||||
return "Link";
|
||||
default:
|
||||
return (
|
||||
<Badge>
|
||||
<Trans i18nKey="paymentMethodUnknown" defaults="Unknown" />
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
"use client";
|
||||
|
||||
import { Trans } from "@/components/trans";
|
||||
|
||||
/**
|
||||
* Returns the formatted price for the given amount, interval and currency.
|
||||
* eg. $7 per month, £40 per year, etc…
|
||||
*/
|
||||
export function SubscriptionPrice({
|
||||
amount,
|
||||
interval,
|
||||
currency,
|
||||
}: {
|
||||
amount: number;
|
||||
interval: string;
|
||||
currency: string;
|
||||
}) {
|
||||
const formattedAmount = new Intl.NumberFormat("en", {
|
||||
style: "currency",
|
||||
currency: currency,
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(amount / 100); // Divide by 100 since amount is in cents
|
||||
|
||||
return (
|
||||
<span>
|
||||
{interval === "month" ? (
|
||||
<Trans
|
||||
i18nKey="subscriptionPriceMonthly"
|
||||
defaults="{{price}} per month"
|
||||
values={{ price: formattedAmount }}
|
||||
/>
|
||||
) : (
|
||||
<Trans
|
||||
i18nKey="subscriptionPriceYearly"
|
||||
defaults="{{price}} per year"
|
||||
values={{ price: formattedAmount }}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
"use client";
|
||||
|
||||
import type { SubscriptionStatus as SubscriptionStatusType } from "@prisma/client";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
import { Trans } from "@/components/trans";
|
||||
import { useTranslation } from "@/i18n/client";
|
||||
|
||||
interface SubscriptionStatusProps {
|
||||
status: SubscriptionStatusType;
|
||||
cancelAtPeriodEnd: boolean;
|
||||
periodEnd: Date;
|
||||
}
|
||||
|
||||
export const SubscriptionStatus = ({
|
||||
status,
|
||||
cancelAtPeriodEnd,
|
||||
periodEnd,
|
||||
}: SubscriptionStatusProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const statusConfig: Record<
|
||||
string,
|
||||
{
|
||||
label: string;
|
||||
}
|
||||
> = {
|
||||
active: {
|
||||
label: t("subscriptionStatusActive", { defaultValue: "Active" }),
|
||||
},
|
||||
paused: {
|
||||
label: t("subscriptionStatusPaused", { defaultValue: "Paused" }),
|
||||
},
|
||||
trialing: {
|
||||
label: t("subscriptionStatusTrialing", { defaultValue: "Trialing" }),
|
||||
},
|
||||
past_due: {
|
||||
label: t("subscriptionStatusPastDue", { defaultValue: "Past due" }),
|
||||
},
|
||||
canceled: {
|
||||
label: t("subscriptionStatusCanceled", { defaultValue: "Canceled" }),
|
||||
},
|
||||
unpaid: {
|
||||
label: t("subscriptionStatusUnpaid", { defaultValue: "Unpaid" }),
|
||||
},
|
||||
incomplete: {
|
||||
label: t("subscriptionStatusIncomplete", { defaultValue: "Incomplete" }),
|
||||
},
|
||||
incomplete_expired: {
|
||||
label: t("subscriptionStatusIncompleteExpired", {
|
||||
defaultValue: "Incomplete expired",
|
||||
}),
|
||||
},
|
||||
unknown: {
|
||||
label: t("subscriptionStatusUnknown", { defaultValue: "Unknown" }),
|
||||
},
|
||||
};
|
||||
|
||||
const config = statusConfig[status] || statusConfig.unknown;
|
||||
|
||||
if (status === "active" && cancelAtPeriodEnd) {
|
||||
return (
|
||||
<Trans
|
||||
i18nKey="subscriptionCancelOn"
|
||||
defaults="Cancels {date}"
|
||||
values={{ date: dayjs(periodEnd).format("MMM D") }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <>{config.label}</>;
|
||||
};
|
||||
|
|
@ -1,21 +1,307 @@
|
|||
import { pricingData } from "@rallly/billing/pricing";
|
||||
import { prisma } from "@rallly/database";
|
||||
import { Badge } from "@rallly/ui/badge";
|
||||
import { Button } from "@rallly/ui/button";
|
||||
import { DialogTrigger } from "@rallly/ui/dialog";
|
||||
import { Icon } from "@rallly/ui/icon";
|
||||
import {
|
||||
ArrowUpRightIcon,
|
||||
CircleAlertIcon,
|
||||
CreditCardIcon,
|
||||
GemIcon,
|
||||
PlusIcon,
|
||||
SendIcon,
|
||||
SparklesIcon,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
import { BillingPage } from "@/app/[locale]/(admin)/settings/billing/billing-page";
|
||||
import type { Params } from "@/app/[locale]/types";
|
||||
import { env } from "@/env";
|
||||
import { getTranslation } from "@/i18n/server";
|
||||
import {
|
||||
DescriptionDetails,
|
||||
DescriptionList,
|
||||
DescriptionTerm,
|
||||
} from "@/components/description-list";
|
||||
import {
|
||||
EmptyState,
|
||||
EmptyStateDescription,
|
||||
EmptyStateFooter,
|
||||
EmptyStateIcon,
|
||||
EmptyStateTitle,
|
||||
} from "@/components/empty-state";
|
||||
import { FormattedDate } from "@/components/formatted-date";
|
||||
import { PayWallDialog } from "@/components/pay-wall-dialog";
|
||||
import { Settings, SettingsSection } from "@/components/settings/settings";
|
||||
import { Trans } from "@/components/trans";
|
||||
import { requireUser } from "@/next-auth";
|
||||
import { isSelfHosted } from "@/utils/constants";
|
||||
|
||||
import { PaymentMethod } from "./components/payment-method";
|
||||
import { SubscriptionPrice } from "./components/subscription-price";
|
||||
import { SubscriptionStatus } from "./components/subscription-status";
|
||||
|
||||
async function getData() {
|
||||
const user = await requireUser();
|
||||
|
||||
const data = await prisma.user.findUnique({
|
||||
where: { id: user.id },
|
||||
select: {
|
||||
customerId: true,
|
||||
subscription: {
|
||||
select: {
|
||||
id: true,
|
||||
active: true,
|
||||
currency: true,
|
||||
amount: true,
|
||||
priceId: true,
|
||||
periodStart: true,
|
||||
periodEnd: true,
|
||||
interval: true,
|
||||
cancelAtPeriodEnd: true,
|
||||
status: true,
|
||||
},
|
||||
},
|
||||
paymentMethods: {
|
||||
select: {
|
||||
id: true,
|
||||
type: true,
|
||||
data: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!data) {
|
||||
throw new Error("User not found");
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export default async function Page() {
|
||||
if (env.NEXT_PUBLIC_SELF_HOSTED === "true") {
|
||||
if (isSelfHosted) {
|
||||
notFound();
|
||||
}
|
||||
return <BillingPage pricingData={pricingData} />;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Params }) {
|
||||
const { t } = await getTranslation(params.locale);
|
||||
return {
|
||||
title: t("billing"),
|
||||
};
|
||||
const data = await getData();
|
||||
|
||||
const { subscription } = data;
|
||||
|
||||
return (
|
||||
<Settings>
|
||||
<SettingsSection
|
||||
title={
|
||||
<Trans i18nKey="billingSubscriptionTitle" defaults="Subscription" />
|
||||
}
|
||||
description={
|
||||
<Trans
|
||||
i18nKey="billingSubscriptionDescription"
|
||||
defaults="View and manage your current subscription plan"
|
||||
/>
|
||||
}
|
||||
>
|
||||
{subscription ? (
|
||||
<div className="space-y-4">
|
||||
<DescriptionList>
|
||||
<DescriptionTerm>
|
||||
<Trans i18nKey="billingSubscriptionPlan" defaults="Plan" />
|
||||
</DescriptionTerm>
|
||||
<DescriptionDetails>
|
||||
{subscription ? (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<span className="font-bold">Pro</span>
|
||||
<Badge
|
||||
variant={
|
||||
subscription.status === "active" ? "green" : "default"
|
||||
}
|
||||
>
|
||||
<SubscriptionStatus
|
||||
status={subscription.status}
|
||||
cancelAtPeriodEnd={subscription.cancelAtPeriodEnd}
|
||||
periodEnd={subscription.periodEnd}
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
) : (
|
||||
"Hobby"
|
||||
)}
|
||||
</DescriptionDetails>
|
||||
|
||||
<DescriptionTerm>
|
||||
<Trans i18nKey="billingSubscriptionPrice" defaults="Price" />
|
||||
</DescriptionTerm>
|
||||
<DescriptionDetails>
|
||||
{subscription ? (
|
||||
<SubscriptionPrice
|
||||
amount={subscription.amount}
|
||||
currency={subscription.currency}
|
||||
interval={subscription.interval}
|
||||
/>
|
||||
) : (
|
||||
<Trans i18nKey="priceFree" defaults="Free" />
|
||||
)}
|
||||
</DescriptionDetails>
|
||||
|
||||
<DescriptionTerm>
|
||||
<Trans
|
||||
i18nKey="billingSubscriptionNextPaymentDue"
|
||||
defaults="Next Payment Due"
|
||||
/>
|
||||
</DescriptionTerm>
|
||||
<DescriptionDetails>
|
||||
{subscription.cancelAtPeriodEnd ? (
|
||||
"-"
|
||||
) : (
|
||||
<FormattedDate date={subscription.periodEnd} format="short" />
|
||||
)}
|
||||
</DescriptionDetails>
|
||||
|
||||
<DescriptionTerm>
|
||||
<Trans
|
||||
i18nKey="billingPaymentMethod"
|
||||
defaults="Payment Method"
|
||||
/>
|
||||
</DescriptionTerm>
|
||||
<DescriptionDetails>
|
||||
{data.paymentMethods.length === 0 ? (
|
||||
<div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-destructive flex items-center gap-x-2">
|
||||
<CircleAlertIcon className="size-4" />
|
||||
<span className="font-medium">
|
||||
<Trans
|
||||
i18nKey="noPaymentMethodSet"
|
||||
defaults="No Payment Method Set"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
<Trans
|
||||
i18nKey="addPaymentMethodDescription"
|
||||
defaults="Please add a payment method to ensure uninterrupted service for your subscription."
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Button variant="default" asChild>
|
||||
<Link
|
||||
prefetch={false}
|
||||
href="/api/stripe/portal/payment-methods"
|
||||
>
|
||||
<Icon>
|
||||
<PlusIcon />
|
||||
</Icon>
|
||||
<Trans
|
||||
i18nKey="addPaymentMethod"
|
||||
defaults="Add Payment Method"
|
||||
/>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{data.paymentMethods.map((method) => (
|
||||
<li key={method.id}>
|
||||
<PaymentMethod type={method.type} data={method.data} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</DescriptionDetails>
|
||||
</DescriptionList>
|
||||
{data.customerId ? (
|
||||
<div className="flex flex-col items-start justify-between gap-6 gap-x-4 rounded-lg border bg-gray-50 p-4 sm:flex-row">
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-sm font-medium">
|
||||
<Trans
|
||||
i18nKey="needToMakeChanges"
|
||||
defaults="Need to make changes?"
|
||||
/>
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
<Trans
|
||||
i18nKey="billingPortalDescription"
|
||||
defaults="Visit the billing portal to manage your subscription, update payment methods, or view billing history."
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild variant="default">
|
||||
<Link
|
||||
href="/api/stripe/portal"
|
||||
prefetch={false}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
<Icon>
|
||||
<CreditCardIcon />
|
||||
</Icon>
|
||||
<Trans i18nKey="billingPortal" defaults="Billing Portal" />
|
||||
<Icon>
|
||||
<ArrowUpRightIcon />
|
||||
</Icon>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState className="py-8">
|
||||
<EmptyStateIcon>
|
||||
<GemIcon />
|
||||
</EmptyStateIcon>
|
||||
<EmptyStateTitle>
|
||||
<Trans
|
||||
i18nKey="billingSubscriptionNotActive"
|
||||
defaults="You are not currently subscribed to a plan."
|
||||
/>
|
||||
</EmptyStateTitle>
|
||||
<EmptyStateDescription>
|
||||
<Trans
|
||||
i18nKey="billingSubscriptionUpgradeToProDescription"
|
||||
defaults="Upgrade to Pro to get access to all features and benefits."
|
||||
/>
|
||||
</EmptyStateDescription>
|
||||
<EmptyStateFooter>
|
||||
<PayWallDialog>
|
||||
<DialogTrigger>
|
||||
<Button>
|
||||
<Icon>
|
||||
<SparklesIcon />
|
||||
</Icon>
|
||||
<Trans
|
||||
i18nKey="billingSubscriptionUpgradeToPro"
|
||||
defaults="Upgrade to Pro"
|
||||
/>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</PayWallDialog>
|
||||
</EmptyStateFooter>
|
||||
</EmptyState>
|
||||
)}
|
||||
</SettingsSection>
|
||||
<hr />
|
||||
<SettingsSection
|
||||
title={<Trans i18nKey="support" defaults="Support" />}
|
||||
description={
|
||||
<Trans
|
||||
i18nKey="supportDescription"
|
||||
defaults="Need help with anything?"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<p className="text-sm">
|
||||
<Trans
|
||||
i18nKey="supportBilling"
|
||||
defaults="Please reach out if you need any assistance."
|
||||
/>
|
||||
</p>
|
||||
<Button asChild>
|
||||
<Link href="mailto:support@rallly.co">
|
||||
<SendIcon className="size-4" />
|
||||
<Trans i18nKey="contactSupport" defaults="Contact Support" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</Settings>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
46
apps/web/src/components/description-list.tsx
Normal file
46
apps/web/src/components/description-list.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import { cn } from "@rallly/ui";
|
||||
|
||||
export function DescriptionList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"dl">) {
|
||||
return (
|
||||
<dl
|
||||
{...props}
|
||||
className={cn(
|
||||
className,
|
||||
"grid grid-cols-1 text-sm/6 sm:grid-cols-[min(50%,320px)_auto]",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function DescriptionTerm({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"dt">) {
|
||||
return (
|
||||
<dt
|
||||
{...props}
|
||||
className={cn(
|
||||
className,
|
||||
"col-start-1 border-t border-gray-800/5 pt-3 text-gray-500 first:border-none sm:border-t sm:border-gray-800/5 sm:py-3 dark:border-white/5 dark:text-gray-400 sm:dark:border-white/5",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function DescriptionDetails({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"dd">) {
|
||||
return (
|
||||
<dd
|
||||
{...props}
|
||||
className={cn(
|
||||
className,
|
||||
"pb-3 pt-1 text-gray-800 sm:border-t sm:border-gray-800/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
19
apps/web/src/components/formatted-date.tsx
Normal file
19
apps/web/src/components/formatted-date.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
"use client";
|
||||
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const formatMap = {
|
||||
short: "D MMM YYYY",
|
||||
};
|
||||
|
||||
type Format = keyof typeof formatMap;
|
||||
|
||||
export function FormattedDate({
|
||||
date,
|
||||
format,
|
||||
}: {
|
||||
date: Date;
|
||||
format: Format;
|
||||
}) {
|
||||
return <>{dayjs(date).format(formatMap[format])}</>;
|
||||
}
|
||||
183
apps/web/src/components/table.tsx
Normal file
183
apps/web/src/components/table.tsx
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
"use client";
|
||||
|
||||
import { cn } from "@rallly/ui";
|
||||
import Link from "next/link";
|
||||
import React, { createContext, useContext, useState } from "react";
|
||||
|
||||
const TableContext = createContext<{
|
||||
bleed: boolean;
|
||||
dense: boolean;
|
||||
grid: boolean;
|
||||
striped: boolean;
|
||||
}>({
|
||||
bleed: false,
|
||||
dense: false,
|
||||
grid: false,
|
||||
striped: false,
|
||||
});
|
||||
|
||||
export function Table({
|
||||
bleed = false,
|
||||
dense = false,
|
||||
grid = false,
|
||||
striped = false,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: {
|
||||
bleed?: boolean;
|
||||
dense?: boolean;
|
||||
grid?: boolean;
|
||||
striped?: boolean;
|
||||
} & React.ComponentPropsWithoutRef<"div">) {
|
||||
return (
|
||||
<TableContext.Provider
|
||||
value={
|
||||
{ bleed, dense, grid, striped } as React.ContextType<
|
||||
typeof TableContext
|
||||
>
|
||||
}
|
||||
>
|
||||
<div className="flow-root">
|
||||
<div
|
||||
{...props}
|
||||
className={cn(
|
||||
className,
|
||||
"-mx-(--gutter) overflow-x-auto whitespace-nowrap",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"inline-block min-w-full align-middle",
|
||||
!bleed && "sm:px-(--gutter)",
|
||||
)}
|
||||
>
|
||||
<table className="min-w-full text-left text-sm/6 text-zinc-950 dark:text-white">
|
||||
{children}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TableContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function TableHead({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"thead">) {
|
||||
return (
|
||||
<thead
|
||||
{...props}
|
||||
className={cn(className, "text-zinc-500 dark:text-zinc-400")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function TableBody(props: React.ComponentPropsWithoutRef<"tbody">) {
|
||||
return <tbody {...props} />;
|
||||
}
|
||||
|
||||
const TableRowContext = createContext<{
|
||||
href?: string;
|
||||
target?: string;
|
||||
title?: string;
|
||||
}>({
|
||||
href: undefined,
|
||||
target: undefined,
|
||||
title: undefined,
|
||||
});
|
||||
|
||||
export function TableRow({
|
||||
href,
|
||||
target,
|
||||
title,
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
href?: string;
|
||||
target?: string;
|
||||
title?: string;
|
||||
} & React.ComponentPropsWithoutRef<"tr">) {
|
||||
const { striped } = useContext(TableContext);
|
||||
|
||||
return (
|
||||
<TableRowContext.Provider
|
||||
value={
|
||||
{ href, target, title } as React.ContextType<typeof TableRowContext>
|
||||
}
|
||||
>
|
||||
<tr
|
||||
{...props}
|
||||
className={cn(
|
||||
className,
|
||||
href &&
|
||||
"has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/[2.5%]",
|
||||
striped && "even:bg-zinc-950/[2.5%] dark:even:bg-white/[2.5%]",
|
||||
href && striped && "hover:bg-zinc-950/5 dark:hover:bg-white/5",
|
||||
href &&
|
||||
!striped &&
|
||||
"hover:bg-zinc-950/[2.5%] dark:hover:bg-white/[2.5%]",
|
||||
)}
|
||||
/>
|
||||
</TableRowContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function TableHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"th">) {
|
||||
const { bleed, grid } = useContext(TableContext);
|
||||
|
||||
return (
|
||||
<th
|
||||
{...props}
|
||||
className={cn(
|
||||
className,
|
||||
"first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2)) border-b border-b-zinc-950/10 px-4 py-2 font-medium dark:border-b-white/10",
|
||||
grid &&
|
||||
"border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
|
||||
!bleed && "sm:first:pl-1 sm:last:pr-1",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function TableCell({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"td">) {
|
||||
const { bleed, dense, grid, striped } = useContext(TableContext);
|
||||
const { href, target, title } = useContext(TableRowContext);
|
||||
const [cellRef, setCellRef] = useState<HTMLElement | null>(null);
|
||||
|
||||
return (
|
||||
<td
|
||||
ref={href ? setCellRef : undefined}
|
||||
{...props}
|
||||
className={cn(
|
||||
className,
|
||||
"first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2)) relative px-4",
|
||||
!striped && "border-b border-zinc-950/5 dark:border-white/5",
|
||||
grid &&
|
||||
"border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
|
||||
dense ? "py-2.5" : "py-4",
|
||||
!bleed && "sm:first:pl-1 sm:last:pr-1",
|
||||
)}
|
||||
>
|
||||
{href && (
|
||||
<Link
|
||||
data-row-link
|
||||
href={href}
|
||||
target={target}
|
||||
aria-label={title}
|
||||
tabIndex={cellRef?.previousElementSibling === null ? 0 : -1}
|
||||
className="focus:outline-hidden absolute inset-0"
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</td>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
"use client";
|
||||
import { Trans as BaseTrans, useTranslation } from "react-i18next";
|
||||
|
||||
import type { TxKeyPath } from "../i18n/types";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { prisma } from "@rallly/database";
|
||||
import { posthog } from "@rallly/posthog/server";
|
||||
import { redirect } from "next/navigation";
|
||||
import NextAuth from "next-auth";
|
||||
import type { Provider } from "next-auth/providers";
|
||||
import z from "zod";
|
||||
|
|
@ -185,4 +186,12 @@ const auth = async () => {
|
|||
return getLegacySession();
|
||||
};
|
||||
|
||||
export { auth, handlers, signIn, signOut };
|
||||
const requireUser = async () => {
|
||||
const session = await auth();
|
||||
if (!session?.user) {
|
||||
redirect("/login");
|
||||
}
|
||||
return session?.user;
|
||||
};
|
||||
|
||||
export { auth, handlers, requireUser, signIn, signOut };
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue