feat: add billing UI plans, billing account and subscriptions for adm…

…in panel (#479) * chore: add and replace table column * feat: add plan list * feat: add billing accounts for org
raystack · Jan 31, 2024 · 551ecc6 · 551ecc6
1 parent e244c5c
commit 551ecc6
Show file tree

Hide file tree

Showing 20 changed files with 712 additions and 30 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -28,6 +28,10 @@ const navigationItems: NavigationItemsTypes[] = [
     name: "Groups",
     to: `/groups`,
   },
+  {
+    name: "Plans",
+    to: `/plans`,
+  },
   {
     name: "Roles",
     to: `/roles`,

diff --git a/ui/src/containers/billingplans.list/columns.tsx b/ui/src/containers/billingplans.list/columns.tsx
@@ -0,0 +1,48 @@
+import { V1Beta1Plan } from "@raystack/frontier";
+import type { ColumnDef } from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Link } from "react-router-dom";
+
+const columnHelper = createColumnHelper<V1Beta1Plan>();
+export const getColumns: (
+  plans: V1Beta1Plan[]
+) => ColumnDef<V1Beta1Plan, any>[] = (plans: V1Beta1Plan[]) => {
+  return [
+    columnHelper.accessor("id", {
+      header: "ID",
+      //@ts-ignore
+      filterVariant: "text",
+      cell: ({ row, getValue }) => {
+        return <Link to={`/plans/${row.getValue("id")}`}>{getValue()}</Link>;
+      },
+    }),
+    {
+      header: "Title",
+      accessorKey: "title",
+      filterVariant: "text",
+      cell: (info) => info.getValue(),
+    },
+    {
+      header: "Interval",
+      accessorKey: "interval",
+      filterVariant: "text",
+      cell: (info) => info.getValue(),
+      footer: (props) => props.column.id,
+    },
+    {
+      header: "Create At",
+      accessorKey: "created_at",
+      meta: {
+        headerFilter: false,
+      },
+      cell: (info) =>
+        new Date(info.getValue() as Date).toLocaleString("en", {
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        }),
+
+      footer: (props) => props.column.id,
+    },
+  ];
+};
diff --git a/ui/src/containers/billingplans.list/details.tsx b/ui/src/containers/billingplans.list/details.tsx
@@ -0,0 +1,44 @@
+import { Flex, Grid, Text } from "@raystack/apsara";
+import { usePlan } from ".";
+export default function PlanDetails() {
+  const { plan } = usePlan();
+
+  return (
+    <Flex
+      direction="column"
+      gap="large"
+      style={{
+        width: "320px",
+        height: "calc(100vh - 60px)",
+        borderLeft: "1px solid var(--border-base)",
+        padding: "var(--pd-16)",
+      }}
+    >
+      <Text size={4}>{plan?.name}</Text>
+      <Flex direction="column" gap="large">
+        <Grid columns={2} gap="small">
+          <Text size={1}>Name</Text>
+          <Text size={1}>{plan?.name}</Text>
+        </Grid>
+        <Grid columns={2} gap="small">
+          <Text size={1}>Interval</Text>
+          <Text size={1}>{plan?.interval}</Text>
+        </Grid>
+        <Grid columns={2} gap="small">
+          <Text size={1}>Created At</Text>
+          <Text size={1}>
+            {new Date(plan?.created_at as any).toLocaleString("en", {
+              month: "long",
+              day: "numeric",
+              year: "numeric",
+            })}
+          </Text>
+        </Grid>
+      </Flex>
+    </Flex>
+  );
+}
+
+const css = {
+  row: { height: "32px", display: "flex", alignItems: "center" },
+};
diff --git a/ui/src/containers/billingplans.list/header.tsx b/ui/src/containers/billingplans.list/header.tsx
@@ -0,0 +1,17 @@
+import { DataTable, useTable } from "@raystack/apsara";
+import { useNavigate } from "react-router-dom";
+import PageHeader from "~/components/page-header";
+
+export const PlanHeader = ({ header }: any) => {
+  const navigate = useNavigate();
+  const { filteredColumns, table } = useTable();
+  const isFiltered = filteredColumns.length > 0;
+
+  return (
+    <PageHeader title={header.title} breadcrumb={header?.breadcrumb || []}>
+      {isFiltered ? <DataTable.ClearFilter /> : <DataTable.FilterOptions />}
+      <DataTable.ViewOptions />
+      <DataTable.GloabalSearch placeholder="Search plans..." />
+    </PageHeader>
+  );
+};
diff --git a/ui/src/containers/billingplans.list/index.tsx b/ui/src/containers/billingplans.list/index.tsx
@@ -0,0 +1,79 @@
+import { DataTable, EmptyState, Flex } from "@raystack/apsara";
+import { useFrontier } from "@raystack/frontier/react";
+import { useEffect, useState } from "react";
+import { Outlet, useOutletContext, useParams } from "react-router-dom";
+
+import { V1Beta1Plan } from "@raystack/frontier";
+import { reduceByKey } from "~/utils/helper";
+import { getColumns } from "./columns";
+import { PlanHeader } from "./header";
+
+const pageHeader = {
+  title: "Plans",
+  breadcrumb: [],
+};
+
+type ContextType = { plan: V1Beta1Plan | null };
+export default function PlanList() {
+  const { client } = useFrontier();
+  const [plans, setPlans] = useState([]);
+
+  useEffect(() => {
+    async function getAllPlans() {
+      const {
+        // @ts-ignore
+        data: { plans },
+      } = await client?.frontierServiceListPlans();
+      setPlans(plans);
+    }
+    getAllPlans();
+  }, []);
+
+  let { planId } = useParams();
+
+  const userMapByName = reduceByKey(plans ?? [], "id");
+
+  const tableStyle = plans?.length
+    ? { width: "100%" }
+    : { width: "100%", height: "100%" };
+
+  return (
+    <Flex direction="row" style={{ height: "100%", width: "100%" }}>
+      <DataTable
+        data={plans ?? []}
+        // @ts-ignore
+        columns={getColumns(plans)}
+        emptyState={noDataChildren}
+        parentStyle={{ height: "calc(100vh - 60px)" }}
+        style={tableStyle}
+      >
+        <DataTable.Toolbar>
+          <PlanHeader header={pageHeader} />
+          <DataTable.FilterChips style={{ paddingTop: "16px" }} />
+        </DataTable.Toolbar>
+        <DataTable.DetailContainer>
+          <Outlet
+            context={{
+              user: planId ? userMapByName[planId] : null,
+            }}
+          />
+        </DataTable.DetailContainer>
+      </DataTable>
+    </Flex>
+  );
+}
+
+export function usePlan() {
+  return useOutletContext<ContextType>();
+}
+
+export const noDataChildren = (
+  <EmptyState>
+    <div className="svg-container"></div>
+    <h3>0 plan created</h3>
+  </EmptyState>
+);
+
+export const TableDetailContainer = ({ children }: any) => (
+  <div>{children}</div>
+);
diff --git a/ui/src/containers/groups.list/columns.tsx b/ui/src/containers/groups.list/columns.tsx
@@ -31,15 +31,15 @@ export const getColumns: (
       },
     }),
     {
-      header: "Name",
-      accessorKey: "name",
+      header: "Title",
+      accessorKey: "title",
       cell: (info: any) => info.getValue(),
       filterVariant: "text",
     },
     {
-      header: "Slug",
-      accessorKey: "slug",
-      cell: (info: any) => info.getValue(),
+      header: "Organization Id",
+      accessorKey: "org_id",
+      cell: (info) => info.getValue(),
       filterVariant: "text",
     },
     {

diff --git a/ui/src/containers/groups.list/details.tsx b/ui/src/containers/groups.list/details.tsx
@@ -21,6 +21,10 @@ export default function GroupDetails() {
           <Text size={1}>Name</Text>
           <Text size={1}>{group?.name}</Text>
         </Grid>
+        <Grid columns={2} gap="small">
+          <Text size={1}>Organization Id</Text>
+          <Text size={1}>{group?.org_id}</Text>
+        </Grid>
         <Grid columns={2} gap="small">
           <Text size={1}>Created At</Text>
           <Text size={1}>

diff --git a/ui/src/containers/organisations.list/billingaccounts/columns.tsx b/ui/src/containers/organisations.list/billingaccounts/columns.tsx
@@ -0,0 +1,71 @@
+import { V1Beta1BillingAccount } from "@raystack/frontier";
+import type { ColumnDef } from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Link, useParams } from "react-router-dom";
+
+const columnHelper = createColumnHelper<V1Beta1BillingAccount>();
+export const getColumns: (
+  billingAccounts: V1Beta1BillingAccount[]
+) => ColumnDef<V1Beta1BillingAccount, any>[] = (
+  billingAccounts: V1Beta1BillingAccount[]
+) => {
+  let { organisationId } = useParams();
+  return [
+    columnHelper.accessor("id", {
+      header: "ID",
+      //@ts-ignore
+      filterVariant: "text",
+      cell: ({ row, getValue }) => {
+        return (
+          <Link
+            to={`/organisations/${organisationId}/billingaccounts/${row.getValue(
+              "id"
+            )}`}
+          >
+            {getValue()}
+          </Link>
+        );
+      },
+    }),
+    {
+      header: "Organization Id",
+      accessorKey: "org_id",
+      cell: (info) => info.getValue(),
+      filterVariant: "text",
+    },
+    {
+      header: "Title",
+      accessorKey: "name",
+      cell: (info) => info.getValue(),
+      filterVariant: "text",
+    },
+    {
+      header: "Provider",
+      accessorKey: "provider",
+      cell: (info) => info.getValue(),
+      filterVariant: "text",
+    },
+    {
+      header: "State",
+      accessorKey: "state",
+      cell: (info) => info.getValue(),
+      filterVariant: "text",
+    },
+
+    {
+      header: "Create At",
+      accessorKey: "created_at",
+      meta: {
+        headerFilter: false,
+      },
+      cell: (info) =>
+        new Date(info.getValue() as Date).toLocaleString("en", {
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        }),
+
+      footer: (props) => props.column.id,
+    },
+  ];
+};
diff --git a/ui/src/containers/organisations.list/billingaccounts/details.tsx b/ui/src/containers/organisations.list/billingaccounts/details.tsx
@@ -0,0 +1,69 @@
+import { Flex, Grid, Text } from "@raystack/apsara";
+import { NavLink, useParams } from "react-router-dom";
+import { usebillingaccount } from ".";
+
+export default function BillingAccountDetails() {
+  const { billingaccount } = usebillingaccount();
+  let { organisationId, billingaccountId } = useParams();
+  return (
+    <Flex
+      direction="column"
+      gap="large"
+      style={{
+        width: "320px",
+        height: "calc(100vh - 60px)",
+        borderLeft: "1px solid var(--border-base)",
+        padding: "var(--pd-16)",
+      }}
+    >
+      <Text size={4}>{billingaccount?.name}</Text>
+      <Flex direction="column" gap="large">
+        <Grid columns={2} gap="small">
+          <Text size={1}>Name</Text>
+          <Text size={1}>{billingaccount?.name}</Text>
+        </Grid>
+        <Grid columns={2} gap="small">
+          <Text size={1}>Subscriptions</Text>
+          <Text size={1}>
+            <NavLink
+              to={`/organisations/${organisationId}/billingaccounts/${billingaccountId}/subscriptions`}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                flexDirection: "row",
+              }}
+            >
+              Go to subscriptions
+            </NavLink>
+          </Text>
+        </Grid>
+        <Grid columns={2} gap="small">
+          <Text size={1}>Organization Id</Text>
+          <Text size={1}>{billingaccount?.org_id}</Text>
+        </Grid>
+        <Grid columns={2} gap="small">
+          <Text size={1}>Provider</Text>
+          <Text size={1}>{billingaccount?.provider}</Text>
+        </Grid>
+        <Grid columns={2} gap="small">
+          <Text size={1}>State</Text>
+          <Text size={1}>{billingaccount?.state}</Text>
+        </Grid>
+        <Grid columns={2} gap="small">
+          <Text size={1}>Created At</Text>
+          <Text size={1}>
+            {new Date(billingaccount?.created_at as any).toLocaleString("en", {
+              month: "long",
+              day: "numeric",
+              year: "numeric",
+            })}
+          </Text>
+        </Grid>
+      </Flex>
+    </Flex>
+  );
+}
+
+const css = {
+  row: { height: "32px", display: "flex", alignItems: "center" },
+};