feat: billing pages

Author: drew-harris

frontends/dashboard/src/components/EditUserModal.tsx

@@ -2,9 +2,10 @@ import { Show, createEffect, createMemo, useContext } from "solid-js";
 import { createSignal } from "solid-js";
 import { Dialog, DialogOverlay, DialogPanel, DialogTitle } from "terracotta";
 import { UserContext } from "../contexts/UserContext";
-import { DefaultError, SlimUser, fromI32ToUserRole } from "shared/types";
+import { DefaultError, fromI32ToUserRole } from "shared/types";
 import { UserRole, fromUserRoleToI32, stringToUserRole } from "shared/types";
 import { createToast } from "./ShowToasts";
+import { SlimUser } from "trieve-ts-sdk";
 
 export interface InviteUserModalProps {
   editingUser: SlimUser | null;
@@ -23,13 +24,13 @@ export const EditUserModal = (props: InviteUserModalProps) => {
 
   const currentUserRole = createMemo(() => {
     return userContext.user?.()?.user_orgs.find((val) => {
-      return val.organization_id === userContext.selectedOrganizationId?.();
+      return val.organization_id === userContext.selectedOrg().id;
     })?.role;
   });
 
   const editingUserRole = createMemo(() => {
     return props.editingUser?.user_orgs.find((val) => {
-      return val.organization_id === userContext.selectedOrganizationId?.();
+      return val.organization_id === userContext.selectedOrg().id;
     })?.role;
   });
 
@@ -41,7 +42,7 @@ export const EditUserModal = (props: InviteUserModalProps) => {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        organization_id: userContext.selectedOrganizationId?.(),
+        organization_id: userContext.selectedOrg().id,
         user_id: props.editingUser?.id,
         role: fromUserRoleToI32(role()),
       }),

frontends/dashboard/src/components/InviteUserModal.tsx

@@ -21,7 +21,7 @@ export const InviteUserModal = (props: InviteUserModalProps) => {
   const userContext = useContext(UserContext);
 
   const currentUserRole = createMemo(() => {
-    const selectedOrgId = userContext.selectedOrganizationId?.();
+    const selectedOrgId = userContext.selectedOrg().id;
     if (!selectedOrgId) return 0;
     return (
       userContext
@@ -49,16 +49,16 @@ export const InviteUserModal = (props: InviteUserModalProps) => {
       credentials: "include",
       headers: {
         "Content-Type": "application/json",
-        "TR-Organization": userContext.selectedOrganizationId?.() ?? "",
+        "TR-Organization": userContext.selectedOrg().id ?? "",
       },
       body: JSON.stringify({
-        organization_id: userContext.selectedOrganizationId?.(),
+        organization_id: userContext.selectedOrg().id,
         email: email(),
         user_role: fromUserRoleToI32(role()),
         app_url: apiHost,
-        redirect_uri: `${
-          window.location.origin
-        }/dashboard/${userContext.selectedOrganizationId?.()}`,
+        redirect_uri: `${window.location.origin}/?org=${
+          userContext.selectedOrg().id
+        }`,
       }),
     }).then((res) => {
       setSendingEmail(false);

frontends/dashboard/src/components/InvoicesTable.tsx

@@ -10,9 +10,9 @@ import {
 } from "solid-js";
 import { UserContext } from "../contexts/UserContext";
 import { createToast } from "./ShowToasts";
-import { StripeInvoice } from "../types/apiTypes";
 import { TbFileInvoice } from "solid-icons/tb";
-import { formatDate, usdFormatter } from "../formatters";
+import { formatDate } from "../utils/formatters";
+import { StripeInvoice } from "trieve-ts-sdk";
 
 export const InvoicesTable = () => {
   const api_host = import.meta.env.VITE_API_HOST as unknown as string;

frontends/dashboard/src/index.tsx

@@ -17,6 +17,7 @@ import { ApiKeys } from "./pages/dataset/ApiKeys.tsx";
 import { OrganizationLayout } from "./layouts/OrganizationLayout.tsx";
 import { OrganizationHomepage } from "./pages/orgs/OrganizationHomepage.tsx";
 import { OrgUserPage } from "./pages/orgs/OrgUserPage.tsx";
+import { OrgBillingPage } from "./pages/orgs/OrgBillingPage.tsx";
 
 if (!DEV) {
   Sentry.init({
@@ -64,6 +65,10 @@ const routes: RouteDefinition[] = [
                 path: "/users",
                 component: OrgUserPage,
               },
+              {
+                path: "/billing",
+                component: OrgBillingPage,
+              },
               {
                 path: "*404",
                 component: () => <div>404</div>,

frontends/dashboard/src/pages/orgs/OrgBillingPage.tsx

@@ -0,0 +1,53 @@
+import { createEffect, createSignal, onCleanup, useContext } from "solid-js";
+import { UserContext } from "../../contexts/UserContext";
+import { OrganizationAndSubAndPlan } from "shared/types";
+import { PlansTable } from "../../components/PlansTable";
+import { createToast } from "../../components/ShowToasts";
+import { InvoicesTable } from "../../components/InvoicesTable";
+
+export const OrgBillingPage = () => {
+  const api_host = import.meta.env.VITE_API_HOST as unknown as string;
+
+  const userContext = useContext(UserContext);
+  const [orgSubPlan, setOrgSubPlan] =
+    createSignal<OrganizationAndSubAndPlan | null>(null);
+
+  createEffect(() => {
+    const orgSubPlanAbortController = new AbortController();
+    void fetch(`${api_host}/organization/${userContext.selectedOrg().id}`, {
+      credentials: "include",
+      headers: {
+        "TR-Organization": userContext.selectedOrg().id,
+      },
+      signal: orgSubPlanAbortController.signal,
+    })
+      .then((res) => {
+        if (res.status === 403) {
+          createToast({
+            title: "Error",
+            type: "error",
+            message:
+              "It is likely that an admin or owner recently increased your role to admin or owner. Please sign out and sign back in to see the changes.",
+            timeout: 10000,
+          });
+          return null;
+        }
+
+        return res.json();
+      })
+      .then((data) => {
+        setOrgSubPlan(data);
+      });
+
+    onCleanup(() => {
+      orgSubPlanAbortController.abort();
+    });
+  });
+
+  return (
+    <div class="flex w-full flex-col gap-y-12">
+      <PlansTable currentOrgSubPlan={orgSubPlan()} />
+      <InvoicesTable />
+    </div>
+  );
+};