Developer settings
-
- API Keys
-
+ API Keys
SMTP
{children}
diff --git a/apps/web/src/app/(dashboard)/dev-settings/settings-nav-button.tsx b/apps/web/src/app/(dashboard)/dev-settings/settings-nav-button.tsx
index 49130fe..aa41063 100644
--- a/apps/web/src/app/(dashboard)/dev-settings/settings-nav-button.tsx
+++ b/apps/web/src/app/(dashboard)/dev-settings/settings-nav-button.tsx
@@ -11,7 +11,7 @@ export const SettingsNavButton: React.FC<{
}> = ({ href, children, comingSoon }) => {
const pathname = usePathname();
- const isActive = pathname?.startsWith(href);
+ const isActive = pathname === href;
if (comingSoon) {
return (
diff --git a/apps/web/src/app/(dashboard)/dev-settings/smtp/page.tsx b/apps/web/src/app/(dashboard)/dev-settings/smtp/page.tsx
index 26fe258..65dd799 100644
--- a/apps/web/src/app/(dashboard)/dev-settings/smtp/page.tsx
+++ b/apps/web/src/app/(dashboard)/dev-settings/smtp/page.tsx
@@ -1,25 +1,15 @@
"use client";
import * as React from "react";
-import { Code } from "@unsend/ui/src/code";
-import { Button } from "@unsend/ui/src/button";
import {
Card,
CardContent,
CardDescription,
- CardFooter,
CardHeader,
CardTitle,
} from "@unsend/ui/src/card";
import { TextWithCopyButton } from "@unsend/ui/src/text-with-copy";
export default function ExampleCard() {
- const smtpDetails = {
- smtp: "smtp.example.com",
- port: "587",
- user: "user@example.com",
- password: "supersecretpassword",
- };
-
return (
diff --git a/apps/web/src/app/(dashboard)/payments/page.tsx b/apps/web/src/app/(dashboard)/payments/page.tsx
new file mode 100644
index 0000000..9f9408b
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/payments/page.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { Button } from "@unsend/ui/src/button";
+import Spinner from "@unsend/ui/src/spinner";
+import { CheckCircle2 } from "lucide-react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { api } from "~/trpc/react";
+
+export default function PaymentsPage() {
+ const searchParams = useSearchParams();
+
+ const success = searchParams.get("success");
+ const canceled = searchParams.get("canceled");
+
+ return (
+
+
+ Payment {success ? "Success" : canceled ? "Canceled" : "Unknown"}
+
+ {canceled ? (
+
+
+
+ ) : null}
+ {success ? : null}
+
+ );
+}
+
+function VerifySuccess() {
+ const { data: teams, isLoading } = api.team.getTeams.useQuery(undefined, {
+ refetchInterval: 3000,
+ });
+
+ if (teams?.[0]?.plan !== "FREE") {
+ return (
+
+
+
+
Your account has been upgraded to the paid plan.
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ {currentTeam?.plan !== "FREE" ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
Payment Method
+ {subscription ? (
+
+
+ {subscription.paymentMethod ? (
+ <>
+ 💳
+
+ {paymentMethod.card?.brand || ""} ••••{" "}
+ {paymentMethod.card?.last4 || ""}
+
+ {paymentMethod.card && (
+
+ (Expires: {paymentMethod.card.exp_month}/
+ {paymentMethod.card.exp_year})
+
+ )}
+
+ ) : (
+ "No Payment Method"
+ )}
+
+
+ Next billing date:{" "}
+ {subscription.currentPeriodEnd
+ ? format(
+ new Date(subscription.currentPeriodEnd),
+ "MMM dd, yyyy"
+ )
+ : "N/A"}
+
+
+ ) : (
+
+ No active subscription
+
+ )}
+
+
+
+
+
Billing Email
+ {isEditingEmail ? (
+
+
+ setBillingEmail(e.target.value)}
+ className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+ placeholder="Enter billing email"
+ />
+
+
+
+
+ ) : (
+
+
+
+ {currentTeam?.billingEmail || "No billing email set"}
+
+
+
+
+ )}
+
+
+
+
Settings
+
+ Usage
+ Billing
+
+
{children}
+
+
+
+ );
+}
diff --git a/apps/web/src/app/(dashboard)/settings/usage/usage.tsx b/apps/web/src/app/(dashboard)/settings/usage/usage.tsx
new file mode 100644
index 0000000..4612d37
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/settings/usage/usage.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import { api } from "~/trpc/react";
+import { Card } from "@unsend/ui/src/card";
+import Spinner from "@unsend/ui/src/spinner";
+import { format } from "date-fns";
+import {
+ getCost,
+ PLAN_CREDIT_UNITS,
+ UNIT_PRICE,
+ USAGE_UNIT_PRICE,
+} from "~/lib/usage";
+import { useTeam } from "~/providers/team-context";
+import { EmailUsageType } from "@prisma/client";
+import { PlanDetails } from "~/components/payments/PlanDetails";
+import { UpgradeButton } from "~/components/payments/UpgradeButton";
+const FREE_PLAN_LIMIT = 3000;
+
+function FreePlanUsage({
+ usage,
+ dayUsage,
+}: {
+ usage: { type: EmailUsageType; sent: number }[];
+ dayUsage: { type: EmailUsageType; sent: number }[];
+}) {
+ const DAILY_LIMIT = 100;
+ const totalSent = usage?.reduce((acc, item) => acc + item.sent, 0) || 0;
+ const monthlyPercentageUsed = (totalSent / FREE_PLAN_LIMIT) * 100;
+
+ // Calculate daily usage - this is a simplified version, you might want to adjust based on actual daily tracking
+ const dailyUsage = dayUsage?.reduce((acc, item) => acc + item.sent, 0) || 0;
+ const dailyPercentageUsed = (dailyUsage / DAILY_LIMIT) * 100;
+
+ return (
+
+
+
+ {usage?.map((item) => (
+
+
+
+ {item.type.toLowerCase()}
+
+
+ {item.type === "TRANSACTIONAL"
+ ? "Mails sent using the send api or SMTP"
+ : "Mails designed sent from unsend editor"}
+
+
+
+ {item.sent.toLocaleString()} emails
+
+
+ ))}
+
+
Total
+
+ {usage
+ ?.reduce((acc, item) => acc + item.sent, 0)
+ .toLocaleString()}{" "}
+ emails
+
+
+
+
+
+
+
+
+
Monthly Limit
+
+ {totalSent.toLocaleString()}/
+ {FREE_PLAN_LIMIT.toLocaleString()}
+
+
+
+
+
+
+
+
+
+
Daily Limit
+
+ {dailyUsage.toLocaleString()}/{DAILY_LIMIT.toLocaleString()}
+
+
+
+
+
+
+
+
+
+ {usage?.map((item) => (
+
+
+
+ {item.type.toLowerCase()}
+
+
+
+ {item.sent.toLocaleString()}
+ {" "}
+ emails at{" "}
+
+ ${USAGE_UNIT_PRICE[item.type]}
+ {" "}
+ each
+
+
+
+ ${getCost(item.sent, item.type).toFixed(2)}
+
+
+ ))}
+
+
+
Minimum spend
+
+ {currentTeam?.plan}
+
+
+
+ ${planCreditCost.toFixed(2)}
+
+
+
+
+
+
Amount Due
+
+
+ {planCreditCost < totalCost
+ ? `$${totalCost.toFixed(2)}`
+ : `$${planCreditCost.toFixed(2)}`}
+
+
+
+
+
+
+
+
+
Usage
+
+ {billingPeriod}
+
+
+
+
+ {isLoading ? (
+
+
+
+ ) : usage?.month.length === 0 ? (
+
+ No usage data available
+
+ ) : currentTeam?.plan === "FREE" ? (
+
+ ) : (
+
+ )}
+
+ {currentTeam?.plan ? (
+
+
+
+ {currentTeam?.plan === "FREE" ? : null}
+
+
+ ) : null}
+
+
+ {subscriptionQuery.data?.status === "active"
+ ? planKey.toLowerCase()
+ : "free"}
+
+
+
Current plan
+ {subscriptionQuery.data?.cancelAtPeriodEnd && (
+
+ Cancels {format(subscriptionQuery.data.cancelAtPeriodEnd, "MMM dd")}
+
+ )}
+
+
+ {perks.map((perk, index) => (
+ -
+
+ {perk}
+
+ ))}
+
+