Skip to content

Commit

Permalink
Poké: rework display active subscription/plan (#4576)
Browse files Browse the repository at this point in the history 
* Poké: rework display active subscription/plan

* Apply feedback

* lint

* Improve look
  • Loading branch information
@PopDaph
PopDaph authored Apr 5, 2024
1 parent 390f3c7 commit 9ddfac0
Show file tree
Hide file tree
Showing 2 changed files with 249 additions and 67 deletions.
199 changes: 198 additions & 1 deletion front/components/poke/subscriptions/table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@
import {
CloudArrowDownIcon,
ConfluenceLogo,
GithubLogo,
GoogleLogo,
IntercomLogo,
NotionLogo,
SlackLogo,
} from "@dust-tt/sparkle";
import type { SubscriptionType, WorkspaceType } from "@dust-tt/types";
import { format } from "date-fns/format";
import Link from "next/link";

import { PokeDataTable } from "@app/components/poke/shadcn/ui/data_table";
import {
PokeTable,
PokeTableBody,
PokeTableCell,
PokeTableRow,
} from "@app/components/poke/shadcn/ui/table";
import { makeColumnsForSubscriptions } from "@app/components/poke/subscriptions/columns";
import { isDevelopment } from "@app/lib/development";

interface SubscriptionsDataTableProps {
owner: WorkspaceType;
Expand Down Expand Up @@ -31,11 +49,190 @@ export function SubscriptionsDataTable({
}: SubscriptionsDataTableProps) {
return (
<div className="border-material-200 my-4 flex flex-col rounded-lg border p-4">
<h2 className="text-md mb-4 font-bold">Subscriptions:</h2>
<h2 className="text-md mb-4 font-bold">History of subscriptions:</h2>
<PokeDataTable
columns={makeColumnsForSubscriptions()}
data={prepareSubscriptionsForDisplay(owner, subscriptions)}
/>
</div>
);
}

export function ActiveSubscriptionTable({
subscription,
}: {
subscription: SubscriptionType;
}) {
const activePlan = subscription.plan;
return (
<div className="flex flex-col space-y-8 pt-4">
<div className="flex justify-between gap-3">
<div className="border-material-200 my-4 flex flex-grow flex-col rounded-lg border p-4">
<h2 className="text-md pb-4 font-bold">Active Subscription:</h2>
<PokeTable>
<PokeTableBody>
<PokeTableRow>
<PokeTableCell>Plan Name</PokeTableCell>
<PokeTableCell>{subscription.plan.name}</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Plan Code</PokeTableCell>
<PokeTableCell>{subscription.plan.code}</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Is in Trial?</PokeTableCell>
<PokeTableCell>
{subscription.trialing ? "✅" : "❌"}
</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Stripe Subscription Id</PokeTableCell>
<PokeTableCell>
{subscription.stripeSubscriptionId ? (
<Link
href={
isDevelopment()
? `https://dashboard.stripe.com/test/subscriptions/${subscription.stripeSubscriptionId}`
: `https://dashboard.stripe.com/subscriptions/${subscription.stripeSubscriptionId}`
}
target="_blank"
className="text-xs text-action-400"
>
{subscription.stripeSubscriptionId}
</Link>
) : (
"No subscription id"
)}
</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Stripe Customer Id</PokeTableCell>
<PokeTableCell>
{subscription.stripeCustomerId ? (
<Link
href={
isDevelopment()
? `https://dashboard.stripe.com/test/customers/${subscription.stripeCustomerId}`
: `https://dashboard.stripe.com/customers/${subscription.stripeCustomerId}`
}
target="_blank"
className="text-xs text-action-400"
>
{subscription.stripeCustomerId}
</Link>
) : (
"No customer id"
)}
</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Start Date</PokeTableCell>
<PokeTableCell>
{subscription.startDate
? format(subscription.startDate, "yyyy-MM-dd")
: "/"}
</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>End Date</PokeTableCell>
<PokeTableCell>
{subscription.endDate
? format(subscription.endDate, "yyyy-MM-dd")
: "/"}
</PokeTableCell>
</PokeTableRow>
</PokeTableBody>
</PokeTable>
</div>
<div className="border-material-200 my-4 flex flex-grow flex-col rounded-lg border p-4">
<h2 className="text-md pb-4 font-bold">Plan limitations:</h2>
<PokeTable>
<PokeTableBody>
<PokeTableRow>
<PokeTableCell>SlackBot allowed</PokeTableCell>
<PokeTableCell>
{activePlan.limits.assistant.isSlackBotAllowed ? "✅" : "❌"}
</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Connections allowed</PokeTableCell>
<PokeTableCell>
<div className="flex gap-2">
{activePlan.limits.connections.isSlackAllowed ? (
<SlackLogo />
) : null}
{activePlan.limits.connections.isGoogleDriveAllowed ? (
<GoogleLogo />
) : null}
{activePlan.limits.connections.isGithubAllowed ? (
<GithubLogo />
) : null}
{activePlan.limits.connections.isNotionAllowed ? (
<NotionLogo />
) : null}
{activePlan.limits.connections.isIntercomAllowed ? (
<IntercomLogo />
) : null}
{activePlan.limits.connections.isConfluenceAllowed ? (
<ConfluenceLogo />
) : null}
{activePlan.limits.connections.isWebCrawlerAllowed ? (
<CloudArrowDownIcon />
) : null}
</div>
</PokeTableCell>
</PokeTableRow>

<PokeTableRow>
<PokeTableCell>Max number of users</PokeTableCell>
<PokeTableCell>
{activePlan.limits.users.maxUsers === -1
? "unlimited"
: activePlan.limits.users.maxUsers}
</PokeTableCell>
</PokeTableRow>

<PokeTableRow>
<PokeTableCell>Max number of messages</PokeTableCell>
<PokeTableCell>
{activePlan.limits.assistant.maxMessages === -1
? "unlimited"
: `${activePlan.limits.assistant.maxMessages} / ${activePlan.limits.assistant.maxMessagesTimeframe}`}
</PokeTableCell>
</PokeTableRow>

<PokeTableRow>
<PokeTableCell>Max number of data sources</PokeTableCell>
<PokeTableCell>
{activePlan.limits.dataSources.count === -1
? "unlimited"
: activePlan.limits.dataSources.count}
</PokeTableCell>
</PokeTableRow>

<PokeTableRow>
<PokeTableCell>
Max number of documents in data sources
</PokeTableCell>
<PokeTableCell>
{activePlan.limits.dataSources.documents.count === -1
? "unlimited"
: activePlan.limits.dataSources.documents.count}
</PokeTableCell>
</PokeTableRow>

<PokeTableRow>
<PokeTableCell>Max documents size</PokeTableCell>
<PokeTableCell>
{activePlan.limits.dataSources.documents.sizeMb === -1
? "unlimited"
: `${activePlan.limits.dataSources.documents.sizeMb}Mb`}
</PokeTableCell>
</PokeTableRow>
</PokeTableBody>
</PokeTable>
</div>
</div>
</div>
);
}
117 changes: 51 additions & 66 deletions front/pages/poke/[wId]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import type {
import type { WorkspaceType } from "@dust-tt/types";
import type { PlanType, SubscriptionType } from "@dust-tt/types";
import { DustProdActionRegistry, WHITELISTABLE_FEATURES } from "@dust-tt/types";
import { JsonViewer } from "@textea/json-viewer";
import { keyBy } from "lodash";
import type { InferGetServerSidePropsType } from "next";
import Link from "next/link";
Expand All @@ -25,7 +24,10 @@ import { AssistantsDataTable } from "@app/components/poke/assistants/table";
import { DataSourceDataTable } from "@app/components/poke/data_sources/table";
import { FeatureFlagsDataTable } from "@app/components/poke/features/table";
import PokeNavbar from "@app/components/poke/PokeNavbar";
import { SubscriptionsDataTable } from "@app/components/poke/subscriptions/table";
import {
ActiveSubscriptionTable,
SubscriptionsDataTable,
} from "@app/components/poke/subscriptions/table";
import { SendNotificationsContext } from "@app/components/sparkle/Notification";
import { getAgentConfigurations } from "@app/lib/api/assistant/configuration";
import { getDataSources } from "@app/lib/api/data_sources";
Expand All @@ -34,7 +36,6 @@ import {
orderDatasourceByImportance,
} from "@app/lib/assistant";
import { useSubmitFunction } from "@app/lib/client/utils";
import { isDevelopment } from "@app/lib/development";
import { withSuperUserAuthRequirements } from "@app/lib/iam/session";
import { Plan, Subscription } from "@app/lib/models";
import { FREE_NO_PLAN_CODE } from "@app/lib/plans/plan_codes";
Expand Down Expand Up @@ -282,59 +283,39 @@ const WorkspacePage = ({
View dust app logs
</a>
</div>
{activeSubscription.stripeSubscriptionId && (
<div>
<Link
href={
isDevelopment()
? `https://dashboard.stripe.com/test/subscriptions/${activeSubscription.stripeSubscriptionId}`
: `https://dashboard.stripe.com/subscriptions/${activeSubscription.stripeSubscriptionId}`
}
target="_blank"
className="text-xs text-action-400"
>
View Stripe Subscription
</Link>
</div>
)}
</div>

<div className="flex-col justify-center">
<div className="mx-2">
<h2 className="text-md mb-4 font-bold">Segmentation:</h2>
<div>
<DropdownMenu>
<DropdownMenu.Button>
<Button
type="select"
labelVisible={true}
label={owner.segmentation ?? "none"}
variant="secondary"
hasMagnifying={false}
size="sm"
/>
</DropdownMenu.Button>
<DropdownMenu.Items origin="auto" width={240}>
{[null, "interesting"].map((segment) => (
<DropdownMenu.Item
label={segment ?? "none"}
key={segment ?? "all"}
onClick={() => {
void onWorkspaceUpdate(
segment as WorkspaceSegmentationType
);
}}
></DropdownMenu.Item>
))}
</DropdownMenu.Items>
</DropdownMenu>
</div>
<DropdownMenu>
<DropdownMenu.Button>
<Button
type="select"
labelVisible={true}
label={`Segmentation: ${owner.segmentation ?? "none"}`}
variant="secondary"
hasMagnifying={false}
size="sm"
/>
</DropdownMenu.Button>
<DropdownMenu.Items origin="auto" width={240}>
{[null, "interesting"].map((segment) => (
<DropdownMenu.Item
label={segment ?? "none"}
key={segment ?? "all"}
onClick={() => {
void onWorkspaceUpdate(
segment as WorkspaceSegmentationType
);
}}
></DropdownMenu.Item>
))}
</DropdownMenu.Items>
</DropdownMenu>

<h2 className="text-md mb-4 mt-8 font-bold">Plan:</h2>
<JsonViewer value={activeSubscription} rootName={false} />
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-4">
{plans && (
<div className="pt-8">
<div className="pt-4">
<Collapsible>
<Collapsible.Button label="Manage plan" />
<Collapsible.Panel>
Expand Down Expand Up @@ -368,6 +349,16 @@ const WorkspacePage = ({
workspaceHasManagedDataSources
}
/>
{activeSubscription.plan.code !==
FREE_NO_PLAN_CODE &&
workspaceHasManagedDataSources && (
<div className="pl-2 pt-4">
<p className="text-warning mb-4 text-sm">
Delete managed data sources before
downgrading.
</p>
</div>
)}
</div>
</div>
</Collapsible.Panel>
Expand Down Expand Up @@ -415,25 +406,11 @@ const WorkspacePage = ({
</Collapsible>
</div>
</div>
{activeSubscription.plan.code !== FREE_NO_PLAN_CODE &&
workspaceHasManagedDataSources && (
<div className="pl-2 pt-4">
<p className="text-warning mb-4 text-sm">
Delete managed data sources before downgrading.
</p>
</div>
)}
</div>

<div className="flex flex-col space-y-8 pt-4">
<SubscriptionsDataTable
owner={owner}
subscriptions={subscriptions}
/>
<FeatureFlagsDataTable
owner={owner}
whitelistableFeatures={whitelistableFeatures}
/>
<ActiveSubscriptionTable subscription={activeSubscription} />

<DataSourceDataTable
owner={owner}
dataSources={dataSources}
Expand All @@ -443,6 +420,14 @@ const WorkspacePage = ({
owner={owner}
agentConfigurations={agentConfigurations}
/>
<FeatureFlagsDataTable
owner={owner}
whitelistableFeatures={whitelistableFeatures}
/>
<SubscriptionsDataTable
owner={owner}
subscriptions={subscriptions}
/>
</div>
</div>
</div>
Expand Down

0 comments on commit 9ddfac0

Please sign in to comment.