add stripe (#121)

* add some stripe stuff

* more stripe stuff

* more stripe things

* more stripr stuff

* more stripe stuff

* more stripe stuff

* add more stuff

* add more stripe stuff

* more stuff

* fix types

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 (
+    <div className="container mx-auto py-10">
+      <h1 className="text-2xl font-semibold mb-8">
+        Payment {success ? "Success" : canceled ? "Canceled" : "Unknown"}
+      </h1>
+      {canceled ? (
+        <Link href="/settings/billing">
+          <Button>Go to billing</Button>
+        </Link>
+      ) : null}
+      {success ? <VerifySuccess /> : null}
+    </div>
+  );
+}
+
+function VerifySuccess() {
+  const { data: teams, isLoading } = api.team.getTeams.useQuery(undefined, {
+    refetchInterval: 3000,
+  });
+
+  if (teams?.[0]?.plan !== "FREE") {
+    return (
+      <div>
+        <div className="flex gap-2 items-center">
+          <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
+          <p>Your account has been upgraded to the paid plan.</p>
+        </div>
+        <Link href="/settings/billing" className="mt-8">
+          <Button className="mt-8">Go to billing</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-2 items-center">
+      <Spinner
+        className="h-5 w-5 stroke-muted-foreground"
+        innerSvgClass=" stroke-muted-foreground"
+      />
+      <p className="text-muted-foreground">Verifying payment</p>
+    </div>
+  );
+}